Chore/demo/zoneless

angular.json

@@ -17,7 +17,7 @@
             },
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [],
             "tsConfig": "src/tsconfig.app.json",
             "aot": false,
             "assets": [
@@ -380,7 +380,7 @@
             "outputPath": "dist/dashboards-demo",
             "index": "projects/dashboards-demo/src/index.html",
             "main": "projects/dashboards-demo/src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [],
             "tsConfig": "projects/dashboards-demo/tsconfig.app.json",
             "aot": true,
             "assets": [
@@ -495,7 +495,7 @@
             "outputPath": "dist/dashboards-demo-webcomponents",
             "index": "projects/dashboards-demo/webcomponents/src/index.html",
             "main": "projects/dashboards-demo/webcomponents/src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [],
             "tsConfig": "projects/dashboards-demo/webcomponents/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [],
@@ -572,7 +572,7 @@
             "outputPath": "dist/dashboards-demo/mfe",
             "index": "projects/dashboards-demo/mfe/src/index.html",
             "main": "projects/dashboards-demo/mfe/src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [],
             "tsConfig": "projects/dashboards-demo/mfe/tsconfig.app.json",
             "aot": true,
             "assets": [

package.json

@@ -111,8 +111,7 @@
     "ol-ext": "4.0.36",
     "ol-mapbox-style": "13.1.1",
     "rxjs": "7.8.2",
-    "tslib": "2.8.1",
-    "zone.js": "0.15.1"
+    "tslib": "2.8.1"
   },
   "devDependencies": {
     "@angular-builders/custom-esbuild": "20.0.0",

projects/dashboards-demo/src/app/app.config.ts

@@ -3,7 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 import { HttpBackend, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import {
+  ApplicationConfig,
+  importProvidersFrom,
+  provideZonelessChangeDetection
+} from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withHashLocation } from '@angular/router';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
@@ -27,6 +31,8 @@ const config: Config = {
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    // eslint-disable-next-line @angular-eslint/no-developer-preview
+    provideZonelessChangeDetection(),
     provideRouter(routes, withHashLocation()),
     { provide: SI_WIDGET_STORE, useClass: AppWidgetStorage },
     { provide: SI_DASHBOARD_CONFIGURATION, useValue: config },

projects/element-ng/about/si-about.component.ts

@@ -6,6 +6,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   computed,
   inject,
@@ -104,6 +105,7 @@ export class SiAboutComponent implements OnInit {
 
   protected readonly licenseApi = signal<ApiInfo[]>([]);
   protected readonly icons = addIcons({ elementDocument });
+  private cdRef = inject(ChangeDetectorRef);
 
   ngOnInit(): void {
     const licenseInfo = this.licenseInfo();
@@ -115,6 +117,7 @@ export class SiAboutComponent implements OnInit {
           this.licenseApi.set([...data]);
           this.toggleLoadLicenseApi(this.licenseApi()[0]);
         }
+        this.cdRef.markForCheck();
       });
     }
   }
@@ -125,6 +128,7 @@ export class SiAboutComponent implements OnInit {
       this.http.get<ApiInfo[]>(apiInfo.href, { responseType: 'json' }).subscribe(files => {
         apiInfo.files = files;
         this.licenseApi.set([...licenseApi]);
+        this.cdRef.markForCheck();
       });
     }
     apiInfo.isOpen = !apiInfo.isOpen;
@@ -138,6 +142,7 @@ export class SiAboutComponent implements OnInit {
       this.http.get(apiInfo.href, { responseType: 'text' }).subscribe((content: string) => {
         apiInfo.content = content;
         this.licenseApi.set([...licenseApi]);
+        this.cdRef.markForCheck();
       });
     }
   }

projects/element-ng/filtered-search/si-filtered-search-value.component.ts

@@ -5,9 +5,11 @@
 import { CdkMonitorFocus, FocusOrigin } from '@angular/cdk/a11y';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   computed,
   ElementRef,
+  inject,
   input,
   model,
   OnInit,
@@ -72,6 +74,7 @@ export class SiFilteredSearchValueComponent implements OnInit {
 
   private readonly operatorInput = viewChild<ElementRef<HTMLInputElement>>('operatorInput');
   private readonly valueInput = viewChild(SiFilteredSearchValueBase);
+  private cdRef = inject(ChangeDetectorRef);
 
   readonly type = computed(() => {
     const definition = this.definition();
@@ -149,6 +152,7 @@ export class SiFilteredSearchValueComponent implements OnInit {
       if (this.active() && !focusOrigin && !this.valueInput()?.focusInOverlay()) {
         this.active.set(false);
       }
+      this.cdRef.markForCheck();
     });
   }
 

projects/element-ng/filtered-search/si-filtered-search.component.ts

@@ -370,6 +370,7 @@ export class SiFilteredSearchComponent implements OnInit, OnChanges {
         return this.translateService.translateAsync(criteria.map(c => c.label)).pipe(
           map(translations => {
             criteria.forEach(c => (c.translatedLabel = translations[c.label] ?? c.label ?? c.name));
+            this.cdRef.markForCheck();
             return criteria;
           })
         );

projects/element-ng/filtered-search/values/si-filtered-search-option-value.base.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { computed, DestroyRef, Directive, inject, input } from '@angular/core';
+import { ChangeDetectorRef, computed, DestroyRef, Directive, inject, input } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { injectSiTranslateService } from '@siemens/element-translate-ng/translate';
 import { BehaviorSubject, Observable, of, switchMap } from 'rxjs';
@@ -54,6 +54,8 @@ export abstract class SiFilteredSearchOptionValueBase extends SiFilteredSearchVa
     );
   });
 
