refactor(dashboard): explicitly define change detection strategy

projects/element-ng/dashboard/si-dashboard-card.component.ts

@@ -4,6 +4,7 @@
  */
 import {
   booleanAttribute,
+  ChangeDetectionStrategy,
   Component,
   computed,
   ElementRef,
@@ -27,10 +28,11 @@ import { SiDashboardService } from './si-dashboard.service';
   imports: [SiCardHeaderComponent, SiTranslatePipe],
   templateUrl: './si-dashboard-card.component.html',
   styleUrl: './si-dashboard-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.Default,
   host: {
     '[class.elevation-2]': 'isExpanded()',
     '[class.expanded]': 'isExpanded()',
-    '[class.d-none]': 'hide'
+    '[class.d-none]': 'hide()'
   }
 })
 export class SiDashboardCardComponent extends SiCardComponent implements OnDestroy {
@@ -79,7 +81,7 @@ export class SiDashboardCardComponent extends SiCardComponent implements OnDestr
    */
   readonly isExpanded = signal(false);
   /** @internal */
-  hide = false;
+  readonly hide = signal(false);
   /** @internal */
   readonly enableExpandInteractionInternal = signal(false);
   readonly enableExpandInteractionComputed = computed(

projects/element-ng/dashboard/si-dashboard.component.html

@@ -18,14 +18,17 @@ <h2 class="si-layout-title si-layout-top-element">{{ heading() | translate }}</h
     #dashboardFrame
     class="si-layout-fixed-height si-dashboard-content ps-2 pt-2 ms-n2 mt-n2"
     [class.sticky]="sticky()"
-    [style.padding-inline-end.px]="dashboardFrameEndPadding"
+    [style.padding-inline-end.px]="dashboardFrameEndPadding()"
   >
-    <div class="si-layout-fixed-height" [class.d-none]="isExpanded">
+    <div class="si-layout-fixed-height" [class.d-none]="isExpandedSignal()">
       <div #dashboard class="si-layout-fixed-height fix-si-layout-fixed-height">
         <ng-content select="[dashboard]" />
       </div>
     </div>
-    <div class="position-relative flex-grow-1 flex-shrink-1 mb-6" [class.d-none]="!isExpanded">
+    <div
+      class="position-relative flex-grow-1 flex-shrink-1 mb-6"
+      [class.d-none]="!isExpandedSignal()"
+    >
       <ng-container #expandedPortalOutlet cdkPortalOutlet />
     </div>
   </div>

projects/element-ng/dashboard/si-dashboard.component.spec.ts

@@ -111,7 +111,7 @@ describe('SiDashboardComponent', () => {
 
       component.cardComponents().at(-1)!.restore();
       expect(expandSpy).toHaveBeenCalled();
-      expect(component.cardComponents().at(-1)!.hide).toBe(false);
+      expect(component.cardComponents().at(-1)!.hide()).toBe(false);
     });
 
     it('should not call expand multiple times after initCards re-subscriptions', async () => {

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

@@ -7,6 +7,7 @@ import { ViewportScroller } from '@angular/common';
 import {
   AfterViewInit,
   booleanAttribute,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   computed,
@@ -41,6 +42,7 @@ const FIX_SCROLL_PADDING_RESIZE_OBSERVER_THROTTLE = 10;
   templateUrl: './si-dashboard.component.html',
   styleUrl: './si-dashboard.component.scss',
   providers: [SiDashboardService],
+  changeDetection: ChangeDetectionStrategy.Default,
   host: { class: 'si-layout-fixed-height' }
 })
 export class SiDashboardComponent implements OnChanges, AfterViewInit {
@@ -73,18 +75,17 @@ export class SiDashboardComponent implements OnChanges, AfterViewInit {
 
   /**
    * Is `true` if a card is expanded.
-   * @defaultref {@link _isExpanded}
+   * @defaultref {@link isExpandedSignal}
    */
   get isExpanded(): boolean {
-    return this._isExpanded;
+    return this.isExpandedSignal();
   }
 
-  protected dashboardFrameEndPadding: number | null = null;
+  protected readonly dashboardFrameEndPadding = signal<number | null>(null);
   protected readonly hideMenubarComputed = computed(
     () => this.hideMenubar() || this.hideMenubarInternal()
   );
-
-  private _isExpanded = false;
+  protected readonly isExpandedSignal = signal(false);
   private scrollPosition: [number, number] = [0, 0];
 
   private readonly reinitCards$ = new Subject<void>();
@@ -165,7 +166,7 @@ export class SiDashboardComponent implements OnChanges, AfterViewInit {
    * @param card - The card to be expanded.
    */
   public expand(card: SiDashboardCardComponent): void {
-    if (this.isExpanded) {
+    if (this.isExpandedSignal()) {
       this.restoreDashboard();
     }
     if (this.sticky()) {
@@ -184,7 +185,7 @@ export class SiDashboardComponent implements OnChanges, AfterViewInit {
       if (!card.showMenubar()) {
         this.hideMenubarInternal.set(true);
       }
-      this._isExpanded = true;
+      this.isExpandedSignal.set(true);
       this.expandedPortalOutlet().detach();
       this.expandedPortalOutlet().attach(new DomPortal(card.element.nativeElement));
     }
@@ -229,12 +230,12 @@ export class SiDashboardComponent implements OnChanges, AfterViewInit {
       }
       this.cdRef.markForCheck();
     });
-    this._isExpanded = false;
+    this.isExpandedSignal.set(false);
   }
 
   private toggleCardsHide(expand: boolean): void {
     for (const card of this.cards) {
-      card.hide = !card.isExpanded() && expand;
+      card.hide.set(!card.isExpanded() && expand);
     }
   }
 
@@ -264,7 +265,6 @@ export class SiDashboardComponent implements OnChanges, AfterViewInit {
     ) {
       padding = padding - this.scrollbarHelper.width;
     }
-    this.dashboardFrameEndPadding = padding;
-    this.cdRef.markForCheck();
+    this.dashboardFrameEndPadding.set(padding);
   }
 }

projects/element-ng/dashboard/widgets/si-link-widget/si-link-widget.component.ts

@@ -2,7 +2,13 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { booleanAttribute, Component, computed, input } from '@angular/core';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input
+} from '@angular/core';
 import { elementRight2 } from '@siemens/element-icons';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { Link, SiLinkDirective } from '@siemens/element-ng/link';
@@ -18,6 +24,7 @@ import { SiWidgetBaseDirective } from '../si-widget-base.directive';
   selector: 'si-link-widget',
   imports: [SiIconComponent, SiLinkDirective, SiTranslatePipe],
   templateUrl: './si-link-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.Default,
   host: { class: 'si-link-widget' }
 })
 export class SiLinkWidgetComponent extends SiWidgetBaseDirective<Link[]> {

projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-body.component.ts

@@ -2,7 +2,15 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { booleanAttribute, Component, computed, input, model, OnChanges } from '@angular/core';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  OnChanges
+} from '@angular/core';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { Link } from '@siemens/element-ng/link';
@@ -30,6 +38,7 @@ export type SortOrder = 'ASC' | 'DSC';
   imports: [SiListWidgetItemComponent, SiSearchBarComponent, SiTranslatePipe, FormsModule],
   templateUrl: './si-list-widget-body.component.html',
   styleUrl: './si-list-widget-body.component.scss',
+  changeDetection: ChangeDetectionStrategy.Default,
   host: { class: '' }
 })
 export class SiListWidgetBodyComponent

projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-item.component.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { Component, computed } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 import { elementRight2 } from '@siemens/element-icons';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { Link, SiLinkDirective } from '@siemens/element-ng/link';
@@ -41,6 +41,7 @@ export interface SiListWidgetItem {
   selector: 'si-list-widget-item',
   imports: [SiIconComponent, SiLinkDirective, SiTranslatePipe],
   templateUrl: './si-list-widget-item.component.html',
+  changeDetection: ChangeDetectionStrategy.Default,
   host: {
     class: 'list-group-item d-flex align-items-center',
     role: 'listitem'

projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget.component.ts

@@ -2,7 +2,15 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { booleanAttribute, Component, computed, input, model, OnChanges } from '@angular/core';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  OnChanges
+} from '@angular/core';
 import { elementRight2, elementSortDown, elementSortUp } from '@siemens/element-icons';
 import { SiCardComponent } from '@siemens/element-ng/card';
 import { AccentLineType } from '@siemens/element-ng/common';
@@ -29,6 +37,7 @@ import { SiListWidgetItem } from './si-list-widget-item.component';
     SiTranslatePipe
   ],
   templateUrl: './si-list-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.Default,
   host: { class: 'si-list-widget' }
 })
 export class SiListWidgetComponent

projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget-body.component.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 import { SiWidgetBaseDirective } from '../si-widget-base.directive';
 import {
@@ -14,7 +14,8 @@ import {
   selector: 'si-timeline-widget-body',
   imports: [SiTimelineWidgetItemComponent],
   templateUrl: './si-timeline-widget-body.component.html',
-  styleUrl: './si-timeline-widget-body.component.scss'
+  styleUrl: './si-timeline-widget-body.component.scss',
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class SiTimelineWidgetBodyComponent extends SiWidgetBaseDirective<SiTimelineWidgetItem[]> {
   /**

projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget-item.component.ts

@@ -4,7 +4,14 @@
  */
 import { A11yModule } from '@angular/cdk/a11y';
 import { CdkMenuTrigger } from '@angular/cdk/menu';
-import { Component, inject, input, OnChanges, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+  OnChanges,
+  OnInit
+} from '@angular/core';
 import { ActivatedRoute, NavigationExtras, RouterLink } from '@angular/router';
 import { SiIconComponent } from '@siemens/element-ng/icon';
 import { MenuItem, SiMenuModule } from '@siemens/element-ng/menu';
@@ -114,6 +121,7 @@ export interface SiTimelineWidgetItem {
   imports: [SiIconComponent, SiTranslatePipe, A11yModule, RouterLink, SiMenuModule, CdkMenuTrigger],
   templateUrl: './si-timeline-widget-item.component.html',
   styleUrl: './si-timeline-widget-item.component.scss',
+  changeDetection: ChangeDetectionStrategy.Default,
   host: {
     role: 'listitem'
   }

projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget.component.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { Component, computed, input, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, OnChanges } from '@angular/core';
 import { elementRight2 } from '@siemens/element-icons';
 import { SiCardComponent } from '@siemens/element-ng/card';
 import { AccentLineType, MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';
@@ -25,7 +25,8 @@ import { SiTimelineWidgetItem } from './si-timeline-widget-item.component';
     SiTranslatePipe,
     SiIconComponent
   ],
-  templateUrl: './si-timeline-widget.component.html'
+  templateUrl: './si-timeline-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class SiTimelineWidgetComponent
   extends SiWidgetBaseDirective<SiTimelineWidgetItem[]>

projects/element-ng/dashboard/widgets/si-value-widget/si-value-widget-body.component.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { Component, input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, OnInit } from '@angular/core';
 import { EntityStatusType } from '@siemens/element-ng/common';
 import { SiIconComponent, SiStatusIconComponent } from '@siemens/element-ng/icon';
 import { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';
@@ -15,7 +15,8 @@ import { SiWidgetBaseDirective } from '../si-widget-base.directive';
 @Component({
   selector: 'si-value-widget-body',
   imports: [SiIconComponent, SiStatusIconComponent, SiTranslatePipe],
-  templateUrl: './si-value-widget-body.component.html'
+  templateUrl: './si-value-widget-body.component.html',
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class SiValueWidgetBodyComponent
   extends SiWidgetBaseDirective<TranslatableString>

projects/element-ng/dashboard/widgets/si-value-widget/si-value-widget.component.ts

@@ -2,7 +2,13 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { booleanAttribute, Component, computed, input } from '@angular/core';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input
+} from '@angular/core';
 import { SiCardComponent } from '@siemens/element-ng/card';
 import {
   AccentLineType,
@@ -31,7 +37,8 @@ import { SiValueWidgetBodyComponent } from './si-value-widget-body.component';
 @Component({
   selector: 'si-value-widget',
   imports: [SiCardComponent, SiLinkDirective, SiTranslatePipe, SiValueWidgetBodyComponent],
-  templateUrl: './si-value-widget.component.html'
+  templateUrl: './si-value-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class SiValueWidgetComponent {
   /**