+  private cdRef = inject(ChangeDetectorRef);
+
   protected buildOptions(): Observable<TypeaheadOptionCriterion[]> | undefined {
     let optionsStream: Observable<OptionCriterion[]> | undefined;
     if (this.lazyValueProvider()) {
@@ -82,12 +84,13 @@ export abstract class SiFilteredSearchOptionValueBase extends SiFilteredSearchVa
       switchMap(options => {
         const keys: string[] = options.map(option => option.label!).filter(label => !!label);
         return this.translateService.translateAsync(keys).pipe(
-          map(translations =>
-            options.map(option => ({
+          map(translations => {
+            this.cdRef.markForCheck();
+            return options.map(option => ({
               ...option,
               translatedLabel: translations[option.label!] ?? option.label ?? option.value
-            }))
-          )
+            }));
+          })
         );
       })
     );
@@ -98,7 +101,10 @@ export abstract class SiFilteredSearchOptionValueBase extends SiFilteredSearchVa
       // resolve options for initial values
       this.options()!
         .pipe(first())
-        .subscribe(options => this.processTypeaheadOptions(options));
+        .subscribe(options => {
+          this.cdRef.markForCheck();
+          this.processTypeaheadOptions(options);
+        });
     }
   }
 

projects/element-ng/select/options/si-select-lazy-options.directive.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { Directive, input, OnDestroy, signal } from '@angular/core';
+import { ChangeDetectorRef, Directive, inject, input, OnDestroy, signal } from '@angular/core';
 import { of, Subject, switchMap } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 
@@ -38,6 +38,7 @@ export class SiSelectLazyOptionsDirective<T> implements SiSelectOptionsStrategy<
 
   private valueChange = new Subject<void>();
   private filterChange = new Subject<string | undefined>();
+  private cdRef = inject(ChangeDetectorRef);
 
   constructor() {
     this.filterChange
@@ -59,6 +60,7 @@ export class SiSelectLazyOptionsDirective<T> implements SiSelectOptionsStrategy<
       .subscribe(rows => {
         this.loading.set(false);
         this.rows.set(rows);
+        this.cdRef.markForCheck();
       });
   }
 
@@ -95,7 +97,10 @@ export class SiSelectLazyOptionsDirective<T> implements SiSelectOptionsStrategy<
       optionSource
         .getOptionsForValues(value)
         .pipe(takeUntil(this.valueChange))
-        .subscribe(selectedOptions => this.selectedRows.set(selectedOptions));
+        .subscribe(selectedOptions => {
+          this.selectedRows.set(selectedOptions);
+          this.cdRef.markForCheck();
+        });
     }
   }
 

projects/element-ng/select/select-input/si-select-input.component.html

@@ -7,7 +7,7 @@
   [id]="baseId() + '-content'"
   [siAutoCollapsableList]="selectionStrategy.allowMultiple"
 >
-  @for (activeOption of selectedRows(); track activeOption) {
+  @for (activeOption of selectedRows(); track $index) {
     @if (activeOption) {
       <si-select-option
         siAutoCollapsableListItem

projects/element-ng/side-panel/si-side-panel.component.ts

@@ -317,7 +317,10 @@ export class SiSidePanelComponent implements OnInit, OnDestroy, OnChanges {
     if (open) {
       this.isHidden.set(false);
     }
-    setTimeout(() => this.doOpenClose(open));
+    setTimeout(() => {
+      this.doOpenClose(open);
+      this.cdRef.markForCheck();
+    });
   }
 
   private doOpenClose(open: boolean): void {

projects/element-ng/typeahead/si-typeahead.directive.ts

@@ -6,6 +6,7 @@ import { ConnectionPositionPair, Overlay, OverlayRef } from '@angular/cdk/overla
 import { ComponentPortal } from '@angular/cdk/portal';
 import {
   booleanAttribute,
+  ChangeDetectorRef,
   ComponentRef,
   computed,
   Directive,
@@ -287,6 +288,7 @@ export class SiTypeaheadDirective implements OnChanges, OnDestroy {
   private matchSorter = new SiTypeaheadSorting();
 
   private overlayRef?: OverlayRef;
+  private cdRef = inject(ChangeDetectorRef);
 
   /**
    * Indicates that the typeahead can be potentially open.
@@ -424,6 +426,7 @@ export class SiTypeaheadDirective implements OnChanges, OnDestroy {
       this.query.set(value);
       this.typeaheadOnInput.emit(value ?? '');
       this.canBeOpen.set(true);
+      this.cdRef.markForCheck();
     }, this.typeaheadWaitMs());
   }