From 93126c251cffd497305b0ec192455aad6da2dd93 Mon Sep 17 00:00:00 2001 From: "Bajohr, Rayk" Date: Sat, 8 Nov 2025 16:55:59 +0100 Subject: [PATCH] docs(examples): migrate examples to change detection strategy OnPush --- src/app/examples/badges/badges.ts | 3 ++- src/app/examples/buttons/button-groups.ts | 5 +++-- src/app/examples/buttons/buttoncategories.ts | 5 +++-- src/app/examples/buttons/buttons-placement.ts | 5 +++-- src/app/examples/buttons/buttons.ts | 5 +++-- src/app/examples/buttons/buttontypes.ts | 3 ++- src/app/examples/buttons/selection-buttons.ts | 3 ++- src/app/examples/buttons/split-button.ts | 5 +++-- src/app/examples/colors/color-utils.ts | 3 ++- src/app/examples/custom-form-elements/checkbox.ts | 9 ++++++++- src/app/examples/custom-form-elements/radio.ts | 3 ++- src/app/examples/custom-form-elements/select.ts | 3 ++- src/app/examples/datatable/bootstrap.ts | 3 ++- .../examples/datatable/datatable-column-reorder.ts | 5 +++-- src/app/examples/datatable/datatable-empty-custom.ts | 5 +++-- src/app/examples/datatable/datatable-empty-server.ts | 5 +++-- .../datatable/datatable-filter-sort-server.ts | 5 +++-- src/app/examples/datatable/datatable-filter.ts | 5 +++-- src/app/examples/datatable/datatable-fixed-height.ts | 5 +++-- src/app/examples/datatable/datatable-footer.ts | 5 +++-- src/app/examples/datatable/datatable-grouped-rows.ts | 5 +++-- .../examples/datatable/datatable-paging-virtual.ts | 5 +++-- src/app/examples/datatable/datatable-paging.ts | 5 +++-- src/app/examples/datatable/datatable-responsive.ts | 12 ++++++++++-- src/app/examples/datatable/datatable-selection.ts | 5 +++-- .../examples/datatable/datatable-sticky-columns.ts | 5 +++-- src/app/examples/datatable/datatable-tree.ts | 5 +++-- .../datatable/datatable-vertical-scrolling.ts | 5 +++-- src/app/examples/datatable/datatable.ts | 5 +++-- src/app/examples/drag-drop/drag-drop-cards.ts | 5 +++-- src/app/examples/drag-drop/drag-drop.ts | 5 +++-- src/app/examples/elevation/elevation.ts | 5 +++-- src/app/examples/flex/flex-align-content.ts | 3 ++- .../examples/flex/flex-align-items-auto-margins.ts | 3 ++- src/app/examples/flex/flex-align-items.ts | 3 ++- src/app/examples/flex/flex-align-self.ts | 3 ++- src/app/examples/flex/flex-auto-margins.ts | 3 ++- src/app/examples/flex/flex-direction.ts | 3 ++- src/app/examples/flex/flex-fill.ts | 3 ++- src/app/examples/flex/flex-justify-content.ts | 3 ++- src/app/examples/flex/flex-order.ts | 3 ++- src/app/examples/flex/flex-wrap.ts | 3 ++- src/app/examples/grid-system/grid-row-cols.ts | 3 ++- src/app/examples/grid-system/gutters.ts | 3 ++- src/app/examples/icons/icons.ts | 3 ++- src/app/examples/input-fields/multi-line.ts | 3 ++- src/app/examples/input-fields/single-line.ts | 3 ++- src/app/examples/input-fields/special.ts | 3 ++- src/app/examples/links/links.ts | 3 ++- src/app/examples/list-group/list-group.ts | 3 ++- src/app/examples/shapes/shapes.ts | 5 +++-- src/app/examples/si-avatar/si-avatar.ts | 3 ++- .../si-breadcrumb-router/si-breadcrumb-router.ts | 3 ++- src/app/examples/si-breadcrumb/si-breadcrumb.ts | 3 ++- src/app/examples/si-card/bootstrap-card-grid.ts | 5 +++-- src/app/examples/si-card/bootstrap-card-group.ts | 5 +++-- src/app/examples/si-card/si-action-card.ts | 5 +++-- src/app/examples/si-card/si-card-accent.ts | 5 +++-- src/app/examples/si-card/si-card-multiple.ts | 5 +++-- src/app/examples/si-card/si-card.ts | 5 +++-- src/app/examples/si-charts/cartesian/area-stacked.ts | 5 +++-- src/app/examples/si-charts/cartesian/area.ts | 5 +++-- .../examples/si-charts/cartesian/bar-add-series.ts | 5 +++-- src/app/examples/si-charts/cartesian/bar-basic.ts | 5 +++-- .../si-charts/cartesian/bar-line-combined.ts | 5 +++-- src/app/examples/si-charts/cartesian/bar-stacked.ts | 5 +++-- src/app/examples/si-charts/cartesian/candlestick.ts | 5 +++-- src/app/examples/si-charts/cartesian/heatmap.ts | 5 +++-- .../si-charts/cartesian/line-axis-position.ts | 5 +++-- src/app/examples/si-charts/cartesian/line-basic.ts | 5 +++-- src/app/examples/si-charts/cartesian/line-live.ts | 5 +++-- .../examples/si-charts/cartesian/scatter-basic.ts | 5 +++-- .../si-charts/cartesian/scatter-line-combined.ts | 5 +++-- src/app/examples/si-charts/cartesian/scatter-live.ts | 5 +++-- src/app/examples/si-charts/circle/donut.ts | 5 +++-- src/app/examples/si-charts/circle/pie-basic.ts | 5 +++-- src/app/examples/si-charts/circle/pie-custom.ts | 5 +++-- .../examples/si-charts/circle/pie-label-formatter.ts | 5 +++-- src/app/examples/si-charts/gauge/gauge-basic.ts | 5 +++-- src/app/examples/si-charts/generic/generic-custom.ts | 5 +++-- src/app/examples/si-charts/generic/generic.ts | 5 +++-- .../examples/si-charts/interactive/interactive.ts | 5 +++-- .../examples/si-charts/progress-bar/progress-bar.ts | 5 +++-- src/app/examples/si-charts/progress/progress-220.ts | 5 +++-- src/app/examples/si-charts/progress/progress-360.ts | 5 +++-- src/app/examples/si-charts/sankey/sankey.ts | 5 +++-- src/app/examples/si-charts/si-chart-bar-stacked.ts | 3 ++- src/app/examples/si-charts/si-chart-bar.ts | 3 ++- src/app/examples/si-charts/si-chart-circle-donut.ts | 3 ++- src/app/examples/si-charts/si-chart-circle-pie.ts | 3 ++- src/app/examples/si-charts/si-chart-gauge.ts | 3 ++- src/app/examples/si-charts/si-chart-generic.ts | 3 ++- src/app/examples/si-charts/si-chart-line.ts | 3 ++- src/app/examples/si-charts/si-chart-progress-bar.ts | 3 ++- src/app/examples/si-charts/si-chart-progress.ts | 3 ++- src/app/examples/si-charts/si-chart-scatter.ts | 3 ++- src/app/examples/si-charts/sunburst/sunburst.ts | 5 +++-- src/app/examples/si-chat-messages/si-ai-message.ts | 5 +++-- .../examples/si-chat-messages/si-attachment-list.ts | 5 +++-- src/app/examples/si-chat-messages/si-chat-input.ts | 5 +++-- src/app/examples/si-chat-messages/si-chat-message.ts | 5 +++-- src/app/examples/si-chat-messages/si-user-message.ts | 5 +++-- .../examples/si-circle-status/si-circle-status.ts | 5 +++-- .../si-connection-strength/si-connection-strength.ts | 3 ++- .../si-content-action-bar-states.ts | 3 ++- .../si-content-action-bar-toolbar.ts | 3 ++- .../si-content-action-bar/si-content-action-bar.ts | 3 ++- src/app/examples/si-datepicker/si-date-range.ts | 5 +++-- src/app/examples/si-datepicker/si-modal-service.ts | 3 ++- .../si-fixed-height-layout-side-panel.ts | 5 +++-- src/app/examples/si-empty-state/si-empty-state.ts | 5 +++-- .../si-filter-settings.component.ts | 12 ++++++++++-- .../si-formly/dynamic-form-custom-wrapper.ts | 5 +++-- src/app/examples/si-formly/si-dynamic-form-fields.ts | 5 +++-- src/app/examples/si-help-button/si-help-button.ts | 3 ++- src/app/examples/si-icon/si-icon-composite.ts | 3 ++- src/app/examples/si-icon/si-icon-legacy.ts | 3 ++- src/app/examples/si-icon/si-icon.ts | 3 ++- src/app/examples/si-icon/si-status-icon.ts | 3 ++- .../si-info-page/si-info-page-illustration.ts | 5 +++-- .../si-info-page/si-info-page-stacked-icon.ts | 5 +++-- src/app/examples/si-layouts/anatomy.ts | 5 +++-- .../si-layouts/content-1-2-layout-fixed-height.ts | 5 +++-- .../si-layouts/content-1-2-layout-full-scroll.ts | 5 +++-- .../si-layouts/content-full-layout-fixed-height.ts | 5 +++-- .../si-layouts/content-full-layout-full-scroll.ts | 5 +++-- .../content-tile-layout-full-scroll-vertical-nav.ts | 5 +++-- .../si-layouts/content-tile-layout-full-scroll.ts | 5 +++-- .../si-list-details/si-list-details-router.ts | 5 +++-- src/app/examples/si-list-details/si-list-details.ts | 3 ++- .../examples/si-loading-spinner/si-loading-button.ts | 5 +++-- .../si-loading-spinner/si-loading-spinner-delay.ts | 5 +++-- .../si-loading-spinner-directive.ts | 5 +++-- .../si-loading-spinner/si-loading-spinner.ts | 5 +++-- .../si-main-detail-container-block.ts | 5 +++-- .../si-main-detail-container-filtered-search.ts | 3 ++- .../si-main-detail-container.ts | 3 ++- .../examples/si-map/si-map-custom-cluster-popover.ts | 5 +++-- .../examples/si-map/si-map-custom-popover-onhover.ts | 5 +++-- src/app/examples/si-map/si-map-custom-popover.ts | 5 +++-- src/app/examples/si-map/si-map-custom-style.ts | 3 ++- src/app/examples/si-map/si-map-custom-zoom-levels.ts | 3 ++- src/app/examples/si-map/si-map-default-style.ts | 3 ++- src/app/examples/si-map/si-map-geo-json.ts | 12 ++++++++++-- src/app/examples/si-map/si-map-grouping.ts | 3 ++- src/app/examples/si-map/si-map-labels.ts | 3 ++- .../si-markdown-renderer/si-markdown-renderer.ts | 5 +++-- src/app/examples/si-menu/si-menu-bar.ts | 5 +++-- src/app/examples/si-menu/si-menu-factory-legacy.ts | 5 +++-- src/app/examples/si-menu/si-menu-factory.ts | 5 +++-- src/app/examples/si-menu/si-menu.ts | 5 +++-- src/app/examples/si-modals/app-table.component.ts | 5 +++-- src/app/examples/si-modals/si-modal-service.ts | 10 +++++++++- .../si-notification-item-popover.ts | 3 ++- .../si-notification-item-side-panel.ts | 3 ++- .../si-notification-item/si-notification-item.ts | 3 ++- src/app/examples/si-number-input/si-number-input.ts | 3 ++- src/app/examples/si-page-header/si-page-header.ts | 5 +++-- src/app/examples/si-pagination/si-pagination.ts | 3 ++- .../examples/si-popover-legacy/si-popover-legacy.ts | 5 +++-- src/app/examples/si-popover/si-popover.ts | 5 +++-- .../si-progressbar/si-progressbar-dynamic.ts | 3 ++- src/app/examples/si-shadow-root/si-shadow-root.ts | 3 ++- src/app/examples/si-skeleton/si-skeleton.ts | 3 ++- src/app/examples/si-slider/si-slider-icon.ts | 3 ++- src/app/examples/si-slider/si-slider.ts | 3 ++- .../examples/si-status-counter/si-status-counter.ts | 3 ++- .../examples/si-status-toggle/si-status-toggle.ts | 5 +++-- src/app/examples/si-summary-chip/si-summary-chip.ts | 5 +++-- .../examples/si-summary-widget/si-summary-widget.ts | 5 +++-- src/app/examples/si-switch/si-switch.ts | 5 +++-- .../examples/si-system-banner/si-system-banner.ts | 5 +++-- src/app/examples/si-tabs/si-tabs-arrow.ts | 3 ++- src/app/examples/si-tabs/si-tabs-flex.ts | 3 ++- src/app/examples/si-tabs/si-tabs-icons.ts | 3 ++- src/app/examples/si-tabs/si-tabs-legacy.ts | 3 ++- src/app/examples/si-tabs/si-tabs-routing.ts | 5 +++-- src/app/examples/si-tabs/si-tabs.ts | 3 ++- src/app/examples/si-theme/theme-switcher.ts | 5 +++-- src/app/examples/si-tooltip/si-tooltip.ts | 5 +++-- src/app/examples/si-tour/si-tour.ts | 11 +++++++++-- .../si-unauthorized-page-choice.ts | 5 +++-- .../examples/si-wizard/si-wizard-cancel-button.ts | 3 ++- src/app/examples/si-wizard/si-wizard-dynamical.ts | 3 ++- src/app/examples/si-wizard/si-wizard-failed.ts | 3 ++- src/app/examples/si-wizard/si-wizard-forms.ts | 11 ++++++++++- .../examples/si-wizard/si-wizard-input-validation.ts | 3 ++- .../examples/si-wizard/si-wizard-numbered-steps.ts | 3 ++- src/app/examples/si-wizard/si-wizard-playground.ts | 12 ++++++++++-- .../si-wizard/si-wizard-show-completion-page.ts | 3 ++- src/app/examples/si-wizard/si-wizard-vertical.ts | 3 ++- src/app/examples/si-wizard/si-wizard.ts | 3 ++- src/app/examples/spacing/spacing.ts | 5 +++-- src/app/examples/typography/bootstrap.ts | 3 ++- src/app/examples/typography/color-variants.ts | 3 ++- src/app/examples/typography/display-styles.ts | 3 ++- src/app/examples/typography/type-styles.ts | 3 ++- src/app/examples/typography/typography.ts | 3 ++- 198 files changed, 561 insertions(+), 308 deletions(-) diff --git a/src/app/examples/badges/badges.ts b/src/app/examples/badges/badges.ts index 40c579136..221dcef1d 100644 --- a/src/app/examples/badges/badges.ts +++ b/src/app/examples/badges/badges.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiBadgeComponent } from '@siemens/element-ng/badge'; @Component({ selector: 'app-sample', imports: [SiBadgeComponent], templateUrl: './badges.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5 bg-base-1' } diff --git a/src/app/examples/buttons/button-groups.ts b/src/app/examples/buttons/button-groups.ts index bd0d1c6e3..4f275ce7d 100644 --- a/src/app/examples/buttons/button-groups.ts +++ b/src/app/examples/buttons/button-groups.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', imports: [], - templateUrl: './button-groups.html' + templateUrl: './button-groups.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/buttons/buttoncategories.ts b/src/app/examples/buttons/buttoncategories.ts index d70466a15..9abc2026b 100644 --- a/src/app/examples/buttons/buttoncategories.ts +++ b/src/app/examples/buttons/buttoncategories.ts @@ -2,10 +2,11 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', - templateUrl: './buttoncategories.html' + templateUrl: './buttoncategories.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/buttons/buttons-placement.ts b/src/app/examples/buttons/buttons-placement.ts index ff70d8d2a..25e5f1cbc 100644 --- a/src/app/examples/buttons/buttons-placement.ts +++ b/src/app/examples/buttons/buttons-placement.ts @@ -2,10 +2,11 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', - templateUrl: './buttons-placement.html' + templateUrl: './buttons-placement.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/buttons/buttons.ts b/src/app/examples/buttons/buttons.ts index 133c65106..f04d3c293 100644 --- a/src/app/examples/buttons/buttons.ts +++ b/src/app/examples/buttons/buttons.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', - templateUrl: './buttons.html' + templateUrl: './buttons.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { disabled = false; diff --git a/src/app/examples/buttons/buttontypes.ts b/src/app/examples/buttons/buttontypes.ts index 7c2189478..1b290667a 100644 --- a/src/app/examples/buttons/buttontypes.ts +++ b/src/app/examples/buttons/buttontypes.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './buttontypes.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'bg-base-1' } diff --git a/src/app/examples/buttons/selection-buttons.ts b/src/app/examples/buttons/selection-buttons.ts index 32c101459..2c879e556 100644 --- a/src/app/examples/buttons/selection-buttons.ts +++ b/src/app/examples/buttons/selection-buttons.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './selection-buttons.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/buttons/split-button.ts b/src/app/examples/buttons/split-button.ts index bb5cb8258..fc86ba15e 100644 --- a/src/app/examples/buttons/split-button.ts +++ b/src/app/examples/buttons/split-button.ts @@ -3,13 +3,14 @@ * SPDX-License-Identifier: MIT */ import { CdkMenuTrigger } from '@angular/cdk/menu'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiMenuModule } from '@siemens/element-ng/menu'; @Component({ selector: 'app-sample', imports: [SiMenuModule, CdkMenuTrigger], - templateUrl: './split-button.html' + templateUrl: './split-button.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { splitOpen1 = false; diff --git a/src/app/examples/colors/color-utils.ts b/src/app/examples/colors/color-utils.ts index 52f2b85c8..3c1d3e893 100644 --- a/src/app/examples/colors/color-utils.ts +++ b/src/app/examples/colors/color-utils.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './color-utils.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/custom-form-elements/checkbox.ts b/src/app/examples/custom-form-elements/checkbox.ts index 214443f36..4cc4f3d64 100644 --- a/src/app/examples/custom-form-elements/checkbox.ts +++ b/src/app/examples/custom-form-elements/checkbox.ts @@ -2,11 +2,18 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { AfterViewInit, Component, ElementRef, viewChild } from '@angular/core'; +import { + AfterViewInit, + Component, + ElementRef, + viewChild, + ChangeDetectionStrategy +} from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './checkbox.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent implements AfterViewInit { diff --git a/src/app/examples/custom-form-elements/radio.ts b/src/app/examples/custom-form-elements/radio.ts index 1ecbb8be7..ae5cd59cd 100644 --- a/src/app/examples/custom-form-elements/radio.ts +++ b/src/app/examples/custom-form-elements/radio.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './radio.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/custom-form-elements/select.ts b/src/app/examples/custom-form-elements/select.ts index 8827e7e73..440b3cd71 100644 --- a/src/app/examples/custom-form-elements/select.ts +++ b/src/app/examples/custom-form-elements/select.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './select.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/datatable/bootstrap.ts b/src/app/examples/datatable/bootstrap.ts index 12ec0adb9..00d6bbbcd 100644 --- a/src/app/examples/datatable/bootstrap.ts +++ b/src/app/examples/datatable/bootstrap.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiFormItemComponent } from '@siemens/element-ng/form'; import { SiIconComponent } from '@siemens/element-ng/icon'; @@ -11,6 +11,7 @@ import { SiIconComponent } from '@siemens/element-ng/icon'; selector: 'app-sample', imports: [FormsModule, SiFormItemComponent, SiIconComponent], templateUrl: './bootstrap.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/datatable/datatable-column-reorder.ts b/src/app/examples/datatable/datatable-column-reorder.ts index 96773b4c8..7f05ca399 100644 --- a/src/app/examples/datatable/datatable-column-reorder.ts +++ b/src/app/examples/datatable/datatable-column-reorder.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, DestroyRef, inject } from '@angular/core'; +import { Component, DestroyRef, inject, ChangeDetectionStrategy } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { Column, @@ -18,7 +18,8 @@ import { NgxDatatableModule, TableColumn } from '@siemens/ngx-datatable'; selector: 'app-sample', imports: [NgxDatatableModule, SiDatatableModule, SiResizeObserverModule], templateUrl: './datatable-column-reorder.html', - styleUrl: './datatable.scss' + styleUrl: './datatable.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { tableConfig = SI_DATATABLE_CONFIG; diff --git a/src/app/examples/datatable/datatable-empty-custom.ts b/src/app/examples/datatable/datatable-empty-custom.ts index afa7ba19c..eec0b9e6b 100644 --- a/src/app/examples/datatable/datatable-empty-custom.ts +++ b/src/app/examples/datatable/datatable-empty-custom.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state'; import { NgxDatatableModule } from '@siemens/ngx-datatable'; @@ -11,7 +11,8 @@ import { NgxDatatableModule } from '@siemens/ngx-datatable'; selector: 'app-sample', imports: [NgxDatatableModule, SiDatatableModule, SiEmptyStateComponent], templateUrl: './datatable-empty-custom.html', - styleUrl: './datatable.scss' + styleUrl: './datatable.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { tableConfig = SI_DATATABLE_CONFIG; diff --git a/src/app/examples/datatable/datatable-empty-server.ts b/src/app/examples/datatable/datatable-empty-server.ts index ea33f45c1..998cae273 100644 --- a/src/app/examples/datatable/datatable-empty-server.ts +++ b/src/app/examples/datatable/datatable-empty-server.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state'; import { NgxDatatableModule } from '@siemens/ngx-datatable'; @@ -14,7 +14,8 @@ import { CorporateEmployee, DataService, PageRequest } from './data.service'; imports: [NgxDatatableModule, SiDatatableModule, SiEmptyStateComponent], templateUrl: './datatable-empty-server.html', styleUrl: './datatable.scss', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { tableConfig = SI_DATATABLE_CONFIG; diff --git a/src/app/examples/datatable/datatable-filter-sort-server.ts b/src/app/examples/datatable/datatable-filter-sort-server.ts index f5d6763a7..845a29d6c 100644 --- a/src/app/examples/datatable/datatable-filter-sort-server.ts +++ b/src/app/examples/datatable/datatable-filter-sort-server.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, OnDestroy, viewChild } from '@angular/core'; +import { Component, inject, OnDestroy, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state'; import { DatatableComponent, NgxDatatableModule } from '@siemens/ngx-datatable'; @@ -15,7 +15,8 @@ import { CorporateEmployee, DataService, PageRequest } from './data.service'; imports: [NgxDatatableModule, SiDatatableModule, SiEmptyStateComponent], templateUrl: './datatable-filter-sort-server.html', styleUrl: './datatable.scss', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnDestroy { readonly table = viewChild(DatatableComponent); diff --git a/src/app/examples/datatable/datatable-filter.ts b/src/app/examples/datatable/datatable-filter.ts index b505bc130..3a5fda4a1 100644 --- a/src/app/examples/datatable/datatable-filter.ts +++ b/src/app/examples/datatable/datatable-filter.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, viewChild } from '@angular/core'; +import { Component, inject, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state'; import { DatatableComponent, NgxDatatableModule } from '@siemens/ngx-datatable'; @@ -14,7 +14,8 @@ import { CorporateEmployee, DataService, PageRequest } from './data.service'; imports: [NgxDatatableModule, SiDatatableModule, SiEmptyStateComponent], templateUrl: './datatable-filter.html', styleUrl: './datatable.scss', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { readonly table = viewChild.required(DatatableComponent); diff --git a/src/app/examples/datatable/datatable-fixed-height.ts b/src/app/examples/datatable/datatable-fixed-height.ts index 99210a426..fcb4d1bdd 100644 --- a/src/app/examples/datatable/datatable-fixed-height.ts +++ b/src/app/examples/datatable/datatable-fixed-height.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, OnDestroy } from '@angular/core'; +import { Component, inject, OnDestroy, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiCardComponent } from '@siemens/element-ng/card'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; @@ -23,7 +23,8 @@ import { CorporateEmployee, DataService, Page, PageRequest } from './data.servic ], templateUrl: './datatable-fixed-height.html', styleUrl: './datatable.scss', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnDestroy { tableConfig = SI_DATATABLE_CONFIG; diff --git a/src/app/examples/datatable/datatable-footer.ts b/src/app/examples/datatable/datatable-footer.ts index 0bf97ddab..0585d88cc 100644 --- a/src/app/examples/datatable/datatable-footer.ts +++ b/src/app/examples/datatable/datatable-footer.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { SiResizeObserverModule } from '@siemens/element-ng/resize-observer'; import { NgxDatatableModule } from '@siemens/ngx-datatable'; @@ -11,7 +11,8 @@ import { NgxDatatableModule } from '@siemens/ngx-datatable'; selector: 'app-sample', imports: [NgxDatatableModule, SiDatatableModule, SiResizeObserverModule], templateUrl: './datatable-footer.html', - styleUrl: './datatable.scss' + styleUrl: './datatable.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { tableConfig = SI_DATATABLE_CONFIG; diff --git a/src/app/examples/datatable/datatable-grouped-rows.ts b/src/app/examples/datatable/datatable-grouped-rows.ts index ae675f850..3bf6de4a4 100644 --- a/src/app/examples/datatable/datatable-grouped-rows.ts +++ b/src/app/examples/datatable/datatable-grouped-rows.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnInit, viewChild } from '@angular/core'; +import { Component, OnInit, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { SiIconModule } from '@siemens/element-ng/icon'; import { SiResizeObserverModule } from '@siemens/element-ng/resize-observer'; @@ -12,7 +12,8 @@ import { DatatableComponent, NgxDatatableModule, TableColumn } from '@siemens/ng selector: 'app-sample', imports: [NgxDatatableModule, SiDatatableModule, SiResizeObserverModule, SiIconModule], standalone: true, - templateUrl: './datatable-grouped-rows.html' + templateUrl: './datatable-grouped-rows.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit { readonly table = viewChild.required(DatatableComponent); diff --git a/src/app/examples/datatable/datatable-paging-virtual.ts b/src/app/examples/datatable/datatable-paging-virtual.ts index 6305c15aa..d52f3ee26 100644 --- a/src/app/examples/datatable/datatable-paging-virtual.ts +++ b/src/app/examples/datatable/datatable-paging-virtual.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { SiResizeObserverModule } from '@siemens/element-ng/resize-observer'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -15,7 +15,8 @@ import { CorporateEmployee, DataService, PageRequest } from './data.service'; imports: [NgxDatatableModule, SiResizeObserverModule, SiDatatableModule], templateUrl: './datatable-paging-virtual.html', styleUrl: './datatable.scss', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/datatable/datatable-paging.ts b/src/app/examples/datatable/datatable-paging.ts index 9b367bce8..508211bfa 100644 --- a/src/app/examples/datatable/datatable-paging.ts +++ b/src/app/examples/datatable/datatable-paging.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, OnDestroy } from '@angular/core'; +import { Component, inject, OnDestroy, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { SiPaginationComponent } from '@siemens/element-ng/pagination'; import { NgxDatatableModule } from '@siemens/ngx-datatable'; @@ -15,7 +15,8 @@ import { CorporateEmployee, DataService, Page, PageRequest } from './data.servic imports: [NgxDatatableModule, SiDatatableModule, SiPaginationComponent], templateUrl: './datatable-paging.html', styleUrl: './datatable.scss', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnDestroy { tableConfig = SI_DATATABLE_CONFIG; diff --git a/src/app/examples/datatable/datatable-responsive.ts b/src/app/examples/datatable/datatable-responsive.ts index b3f8a2af2..dd3c3e8e9 100644 --- a/src/app/examples/datatable/datatable-responsive.ts +++ b/src/app/examples/datatable/datatable-responsive.ts @@ -3,7 +3,14 @@ * SPDX-License-Identifier: MIT */ import { CdkMenuTrigger } from '@angular/cdk/menu'; -import { Component, OnDestroy, OnInit, TemplateRef, viewChild } from '@angular/core'; +import { + Component, + OnDestroy, + OnInit, + TemplateRef, + viewChild, + ChangeDetectionStrategy +} from '@angular/core'; import { SiCircleStatusModule } from '@siemens/element-ng/circle-status'; import { StatusType } from '@siemens/element-ng/common'; import { SiDatatableModule } from '@siemens/element-ng/datatable'; @@ -31,7 +38,8 @@ import { Subject } from 'rxjs'; CdkMenuTrigger ], templateUrl: './datatable-responsive.html', - styleUrl: './datatable.scss' + styleUrl: './datatable.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit, OnDestroy { readonly statusCellTempl = viewChild.required>('statusCellTempl'); diff --git a/src/app/examples/datatable/datatable-selection.ts b/src/app/examples/datatable/datatable-selection.ts index e7f32d38d..776cfad46 100644 --- a/src/app/examples/datatable/datatable-selection.ts +++ b/src/app/examples/datatable/datatable-selection.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiCardComponent } from '@siemens/element-ng/card'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; @@ -13,7 +13,8 @@ import { NgxDatatableModule, SelectionType } from '@siemens/ngx-datatable'; selector: 'app-sample', imports: [NgxDatatableModule, SiDatatableModule, SiCardComponent, SiFormModule, FormsModule], templateUrl: './datatable-selection.html', - styleUrl: './datatable.scss' + styleUrl: './datatable.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { tableConfig = SI_DATATABLE_CONFIG; diff --git a/src/app/examples/datatable/datatable-sticky-columns.ts b/src/app/examples/datatable/datatable-sticky-columns.ts index 038127f61..e79a33be2 100644 --- a/src/app/examples/datatable/datatable-sticky-columns.ts +++ b/src/app/examples/datatable/datatable-sticky-columns.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnInit, TemplateRef, viewChild } from '@angular/core'; +import { Component, OnInit, TemplateRef, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { SiCircleStatusModule } from '@siemens/element-ng/circle-status'; import { StatusType } from '@siemens/element-ng/common'; import { SiDatatableModule } from '@siemens/element-ng/datatable'; @@ -13,7 +13,8 @@ import { NgxDatatableModule, TableColumn } from '@siemens/ngx-datatable'; selector: 'app-sample', imports: [NgxDatatableModule, SiDatatableModule, SiPaginationComponent, SiCircleStatusModule], templateUrl: './datatable-sticky-columns.html', - styleUrl: './datatable.scss' + styleUrl: './datatable.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit { readonly statusCellTempl = viewChild.required>('statusCellTempl'); diff --git a/src/app/examples/datatable/datatable-tree.ts b/src/app/examples/datatable/datatable-tree.ts index e367fa367..adbce02e0 100644 --- a/src/app/examples/datatable/datatable-tree.ts +++ b/src/app/examples/datatable/datatable-tree.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { NgxDatatableModule, TableColumn } from '@siemens/ngx-datatable'; @@ -10,7 +10,8 @@ import { NgxDatatableModule, TableColumn } from '@siemens/ngx-datatable'; selector: 'app-sample', imports: [NgxDatatableModule, SiDatatableModule], templateUrl: './datatable-tree.html', - styleUrl: './datatable.scss' + styleUrl: './datatable.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit { rows: any[] = []; diff --git a/src/app/examples/datatable/datatable-vertical-scrolling.ts b/src/app/examples/datatable/datatable-vertical-scrolling.ts index 5aa984f60..42d0712d2 100644 --- a/src/app/examples/datatable/datatable-vertical-scrolling.ts +++ b/src/app/examples/datatable/datatable-vertical-scrolling.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnInit, TemplateRef, viewChild } from '@angular/core'; +import { Component, OnInit, TemplateRef, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { SiCircleStatusModule } from '@siemens/element-ng/circle-status'; import { StatusType } from '@siemens/element-ng/common'; import { SiDatatableModule } from '@siemens/element-ng/datatable'; @@ -22,7 +22,8 @@ import { DatatableComponent, NgxDatatableModule, TableColumn } from '@siemens/ng SiCircleStatusModule ], templateUrl: './datatable-vertical-scrolling.html', - styleUrl: './datatable.scss' + styleUrl: './datatable.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit { readonly table = viewChild(DatatableComponent); diff --git a/src/app/examples/datatable/datatable.ts b/src/app/examples/datatable/datatable.ts index 3aa3b6369..ec004e1f3 100644 --- a/src/app/examples/datatable/datatable.ts +++ b/src/app/examples/datatable/datatable.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CdkMenuTrigger } from '@angular/cdk/menu'; -import { Component, OnInit, TemplateRef, viewChild } from '@angular/core'; +import { Component, OnInit, TemplateRef, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiCircleStatusComponent } from '@siemens/element-ng/circle-status'; import { StatusType } from '@siemens/element-ng/common'; @@ -29,7 +29,8 @@ import { NgxDatatableModule, SelectionType, TableColumn } from '@siemens/ngx-dat SiFormValidationTooltipDirective ], templateUrl: './datatable.html', - styleUrl: './datatable.scss' + styleUrl: './datatable.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit { readonly statusCellTempl = viewChild.required('statusCellTempl', { diff --git a/src/app/examples/drag-drop/drag-drop-cards.ts b/src/app/examples/drag-drop/drag-drop-cards.ts index 1452b7a9b..e8dce387d 100644 --- a/src/app/examples/drag-drop/drag-drop-cards.ts +++ b/src/app/examples/drag-drop/drag-drop-cards.ts @@ -9,7 +9,7 @@ import { transferArrayItem } from '@angular/cdk/drag-drop'; import { CdkListbox, CdkOption } from '@angular/cdk/listbox'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiCardComponent } from '@siemens/element-ng/card'; import { SiIconModule } from '@siemens/element-ng/icon'; import { SiMenuModule } from '@siemens/element-ng/menu'; @@ -27,7 +27,8 @@ import { SiMenuModule } from '@siemens/element-ng/menu'; .card-body:hover { cursor: auto; } - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { protected cards = [ diff --git a/src/app/examples/drag-drop/drag-drop.ts b/src/app/examples/drag-drop/drag-drop.ts index cf9371526..a19dbf302 100644 --- a/src/app/examples/drag-drop/drag-drop.ts +++ b/src/app/examples/drag-drop/drag-drop.ts @@ -10,7 +10,7 @@ import { } from '@angular/cdk/drag-drop'; import { CdkListbox, CdkOption } from '@angular/cdk/listbox'; import { CdkContextMenuTrigger, CdkMenuModule } from '@angular/cdk/menu'; -import { Component, signal, viewChildren } from '@angular/core'; +import { Component, signal, viewChildren, ChangeDetectionStrategy } from '@angular/core'; import { SiMenuModule } from '@siemens/element-ng/menu'; @Component({ @@ -24,7 +24,8 @@ import { SiMenuModule } from '@siemens/element-ng/menu'; CdkMenuModule ], standalone: true, - templateUrl: './drag-drop.html' + templateUrl: './drag-drop.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { protected listOne = [ diff --git a/src/app/examples/elevation/elevation.ts b/src/app/examples/elevation/elevation.ts index 33dd8683e..5f19a15a4 100644 --- a/src/app/examples/elevation/elevation.ts +++ b/src/app/examples/elevation/elevation.ts @@ -2,10 +2,11 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', - templateUrl: './elevation.html' + templateUrl: './elevation.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/flex/flex-align-content.ts b/src/app/examples/flex/flex-align-content.ts index 4fce3cb27..20176835e 100644 --- a/src/app/examples/flex/flex-align-content.ts +++ b/src/app/examples/flex/flex-align-content.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -21,6 +21,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/flex/flex-align-items-auto-margins.ts b/src/app/examples/flex/flex-align-items-auto-margins.ts index 115241168..50ef8c91d 100644 --- a/src/app/examples/flex/flex-align-items-auto-margins.ts +++ b/src/app/examples/flex/flex-align-items-auto-margins.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -20,6 +20,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/flex/flex-align-items.ts b/src/app/examples/flex/flex-align-items.ts index 54b4fcc54..448a2c82e 100644 --- a/src/app/examples/flex/flex-align-items.ts +++ b/src/app/examples/flex/flex-align-items.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -20,6 +20,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/flex/flex-align-self.ts b/src/app/examples/flex/flex-align-self.ts index dd78c6285..2e2290c8b 100644 --- a/src/app/examples/flex/flex-align-self.ts +++ b/src/app/examples/flex/flex-align-self.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -20,6 +20,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/flex/flex-auto-margins.ts b/src/app/examples/flex/flex-auto-margins.ts index 06dd290bf..95daa91da 100644 --- a/src/app/examples/flex/flex-auto-margins.ts +++ b/src/app/examples/flex/flex-auto-margins.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -17,6 +17,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/flex/flex-direction.ts b/src/app/examples/flex/flex-direction.ts index 9bfd72211..a22a5a287 100644 --- a/src/app/examples/flex/flex-direction.ts +++ b/src/app/examples/flex/flex-direction.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -17,6 +17,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/flex/flex-fill.ts b/src/app/examples/flex/flex-fill.ts index daaef3a6f..87e8b0e69 100644 --- a/src/app/examples/flex/flex-fill.ts +++ b/src/app/examples/flex/flex-fill.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -17,6 +17,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/flex/flex-justify-content.ts b/src/app/examples/flex/flex-justify-content.ts index c3034b050..14ba311ff 100644 --- a/src/app/examples/flex/flex-justify-content.ts +++ b/src/app/examples/flex/flex-justify-content.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -17,6 +17,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/flex/flex-order.ts b/src/app/examples/flex/flex-order.ts index a17121fef..ee58b3fc1 100644 --- a/src/app/examples/flex/flex-order.ts +++ b/src/app/examples/flex/flex-order.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -20,6 +20,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/flex/flex-wrap.ts b/src/app/examples/flex/flex-wrap.ts index a9f0e6088..920ab645a 100644 --- a/src/app/examples/flex/flex-wrap.ts +++ b/src/app/examples/flex/flex-wrap.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -20,6 +20,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/grid-system/grid-row-cols.ts b/src/app/examples/grid-system/grid-row-cols.ts index 75f5a6ac5..16b3ebb96 100644 --- a/src/app/examples/grid-system/grid-row-cols.ts +++ b/src/app/examples/grid-system/grid-row-cols.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -17,6 +17,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/grid-system/gutters.ts b/src/app/examples/grid-system/gutters.ts index c3cc468e5..11f95f749 100644 --- a/src/app/examples/grid-system/gutters.ts +++ b/src/app/examples/grid-system/gutters.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -18,6 +18,7 @@ import { Component } from '@angular/core'; } } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/icons/icons.ts b/src/app/examples/icons/icons.ts index c8b9bf885..abc27034d 100644 --- a/src/app/examples/icons/icons.ts +++ b/src/app/examples/icons/icons.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './icons.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/input-fields/multi-line.ts b/src/app/examples/input-fields/multi-line.ts index 3c4723591..838ae9786 100644 --- a/src/app/examples/input-fields/multi-line.ts +++ b/src/app/examples/input-fields/multi-line.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './multi-line.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/input-fields/single-line.ts b/src/app/examples/input-fields/single-line.ts index 0ffd57ec9..2af1ace97 100644 --- a/src/app/examples/input-fields/single-line.ts +++ b/src/app/examples/input-fields/single-line.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './single-line.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/input-fields/special.ts b/src/app/examples/input-fields/special.ts index f090ebb6e..92611f0e2 100644 --- a/src/app/examples/input-fields/special.ts +++ b/src/app/examples/input-fields/special.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './special.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/links/links.ts b/src/app/examples/links/links.ts index e5ce44ff8..f5a96613d 100644 --- a/src/app/examples/links/links.ts +++ b/src/app/examples/links/links.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './links.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/list-group/list-group.ts b/src/app/examples/list-group/list-group.ts index f452d5926..6d9bdd48c 100644 --- a/src/app/examples/list-group/list-group.ts +++ b/src/app/examples/list-group/list-group.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiCircleStatusModule } from '@siemens/element-ng/circle-status'; @Component({ selector: 'app-sample', imports: [SiCircleStatusModule], templateUrl: './list-group.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/shapes/shapes.ts b/src/app/examples/shapes/shapes.ts index a015bf90e..c83b58f2a 100644 --- a/src/app/examples/shapes/shapes.ts +++ b/src/app/examples/shapes/shapes.ts @@ -2,10 +2,11 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', - templateUrl: './shapes.html' + templateUrl: './shapes.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/si-avatar/si-avatar.ts b/src/app/examples/si-avatar/si-avatar.ts index aa420b1bb..36e3f7de9 100644 --- a/src/app/examples/si-avatar/si-avatar.ts +++ b/src/app/examples/si-avatar/si-avatar.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiAvatarComponent } from '@siemens/element-ng/avatar'; @Component({ selector: 'app-sample', imports: [SiAvatarComponent], templateUrl: './si-avatar.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-breadcrumb-router/si-breadcrumb-router.ts b/src/app/examples/si-breadcrumb-router/si-breadcrumb-router.ts index 225755afc..15b12e955 100644 --- a/src/app/examples/si-breadcrumb-router/si-breadcrumb-router.ts +++ b/src/app/examples/si-breadcrumb-router/si-breadcrumb-router.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiBreadcrumbRouterComponent } from '@siemens/element-ng/breadcrumb-router'; @Component({ selector: 'app-sample', imports: [SiBreadcrumbRouterComponent], templateUrl: './si-breadcrumb-router.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-breadcrumb/si-breadcrumb.ts b/src/app/examples/si-breadcrumb/si-breadcrumb.ts index ee4100bcd..b1438144b 100644 --- a/src/app/examples/si-breadcrumb/si-breadcrumb.ts +++ b/src/app/examples/si-breadcrumb/si-breadcrumb.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiBreadcrumbModule } from '@siemens/element-ng/breadcrumb'; @Component({ selector: 'app-sample', imports: [SiBreadcrumbModule], templateUrl: './si-breadcrumb.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-card/bootstrap-card-grid.ts b/src/app/examples/si-card/bootstrap-card-grid.ts index 62212eac3..cb9dc6bd4 100644 --- a/src/app/examples/si-card/bootstrap-card-grid.ts +++ b/src/app/examples/si-card/bootstrap-card-grid.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiCardComponent } from '@siemens/element-ng/card'; import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiCardComponent], - templateUrl: './bootstrap-card-grid.html' + templateUrl: './bootstrap-card-grid.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-card/bootstrap-card-group.ts b/src/app/examples/si-card/bootstrap-card-group.ts index c0cda7764..5076b8454 100644 --- a/src/app/examples/si-card/bootstrap-card-group.ts +++ b/src/app/examples/si-card/bootstrap-card-group.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiCardComponent } from '@siemens/element-ng/card'; import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiCardComponent], - templateUrl: './bootstrap-card-group.html' + templateUrl: './bootstrap-card-group.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-card/si-action-card.ts b/src/app/examples/si-card/si-action-card.ts index bf2e9f77d..0ee891642 100644 --- a/src/app/examples/si-card/si-action-card.ts +++ b/src/app/examples/si-card/si-action-card.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiActionCardComponent } from '@siemens/element-ng/card'; import { SiIconModule } from '@siemens/element-ng/icon'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -15,7 +15,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; .card-size { height: 250px; } - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { private log = inject(LOG_EVENT); diff --git a/src/app/examples/si-card/si-card-accent.ts b/src/app/examples/si-card/si-card-accent.ts index 6daec3bf0..4cd234f69 100644 --- a/src/app/examples/si-card/si-card-accent.ts +++ b/src/app/examples/si-card/si-card-accent.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiCardComponent } from '@siemens/element-ng/card'; @Component({ @@ -13,6 +13,7 @@ import { SiCardComponent } from '@siemens/element-ng/card'; .card-size { height: 200px; } - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/si-card/si-card-multiple.ts b/src/app/examples/si-card/si-card-multiple.ts index 8fc60fa97..d5cab1939 100644 --- a/src/app/examples/si-card/si-card-multiple.ts +++ b/src/app/examples/si-card/si-card-multiple.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiCardComponent } from '@siemens/element-ng/card'; import { ContentActionBarMainItem } from '@siemens/element-ng/content-action-bar'; import { MenuItem } from '@siemens/element-ng/menu'; @@ -11,7 +11,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiCardComponent], - templateUrl: './si-card-multiple.html' + templateUrl: './si-card-multiple.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-card/si-card.ts b/src/app/examples/si-card/si-card.ts index 7fe4d6819..9960ac3a3 100644 --- a/src/app/examples/si-card/si-card.ts +++ b/src/app/examples/si-card/si-card.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiCardComponent } from '@siemens/element-ng/card'; import { ContentActionBarMainItem } from '@siemens/element-ng/content-action-bar'; import { SiIconComponent } from '@siemens/element-ng/icon'; @@ -17,7 +17,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; .card-size { height: 250px; } - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-charts/cartesian/area-stacked.ts b/src/app/examples/si-charts/cartesian/area-stacked.ts index 855e27f5a..3a326e7e3 100644 --- a/src/app/examples/si-charts/cartesian/area-stacked.ts +++ b/src/app/examples/si-charts/cartesian/area-stacked.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -16,7 +16,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/area.ts b/src/app/examples/si-charts/cartesian/area.ts index cfd00b0e9..64794aeeb 100644 --- a/src/app/examples/si-charts/cartesian/area.ts +++ b/src/app/examples/si-charts/cartesian/area.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -16,7 +16,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/bar-add-series.ts b/src/app/examples/si-charts/cartesian/bar-add-series.ts index bdce3e6a1..1987f2891 100644 --- a/src/app/examples/si-charts/cartesian/bar-add-series.ts +++ b/src/app/examples/si-charts/cartesian/bar-add-series.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, viewChild } from '@angular/core'; +import { Component, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -18,7 +18,8 @@ const point = (): number => Math.round(Math.random() * 100); @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/bar-basic.ts b/src/app/examples/si-charts/cartesian/bar-basic.ts index c1c898f5f..d104c7280 100644 --- a/src/app/examples/si-charts/cartesian/bar-basic.ts +++ b/src/app/examples/si-charts/cartesian/bar-basic.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -16,7 +16,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/bar-line-combined.ts b/src/app/examples/si-charts/cartesian/bar-line-combined.ts index d01f86eab..6b268c276 100644 --- a/src/app/examples/si-charts/cartesian/bar-line-combined.ts +++ b/src/app/examples/si-charts/cartesian/bar-line-combined.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -16,7 +16,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/bar-stacked.ts b/src/app/examples/si-charts/cartesian/bar-stacked.ts index b74fcb76f..7b3362aee 100644 --- a/src/app/examples/si-charts/cartesian/bar-stacked.ts +++ b/src/app/examples/si-charts/cartesian/bar-stacked.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -16,7 +16,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/candlestick.ts b/src/app/examples/si-charts/cartesian/candlestick.ts index 7ad3e3c22..b92b494aa 100644 --- a/src/app/examples/si-charts/cartesian/candlestick.ts +++ b/src/app/examples/si-charts/cartesian/candlestick.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnDestroy, viewChild } from '@angular/core'; +import { Component, OnDestroy, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartData, CartesianChartSeries, @@ -18,7 +18,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase implements OnDestroy { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/heatmap.ts b/src/app/examples/si-charts/cartesian/heatmap.ts index aa4c3e601..57a81cacf 100644 --- a/src/app/examples/si-charts/cartesian/heatmap.ts +++ b/src/app/examples/si-charts/cartesian/heatmap.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -194,7 +194,8 @@ const data = [ @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/line-axis-position.ts b/src/app/examples/si-charts/cartesian/line-axis-position.ts index 1c6b19e61..7e6bef6d6 100644 --- a/src/app/examples/si-charts/cartesian/line-axis-position.ts +++ b/src/app/examples/si-charts/cartesian/line-axis-position.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -16,7 +16,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/line-basic.ts b/src/app/examples/si-charts/cartesian/line-basic.ts index c58e020f8..62458f016 100644 --- a/src/app/examples/si-charts/cartesian/line-basic.ts +++ b/src/app/examples/si-charts/cartesian/line-basic.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -16,7 +16,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/line-live.ts b/src/app/examples/si-charts/cartesian/line-live.ts index 9ef3ba75b..902786fd2 100644 --- a/src/app/examples/si-charts/cartesian/line-live.ts +++ b/src/app/examples/si-charts/cartesian/line-live.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnDestroy, viewChild } from '@angular/core'; +import { Component, OnDestroy, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -17,7 +17,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase implements OnDestroy { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/scatter-basic.ts b/src/app/examples/si-charts/cartesian/scatter-basic.ts index 574037cb2..a40c0a9de 100644 --- a/src/app/examples/si-charts/cartesian/scatter-basic.ts +++ b/src/app/examples/si-charts/cartesian/scatter-basic.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -16,7 +16,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/scatter-line-combined.ts b/src/app/examples/si-charts/cartesian/scatter-line-combined.ts index 79180fe65..e2a58590b 100644 --- a/src/app/examples/si-charts/cartesian/scatter-line-combined.ts +++ b/src/app/examples/si-charts/cartesian/scatter-line-combined.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -16,7 +16,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase { chartData: ChartData = { diff --git a/src/app/examples/si-charts/cartesian/scatter-live.ts b/src/app/examples/si-charts/cartesian/scatter-live.ts index 2f979c4c0..26b29b96e 100644 --- a/src/app/examples/si-charts/cartesian/scatter-live.ts +++ b/src/app/examples/si-charts/cartesian/scatter-live.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnDestroy, viewChild } from '@angular/core'; +import { Component, OnDestroy, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, ChartXAxis, @@ -17,7 +17,8 @@ import { ChartBase, ChartData } from './chart-base'; @Component({ selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent extends ChartBase implements OnDestroy { chartData: ChartData = { diff --git a/src/app/examples/si-charts/circle/donut.ts b/src/app/examples/si-charts/circle/donut.ts index e9c7a1881..816fff069 100644 --- a/src/app/examples/si-charts/circle/donut.ts +++ b/src/app/examples/si-charts/circle/donut.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CircleChartSeries, SiChartCircleComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @Component({ selector: 'app-sample', imports: [SiChartCircleComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { chartData = { diff --git a/src/app/examples/si-charts/circle/pie-basic.ts b/src/app/examples/si-charts/circle/pie-basic.ts index 56ec88d1a..a296569a9 100644 --- a/src/app/examples/si-charts/circle/pie-basic.ts +++ b/src/app/examples/si-charts/circle/pie-basic.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnDestroy, viewChild } from '@angular/core'; +import { Component, OnDestroy, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { CircleChartSeries, SiChartCircleComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; import { interval, Subscription } from 'rxjs'; @@ -10,7 +10,8 @@ import { interval, Subscription } from 'rxjs'; @Component({ selector: 'app-sample', imports: [SiChartCircleComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnDestroy { chartData = { diff --git a/src/app/examples/si-charts/circle/pie-custom.ts b/src/app/examples/si-charts/circle/pie-custom.ts index b9ec3cfc9..0ce4fc41f 100644 --- a/src/app/examples/si-charts/circle/pie-custom.ts +++ b/src/app/examples/si-charts/circle/pie-custom.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CircleChartSeries, SiChartCircleComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @Component({ selector: 'app-sample', imports: [SiChartCircleComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { chartData = { diff --git a/src/app/examples/si-charts/circle/pie-label-formatter.ts b/src/app/examples/si-charts/circle/pie-label-formatter.ts index 3d7f3f24c..39b5f0eea 100644 --- a/src/app/examples/si-charts/circle/pie-label-formatter.ts +++ b/src/app/examples/si-charts/circle/pie-label-formatter.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnDestroy, viewChild } from '@angular/core'; +import { Component, OnDestroy, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { CircleChartSeries, SiChartCircleComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; import { interval, Subscription } from 'rxjs'; @@ -10,7 +10,8 @@ import { interval, Subscription } from 'rxjs'; @Component({ selector: 'app-sample', imports: [SiChartCircleComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnDestroy { chartData = { diff --git a/src/app/examples/si-charts/gauge/gauge-basic.ts b/src/app/examples/si-charts/gauge/gauge-basic.ts index de5eabdcc..c335f4aed 100644 --- a/src/app/examples/si-charts/gauge/gauge-basic.ts +++ b/src/app/examples/si-charts/gauge/gauge-basic.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnDestroy, viewChild } from '@angular/core'; +import { Component, OnDestroy, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiChartGaugeComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @@ -11,7 +11,8 @@ import { interval, Subscription } from 'rxjs'; @Component({ selector: 'app-sample', imports: [FormsModule, SiChartGaugeComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnDestroy { chartData = { diff --git a/src/app/examples/si-charts/generic/generic-custom.ts b/src/app/examples/si-charts/generic/generic-custom.ts index a5ad7ca66..e7724827c 100644 --- a/src/app/examples/si-charts/generic/generic-custom.ts +++ b/src/app/examples/si-charts/generic/generic-custom.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { EChartOption, SiChartComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @Component({ selector: 'app-sample', imports: [SiChartComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { chartColors: EChartOption = {}; diff --git a/src/app/examples/si-charts/generic/generic.ts b/src/app/examples/si-charts/generic/generic.ts index 62043954f..553bd1faa 100644 --- a/src/app/examples/si-charts/generic/generic.ts +++ b/src/app/examples/si-charts/generic/generic.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, HostListener } from '@angular/core'; +import { Component, HostListener, ChangeDetectionStrategy } from '@angular/core'; import { EChartOption, SiChartComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @Component({ selector: 'app-sample', imports: [SiChartComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { chartColors: EChartOption = this.createChartColors(); diff --git a/src/app/examples/si-charts/interactive/interactive.ts b/src/app/examples/si-charts/interactive/interactive.ts index 93d4a6b49..cfd25f047 100644 --- a/src/app/examples/si-charts/interactive/interactive.ts +++ b/src/app/examples/si-charts/interactive/interactive.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnDestroy, OnInit, viewChild } from '@angular/core'; +import { Component, OnDestroy, OnInit, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { AxisPointerEvent, CartesianChartData, @@ -61,7 +61,8 @@ const mulberry32 = (seed: number) => () => { selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], templateUrl: './interactive.html', - styleUrl: './interactive.scss' + styleUrl: './interactive.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit, OnDestroy { readonly trendChart = viewChild.required('trendChart'); diff --git a/src/app/examples/si-charts/progress-bar/progress-bar.ts b/src/app/examples/si-charts/progress-bar/progress-bar.ts index aa1541193..b0e9691bb 100644 --- a/src/app/examples/si-charts/progress-bar/progress-bar.ts +++ b/src/app/examples/si-charts/progress-bar/progress-bar.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnDestroy, viewChild } from '@angular/core'; +import { Component, OnDestroy, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { ProgressChartSeries, SiChartProgressBarComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; import { interval, Subscription } from 'rxjs'; @@ -10,7 +10,8 @@ import { interval, Subscription } from 'rxjs'; @Component({ selector: 'app-sample', imports: [SiChartProgressBarComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnDestroy { chartData = { diff --git a/src/app/examples/si-charts/progress/progress-220.ts b/src/app/examples/si-charts/progress/progress-220.ts index 920b8d35d..867aad3b2 100644 --- a/src/app/examples/si-charts/progress/progress-220.ts +++ b/src/app/examples/si-charts/progress/progress-220.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, OnDestroy, viewChild } from '@angular/core'; +import { Component, OnDestroy, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { ProgressChartSeries, SiChartProgressComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; import { interval, Subscription } from 'rxjs'; @@ -10,7 +10,8 @@ import { interval, Subscription } from 'rxjs'; @Component({ selector: 'app-sample', imports: [SiChartProgressComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnDestroy { chartData = { diff --git a/src/app/examples/si-charts/progress/progress-360.ts b/src/app/examples/si-charts/progress/progress-360.ts index 58deeb3c7..5f3f8abbd 100644 --- a/src/app/examples/si-charts/progress/progress-360.ts +++ b/src/app/examples/si-charts/progress/progress-360.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { ProgressChartSeries, SiChartProgressComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @Component({ selector: 'app-sample', imports: [SiChartProgressComponent, SiResizeObserverDirective], - templateUrl: './chart.html' + templateUrl: './chart.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { chartData = { diff --git a/src/app/examples/si-charts/sankey/sankey.ts b/src/app/examples/si-charts/sankey/sankey.ts index 1297b549f..28ede0ec3 100644 --- a/src/app/examples/si-charts/sankey/sankey.ts +++ b/src/app/examples/si-charts/sankey/sankey.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, HostListener } from '@angular/core'; +import { Component, HostListener, ChangeDetectionStrategy } from '@angular/core'; import { EChartOption, SankeySeriesOption, SiChartSankeyComponent } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @Component({ selector: 'app-sample', imports: [SiChartSankeyComponent, SiResizeObserverDirective], - templateUrl: './sankey.html' + templateUrl: './sankey.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { title = 'Sankey Chart'; diff --git a/src/app/examples/si-charts/si-chart-bar-stacked.ts b/src/app/examples/si-charts/si-chart-bar-stacked.ts index 48fa803bc..d9a94d33f 100644 --- a/src/app/examples/si-charts/si-chart-bar-stacked.ts +++ b/src/app/examples/si-charts/si-chart-bar-stacked.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiChartCartesianComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @@ -12,6 +12,7 @@ themeSupport.setDefault(themeElement); selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], templateUrl: './si-chart-bar-stacked.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-charts/si-chart-bar.ts b/src/app/examples/si-charts/si-chart-bar.ts index d97553eb9..4976f5e4d 100644 --- a/src/app/examples/si-charts/si-chart-bar.ts +++ b/src/app/examples/si-charts/si-chart-bar.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiChartCartesianComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @@ -12,6 +12,7 @@ themeSupport.setDefault(themeElement); selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], templateUrl: './si-chart-bar.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-charts/si-chart-circle-donut.ts b/src/app/examples/si-charts/si-chart-circle-donut.ts index ac6bb0ade..757677c27 100644 --- a/src/app/examples/si-charts/si-chart-circle-donut.ts +++ b/src/app/examples/si-charts/si-chart-circle-donut.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiChartCircleComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @@ -12,6 +12,7 @@ themeSupport.setDefault(themeElement); selector: 'app-sample', imports: [SiChartCircleComponent, SiResizeObserverDirective], templateUrl: './si-chart-circle-donut.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-charts/si-chart-circle-pie.ts b/src/app/examples/si-charts/si-chart-circle-pie.ts index 1eaabeb24..3ed4c358b 100644 --- a/src/app/examples/si-charts/si-chart-circle-pie.ts +++ b/src/app/examples/si-charts/si-chart-circle-pie.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiChartCircleComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @@ -12,6 +12,7 @@ themeSupport.setDefault(themeElement); selector: 'app-sample', imports: [SiChartCircleComponent, SiResizeObserverDirective], templateUrl: './si-chart-circle-pie.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-charts/si-chart-gauge.ts b/src/app/examples/si-charts/si-chart-gauge.ts index 913828555..41d1ed67d 100644 --- a/src/app/examples/si-charts/si-chart-gauge.ts +++ b/src/app/examples/si-charts/si-chart-gauge.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiChartGaugeComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @@ -12,6 +12,7 @@ themeSupport.setDefault(themeElement); selector: 'app-sample', imports: [SiChartGaugeComponent, SiResizeObserverDirective], templateUrl: './si-chart-gauge.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-charts/si-chart-generic.ts b/src/app/examples/si-charts/si-chart-generic.ts index 2b36eb734..27b4088eb 100644 --- a/src/app/examples/si-charts/si-chart-generic.ts +++ b/src/app/examples/si-charts/si-chart-generic.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { EChartOption, SiChartComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @@ -12,6 +12,7 @@ themeSupport.setDefault(themeElement); selector: 'app-sample', imports: [SiChartComponent, SiResizeObserverDirective], templateUrl: './si-chart-generic.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-charts/si-chart-line.ts b/src/app/examples/si-charts/si-chart-line.ts index 3b6fc043e..1b8681313 100644 --- a/src/app/examples/si-charts/si-chart-line.ts +++ b/src/app/examples/si-charts/si-chart-line.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiChartCartesianComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @@ -12,6 +12,7 @@ themeSupport.setDefault(themeElement); selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], templateUrl: './si-chart-line.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-charts/si-chart-progress-bar.ts b/src/app/examples/si-charts/si-chart-progress-bar.ts index b2ff7ad5a..eadfa8204 100644 --- a/src/app/examples/si-charts/si-chart-progress-bar.ts +++ b/src/app/examples/si-charts/si-chart-progress-bar.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiChartProgressBarComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @@ -12,6 +12,7 @@ themeSupport.setDefault(themeElement); selector: 'app-sample', imports: [SiChartProgressBarComponent, SiResizeObserverDirective], templateUrl: './si-chart-progress-bar.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-charts/si-chart-progress.ts b/src/app/examples/si-charts/si-chart-progress.ts index 89b24a58d..c77e800e8 100644 --- a/src/app/examples/si-charts/si-chart-progress.ts +++ b/src/app/examples/si-charts/si-chart-progress.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiChartProgressComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @@ -12,6 +12,7 @@ themeSupport.setDefault(themeElement); selector: 'app-sample', imports: [SiChartProgressComponent, SiResizeObserverDirective], templateUrl: './si-chart-progress.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-charts/si-chart-scatter.ts b/src/app/examples/si-charts/si-chart-scatter.ts index bc27cba94..2902726aa 100644 --- a/src/app/examples/si-charts/si-chart-scatter.ts +++ b/src/app/examples/si-charts/si-chart-scatter.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CartesianChartSeries, SiChartCartesianComponent, @@ -17,6 +17,7 @@ themeSupport.setDefault(themeElement); selector: 'app-sample', imports: [SiChartCartesianComponent, SiResizeObserverDirective], templateUrl: './si-chart-scatter.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-charts/sunburst/sunburst.ts b/src/app/examples/si-charts/sunburst/sunburst.ts index d7a842914..479ec070d 100644 --- a/src/app/examples/si-charts/sunburst/sunburst.ts +++ b/src/app/examples/si-charts/sunburst/sunburst.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, HostListener } from '@angular/core'; +import { Component, HostListener, ChangeDetectionStrategy } from '@angular/core'; import { EChartOption, SiChartSunburstComponent, SunburstSeriesOption } from '@siemens/charts-ng'; import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer'; @Component({ selector: 'app-sample', imports: [SiChartSunburstComponent, SiResizeObserverDirective], - templateUrl: './sunburst.html' + templateUrl: './sunburst.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { title = 'Sunburst Chart'; diff --git a/src/app/examples/si-chat-messages/si-ai-message.ts b/src/app/examples/si-chat-messages/si-ai-message.ts index 49e7563c9..7e3483b1e 100644 --- a/src/app/examples/si-chat-messages/si-ai-message.ts +++ b/src/app/examples/si-chat-messages/si-ai-message.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { MessageAction, SiAiMessageComponent } from '@siemens/element-ng/chat-messages'; import { getMarkdownRenderer } from '@siemens/element-ng/markdown-renderer'; @@ -12,7 +12,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiAiMessageComponent], - templateUrl: './si-ai-message.html' + templateUrl: './si-ai-message.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-chat-messages/si-attachment-list.ts b/src/app/examples/si-chat-messages/si-attachment-list.ts index 0286f5266..b0a5e3df5 100644 --- a/src/app/examples/si-chat-messages/si-attachment-list.ts +++ b/src/app/examples/si-chat-messages/si-attachment-list.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, TemplateRef, viewChild } from '@angular/core'; +import { Component, inject, TemplateRef, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { SiAttachmentListComponent, Attachment } from '@siemens/element-ng/chat-messages'; import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiAttachmentListComponent], - templateUrl: './si-attachment-list.html' + templateUrl: './si-attachment-list.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-chat-messages/si-chat-input.ts b/src/app/examples/si-chat-messages/si-chat-input.ts index 7fec0fdc0..44a620dd2 100644 --- a/src/app/examples/si-chat-messages/si-chat-input.ts +++ b/src/app/examples/si-chat-messages/si-chat-input.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, signal } from '@angular/core'; +import { Component, inject, signal, ChangeDetectionStrategy } from '@angular/core'; import { SiChatInputComponent, MessageAction, @@ -15,7 +15,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiChatInputComponent, SiIconComponent], - templateUrl: './si-chat-input.html' + templateUrl: './si-chat-input.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-chat-messages/si-chat-message.ts b/src/app/examples/si-chat-messages/si-chat-message.ts index 0af8e822a..fa7bc22a4 100644 --- a/src/app/examples/si-chat-messages/si-chat-message.ts +++ b/src/app/examples/si-chat-messages/si-chat-message.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CdkMenuTrigger } from '@angular/cdk/menu'; -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiAvatarComponent } from '@siemens/element-ng/avatar'; import { SiChatMessageComponent, @@ -31,7 +31,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; SiMenuFactoryComponent, SiTranslatePipe ], - templateUrl: './si-chat-message.html' + templateUrl: './si-chat-message.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-chat-messages/si-user-message.ts b/src/app/examples/si-chat-messages/si-user-message.ts index 8c1847e3a..2fa637d8a 100644 --- a/src/app/examples/si-chat-messages/si-user-message.ts +++ b/src/app/examples/si-chat-messages/si-user-message.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { SiUserMessageComponent, @@ -15,7 +15,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiUserMessageComponent], - templateUrl: './si-user-message.html' + templateUrl: './si-user-message.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-circle-status/si-circle-status.ts b/src/app/examples/si-circle-status/si-circle-status.ts index 02729dd81..3774e6179 100644 --- a/src/app/examples/si-circle-status/si-circle-status.ts +++ b/src/app/examples/si-circle-status/si-circle-status.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiCircleStatusComponent } from '@siemens/element-ng/circle-status'; @Component({ selector: 'app-sample', imports: [SiCircleStatusComponent, FormsModule], - templateUrl: './si-circle-status.html' + templateUrl: './si-circle-status.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { pulsing = false; diff --git a/src/app/examples/si-connection-strength/si-connection-strength.ts b/src/app/examples/si-connection-strength/si-connection-strength.ts index ed84c61c0..4dce83fd0 100644 --- a/src/app/examples/si-connection-strength/si-connection-strength.ts +++ b/src/app/examples/si-connection-strength/si-connection-strength.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiConnectionStrengthComponent } from '@siemens/element-ng/connection-strength'; @Component({ selector: 'app-sample', imports: [SiConnectionStrengthComponent], templateUrl: './si-connection-strength.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-content-action-bar/si-content-action-bar-states.ts b/src/app/examples/si-content-action-bar/si-content-action-bar-states.ts index fd1fb5916..0117af925 100644 --- a/src/app/examples/si-content-action-bar/si-content-action-bar-states.ts +++ b/src/app/examples/si-content-action-bar/si-content-action-bar-states.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { ContentActionBarMainItem, SiContentActionBarComponent, @@ -14,6 +14,7 @@ import { MenuItem } from '@siemens/element-ng/menu'; selector: 'app-sample', imports: [SiContentActionBarComponent], templateUrl: './si-content-action-bar-states.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-content-action-bar/si-content-action-bar-toolbar.ts b/src/app/examples/si-content-action-bar/si-content-action-bar-toolbar.ts index ca8077ad1..a12a076f0 100644 --- a/src/app/examples/si-content-action-bar/si-content-action-bar-toolbar.ts +++ b/src/app/examples/si-content-action-bar/si-content-action-bar-toolbar.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { ContentActionBarMainItem, SiContentActionBarComponent @@ -13,6 +13,7 @@ import { MenuItem } from '@siemens/element-ng/menu'; selector: 'app-sample', imports: [SiContentActionBarComponent], templateUrl: './si-content-action-bar-toolbar.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-content-action-bar/si-content-action-bar.ts b/src/app/examples/si-content-action-bar/si-content-action-bar.ts index 3d5baaafd..f5dc4922c 100644 --- a/src/app/examples/si-content-action-bar/si-content-action-bar.ts +++ b/src/app/examples/si-content-action-bar/si-content-action-bar.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { ContentActionBarMainItem, SiContentActionBarComponent @@ -14,6 +14,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiContentActionBarComponent], templateUrl: './si-content-action-bar.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-datepicker/si-date-range.ts b/src/app/examples/si-datepicker/si-date-range.ts index 52360576f..f985a817b 100644 --- a/src/app/examples/si-datepicker/si-date-range.ts +++ b/src/app/examples/si-datepicker/si-date-range.ts @@ -3,14 +3,15 @@ * SPDX-License-Identifier: MIT */ import { CommonModule } from '@angular/common'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import { DateRange, SiDateRangeComponent } from '@siemens/element-ng/datepicker'; @Component({ selector: 'app-sample', imports: [CommonModule, SiDateRangeComponent, ReactiveFormsModule], - templateUrl: './si-date-range.html' + templateUrl: './si-date-range.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { dateRange = new FormControl(null); diff --git a/src/app/examples/si-datepicker/si-modal-service.ts b/src/app/examples/si-datepicker/si-modal-service.ts index 0a765ff93..18b7654e1 100644 --- a/src/app/examples/si-datepicker/si-modal-service.ts +++ b/src/app/examples/si-datepicker/si-modal-service.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, OnDestroy, TemplateRef } from '@angular/core'; +import { Component, inject, OnDestroy, TemplateRef, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiDatepickerDirective, SiCalendarButtonComponent } from '@siemens/element-ng/datepicker'; import { SiFormItemComponent } from '@siemens/element-ng/form'; @@ -12,6 +12,7 @@ import { ModalRef, SiModalService } from '@siemens/element-ng/modal'; selector: 'app-sample', imports: [FormsModule, SiDatepickerDirective, SiCalendarButtonComponent, SiFormItemComponent], templateUrl: './si-modal-service.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent implements OnDestroy { diff --git a/src/app/examples/si-electron-titlebar/si-fixed-height-layout-side-panel.ts b/src/app/examples/si-electron-titlebar/si-fixed-height-layout-side-panel.ts index de701dafd..06f6ad0f5 100644 --- a/src/app/examples/si-electron-titlebar/si-fixed-height-layout-side-panel.ts +++ b/src/app/examples/si-electron-titlebar/si-fixed-height-layout-side-panel.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CdkPortal, PortalModule } from '@angular/cdk/portal'; -import { Component, inject, OnDestroy, viewChild } from '@angular/core'; +import { Component, inject, OnDestroy, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { RouterLink } from '@angular/router'; import { SiAccordionComponent, SiCollapsiblePanelComponent } from '@siemens/element-ng/accordion'; import { @@ -59,7 +59,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; SiLaunchpadFactoryComponent, SiHeaderLogoDirective ], - templateUrl: './si-fixed-height-layout-side-panel.html' + templateUrl: './si-fixed-height-layout-side-panel.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnDestroy { // the real function is injected by the previewer diff --git a/src/app/examples/si-empty-state/si-empty-state.ts b/src/app/examples/si-empty-state/si-empty-state.ts index c71815c8d..a4a58042f 100644 --- a/src/app/examples/si-empty-state/si-empty-state.ts +++ b/src/app/examples/si-empty-state/si-empty-state.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state'; import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiEmptyStateComponent], - templateUrl: './si-empty-state.html' + templateUrl: './si-empty-state.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-filter-settings/si-filter-settings.component.ts b/src/app/examples/si-filter-settings/si-filter-settings.component.ts index e4cd70be2..2d3f3e426 100644 --- a/src/app/examples/si-filter-settings/si-filter-settings.component.ts +++ b/src/app/examples/si-filter-settings/si-filter-settings.component.ts @@ -2,14 +2,22 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { booleanAttribute, Component, Input, output, OutputEmitterRef } from '@angular/core'; +import { + booleanAttribute, + Component, + Input, + output, + OutputEmitterRef, + ChangeDetectionStrategy +} from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiCardComponent } from '@siemens/element-ng/card'; import { BackgroundColorVariant } from '@siemens/element-ng/common'; @Component({ selector: 'app-filter-settings', imports: [SiCardComponent, FormsModule], - templateUrl: './si-filter-settings.component.html' + templateUrl: './si-filter-settings.component.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SiFilterSettingsComponent { @Input() variant: BackgroundColorVariant = 'base-1'; diff --git a/src/app/examples/si-formly/dynamic-form-custom-wrapper.ts b/src/app/examples/si-formly/dynamic-form-custom-wrapper.ts index 456b91d62..acc79e08f 100644 --- a/src/app/examples/si-formly/dynamic-form-custom-wrapper.ts +++ b/src/app/examples/si-formly/dynamic-form-custom-wrapper.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FieldWrapper } from '@ngx-formly/core'; import { SiCardComponent } from '@siemens/element-ng/card'; @@ -20,6 +20,7 @@ Sample component to test custom type registration in SiFormlyModule

- ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class CustomWrapperComponent extends FieldWrapper {} diff --git a/src/app/examples/si-formly/si-dynamic-form-fields.ts b/src/app/examples/si-formly/si-dynamic-form-fields.ts index d3578f84d..e048436cc 100644 --- a/src/app/examples/si-formly/si-dynamic-form-fields.ts +++ b/src/app/examples/si-formly/si-dynamic-form-fields.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CommonModule } from '@angular/common'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FormRecord } from '@angular/forms'; import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core'; import { DatepickerInputConfig } from '@siemens/element-ng/datepicker'; @@ -13,7 +13,8 @@ import { SiFormlyModule } from '@siemens/element-ng/formly'; @Component({ selector: 'app-sample', imports: [CommonModule, SiFormModule, SiFormlyModule], - templateUrl: './si-dynamic-form-fields.html' + templateUrl: './si-dynamic-form-fields.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { form = new FormRecord({}); diff --git a/src/app/examples/si-help-button/si-help-button.ts b/src/app/examples/si-help-button/si-help-button.ts index 66f9476de..3a8d7ed25 100644 --- a/src/app/examples/si-help-button/si-help-button.ts +++ b/src/app/examples/si-help-button/si-help-button.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import { SiFormItemComponent } from '@siemens/element-ng/form'; import { SiHelpButtonComponent } from '@siemens/element-ng/help-button'; @@ -12,6 +12,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiHelpButtonComponent, SiFormItemComponent, ReactiveFormsModule], templateUrl: './si-help-button.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } diff --git a/src/app/examples/si-icon/si-icon-composite.ts b/src/app/examples/si-icon/si-icon-composite.ts index 7f6043708..d89c9275d 100644 --- a/src/app/examples/si-icon/si-icon-composite.ts +++ b/src/app/examples/si-icon/si-icon-composite.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiIconComponent } from '@siemens/element-ng/icon'; @Component({ selector: 'app-sample', imports: [SiIconComponent], templateUrl: './si-icon-composite.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-icon/si-icon-legacy.ts b/src/app/examples/si-icon/si-icon-legacy.ts index 13c3b665f..8135139ab 100644 --- a/src/app/examples/si-icon/si-icon-legacy.ts +++ b/src/app/examples/si-icon/si-icon-legacy.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiIconComponent } from '@siemens/element-ng/icon'; @Component({ selector: 'app-sample', imports: [SiIconComponent], templateUrl: './si-icon-legacy.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-icon/si-icon.ts b/src/app/examples/si-icon/si-icon.ts index d3e3a1365..9e36ba2cc 100644 --- a/src/app/examples/si-icon/si-icon.ts +++ b/src/app/examples/si-icon/si-icon.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { addIcons, element2dEditor, @@ -18,6 +18,7 @@ import { selector: 'app-sample', imports: [SiIconModule, SiIconComponent], templateUrl: './si-icon.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-icon/si-status-icon.ts b/src/app/examples/si-icon/si-status-icon.ts index cf3a062f3..9dca4219f 100644 --- a/src/app/examples/si-icon/si-status-icon.ts +++ b/src/app/examples/si-icon/si-status-icon.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiStatusIconComponent } from '@siemens/element-ng/icon'; @Component({ selector: 'app-sample', imports: [SiStatusIconComponent], templateUrl: './si-status-icon.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-info-page/si-info-page-illustration.ts b/src/app/examples/si-info-page/si-info-page-illustration.ts index 0ba4e2c18..76f4577b6 100644 --- a/src/app/examples/si-info-page/si-info-page-illustration.ts +++ b/src/app/examples/si-info-page/si-info-page-illustration.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiInfoPageComponent } from '@siemens/element-ng/info-page'; import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiInfoPageComponent], - templateUrl: './si-info-page-illustration.html' + templateUrl: './si-info-page-illustration.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-info-page/si-info-page-stacked-icon.ts b/src/app/examples/si-info-page/si-info-page-stacked-icon.ts index 52a66ec6d..57efd2c40 100644 --- a/src/app/examples/si-info-page/si-info-page-stacked-icon.ts +++ b/src/app/examples/si-info-page/si-info-page-stacked-icon.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiIconComponent } from '@siemens/element-ng/icon'; import { SiInfoPageComponent } from '@siemens/element-ng/info-page'; @Component({ selector: 'app-sample', imports: [SiInfoPageComponent, SiIconComponent], - templateUrl: './si-info-page-stacked-icon.html' + templateUrl: './si-info-page-stacked-icon.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { face = 'element-state-face-neutral'; diff --git a/src/app/examples/si-layouts/anatomy.ts b/src/app/examples/si-layouts/anatomy.ts index d9a04da85..76dc53c3f 100644 --- a/src/app/examples/si-layouts/anatomy.ts +++ b/src/app/examples/si-layouts/anatomy.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { RouterLink } from '@angular/router'; import { SiAccordionComponent, SiCollapsiblePanelComponent } from '@siemens/element-ng/accordion'; import { @@ -62,7 +62,8 @@ import { SiSystemBannerComponent } from '@siemens/element-ng/system-banner'; SiSystemBannerComponent, SiHeaderLogoDirective ], - templateUrl: './anatomy.html' + templateUrl: './anatomy.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { breadcrumbItems: BreadcrumbItem[] = [ diff --git a/src/app/examples/si-layouts/content-1-2-layout-fixed-height.ts b/src/app/examples/si-layouts/content-1-2-layout-fixed-height.ts index 320d912b7..c07e89433 100644 --- a/src/app/examples/si-layouts/content-1-2-layout-fixed-height.ts +++ b/src/app/examples/si-layouts/content-1-2-layout-fixed-height.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; import { RouterLink } from '@angular/router'; import { SiChartCircleComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { @@ -50,7 +50,8 @@ themeSupport.setDefault(themeElement); SiHeaderLogoDirective ], templateUrl: './content-1-2-layout-fixed-height.html', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { menuItems: NavbarVerticalItem[] = [ diff --git a/src/app/examples/si-layouts/content-1-2-layout-full-scroll.ts b/src/app/examples/si-layouts/content-1-2-layout-full-scroll.ts index 751199851..7fe303f5f 100644 --- a/src/app/examples/si-layouts/content-1-2-layout-full-scroll.ts +++ b/src/app/examples/si-layouts/content-1-2-layout-full-scroll.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; import { RouterLink } from '@angular/router'; import { SiChartCircleComponent, themeElement, themeSupport } from '@siemens/charts-ng'; import { @@ -50,7 +50,8 @@ themeSupport.setDefault(themeElement); SiHeaderLogoDirective ], templateUrl: './content-1-2-layout-full-scroll.html', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { menuItems: NavbarVerticalItem[] = [ diff --git a/src/app/examples/si-layouts/content-full-layout-fixed-height.ts b/src/app/examples/si-layouts/content-full-layout-fixed-height.ts index b2b803716..dab0575bc 100644 --- a/src/app/examples/si-layouts/content-full-layout-fixed-height.ts +++ b/src/app/examples/si-layouts/content-full-layout-fixed-height.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core'; import { RouterLink } from '@angular/router'; import { SiAccountDetailsComponent, @@ -47,7 +47,8 @@ import { CorporateEmployee, DataService, Page, PageRequest } from '../datatable/ SiHeaderLogoDirective ], templateUrl: './content-full-layout-fixed-height.html', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit { menuItems: NavbarVerticalItem[] = [ diff --git a/src/app/examples/si-layouts/content-full-layout-full-scroll.ts b/src/app/examples/si-layouts/content-full-layout-full-scroll.ts index e612d5052..8c059c8b5 100644 --- a/src/app/examples/si-layouts/content-full-layout-full-scroll.ts +++ b/src/app/examples/si-layouts/content-full-layout-full-scroll.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core'; import { RouterLink } from '@angular/router'; import { SiAccountDetailsComponent, @@ -47,7 +47,8 @@ import { CorporateEmployee, DataService, Page, PageRequest } from '../datatable/ SiHeaderLogoDirective ], templateUrl: './content-full-layout-full-scroll.html', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit { menuItems: NavbarVerticalItem[] = [ diff --git a/src/app/examples/si-layouts/content-tile-layout-full-scroll-vertical-nav.ts b/src/app/examples/si-layouts/content-tile-layout-full-scroll-vertical-nav.ts index 1d77c6fc4..79e446677 100644 --- a/src/app/examples/si-layouts/content-tile-layout-full-scroll-vertical-nav.ts +++ b/src/app/examples/si-layouts/content-tile-layout-full-scroll-vertical-nav.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { AsyncPipe } from '@angular/common'; -import { Component, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; import { RouterLink } from '@angular/router'; import { SiAccordionComponent, SiCollapsiblePanelComponent } from '@siemens/element-ng/accordion'; import { @@ -55,7 +55,8 @@ import { delay, of } from 'rxjs'; AsyncPipe, SiHeaderLogoDirective ], - templateUrl: './content-tile-layout-full-scroll-vertical-nav.html' + templateUrl: './content-tile-layout-full-scroll-vertical-nav.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { collapsed = true; diff --git a/src/app/examples/si-layouts/content-tile-layout-full-scroll.ts b/src/app/examples/si-layouts/content-tile-layout-full-scroll.ts index ed9738a01..6c78034fc 100644 --- a/src/app/examples/si-layouts/content-tile-layout-full-scroll.ts +++ b/src/app/examples/si-layouts/content-tile-layout-full-scroll.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { RouterLink } from '@angular/router'; import { SiAccountDetailsComponent, @@ -35,7 +35,8 @@ import { SiSearchBarComponent } from '@siemens/element-ng/search-bar'; SiHeaderBrandDirective, SiHeaderLogoDirective ], - templateUrl: './content-tile-layout-full-scroll.html' + templateUrl: './content-tile-layout-full-scroll.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { menuItems: NavbarVerticalItem[] = [ diff --git a/src/app/examples/si-list-details/si-list-details-router.ts b/src/app/examples/si-list-details/si-list-details-router.ts index b3e527a91..52fd5ff8c 100644 --- a/src/app/examples/si-list-details/si-list-details-router.ts +++ b/src/app/examples/si-list-details/si-list-details-router.ts @@ -4,7 +4,7 @@ */ import { CdkMenuTrigger } from '@angular/cdk/menu'; import { AsyncPipe, CommonModule, JsonPipe } from '@angular/common'; -import { AfterViewInit, Component, inject } from '@angular/core'; +import { AfterViewInit, Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { SiEmptyStateComponent, SiEmptyStateModule } from '@siemens/element-ng/empty-state'; @@ -46,7 +46,8 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s } - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) class OverviewComponent { private activatedRoute = inject(ActivatedRoute); diff --git a/src/app/examples/si-list-details/si-list-details.ts b/src/app/examples/si-list-details/si-list-details.ts index 22ff3801f..76e920c87 100644 --- a/src/app/examples/si-list-details/si-list-details.ts +++ b/src/app/examples/si-list-details/si-list-details.ts @@ -4,7 +4,7 @@ */ import { CdkMenuTrigger } from '@angular/cdk/menu'; import { CommonModule } from '@angular/common'; -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { SiEmptyStateModule } from '@siemens/element-ng/empty-state'; import { Filter, SiFilterBarComponent } from '@siemens/element-ng/filter-bar'; @@ -66,6 +66,7 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s ], templateUrl: './si-list-details.html', providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'si-layout-fixed-height' } diff --git a/src/app/examples/si-loading-spinner/si-loading-button.ts b/src/app/examples/si-loading-spinner/si-loading-button.ts index a52ff0922..787a05542 100644 --- a/src/app/examples/si-loading-spinner/si-loading-button.ts +++ b/src/app/examples/si-loading-spinner/si-loading-button.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CommonModule } from '@angular/common'; -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiLoadingButtonComponent } from '@siemens/element-ng/loading-spinner'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -11,7 +11,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [FormsModule, SiLoadingButtonComponent, CommonModule], - templateUrl: './si-loading-button.html' + templateUrl: './si-loading-button.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-loading-spinner/si-loading-spinner-delay.ts b/src/app/examples/si-loading-spinner/si-loading-spinner-delay.ts index 36c18441a..12b5a712f 100644 --- a/src/app/examples/si-loading-spinner/si-loading-spinner-delay.ts +++ b/src/app/examples/si-loading-spinner/si-loading-spinner-delay.ts @@ -3,14 +3,15 @@ * SPDX-License-Identifier: MIT */ import { CommonModule } from '@angular/common'; -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiCardComponent } from '@siemens/element-ng/card'; import { SiLoadingService, SiLoadingSpinnerDirective } from '@siemens/element-ng/loading-spinner'; @Component({ selector: 'app-sample', imports: [CommonModule, SiCardComponent, SiLoadingSpinnerDirective], - templateUrl: './si-loading-spinner-delay.html' + templateUrl: './si-loading-spinner-delay.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { protected loadingService = inject(SiLoadingService); diff --git a/src/app/examples/si-loading-spinner/si-loading-spinner-directive.ts b/src/app/examples/si-loading-spinner/si-loading-spinner-directive.ts index a8ba4f40a..9609f5768 100644 --- a/src/app/examples/si-loading-spinner/si-loading-spinner-directive.ts +++ b/src/app/examples/si-loading-spinner/si-loading-spinner-directive.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiCardComponent } from '@siemens/element-ng/card'; import { SiLoadingSpinnerDirective } from '@siemens/element-ng/loading-spinner'; @Component({ selector: 'app-sample', imports: [SiCardComponent, SiLoadingSpinnerDirective], - templateUrl: './si-loading-spinner-directive.html' + templateUrl: './si-loading-spinner-directive.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { loading = false; diff --git a/src/app/examples/si-loading-spinner/si-loading-spinner.ts b/src/app/examples/si-loading-spinner/si-loading-spinner.ts index 990c62c1a..077b77d87 100644 --- a/src/app/examples/si-loading-spinner/si-loading-spinner.ts +++ b/src/app/examples/si-loading-spinner/si-loading-spinner.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiLoadingSpinnerComponent } from '@siemens/element-ng/loading-spinner'; @Component({ selector: 'app-sample', imports: [SiLoadingSpinnerComponent], - templateUrl: './si-loading-spinner.html' + templateUrl: './si-loading-spinner.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { loading = true; diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts b/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts index eb5f05a09..110cb9160 100644 --- a/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts +++ b/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CommonModule } from '@angular/common'; -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { ContentActionBarMainItem, SiContentActionBarComponent @@ -31,7 +31,8 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s ], templateUrl: './si-main-detail-container-block.html', styleUrl: './si-main-detail-container-block.scss', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container-filtered-search.ts b/src/app/examples/si-main-detail-container/si-main-detail-container-filtered-search.ts index d276cbd63..79bd583b9 100644 --- a/src/app/examples/si-main-detail-container/si-main-detail-container-filtered-search.ts +++ b/src/app/examples/si-main-detail-container/si-main-detail-container-filtered-search.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { JsonPipe } from '@angular/common'; -import { Component, inject, viewChild } from '@angular/core'; +import { Component, inject, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { ContentActionBarMainItem, SiContentActionBarComponent @@ -37,6 +37,7 @@ import { CorporateEmployee } from '../datatable/data.service'; SiMainDetailContainerComponent ], templateUrl: './si-main-detail-container-filtered-search.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'si-layout-fixed-height' } diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container.ts b/src/app/examples/si-main-detail-container/si-main-detail-container.ts index 8dec96b01..28ba2b1ea 100644 --- a/src/app/examples/si-main-detail-container/si-main-detail-container.ts +++ b/src/app/examples/si-main-detail-container/si-main-detail-container.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CommonModule } from '@angular/common'; -import { Component, inject, viewChild } from '@angular/core'; +import { Component, inject, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { ContentActionBarMainItem, SiContentActionBarComponent @@ -32,6 +32,7 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s templateUrl: './si-main-detail-container.html', styleUrl: './si-main-detail-container.scss', providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'si-layout-fixed-height' } diff --git a/src/app/examples/si-map/si-map-custom-cluster-popover.ts b/src/app/examples/si-map/si-map-custom-cluster-popover.ts index dc9cfc3fc..e421f3a56 100644 --- a/src/app/examples/si-map/si-map-custom-cluster-popover.ts +++ b/src/app/examples/si-map/si-map-custom-cluster-popover.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, input, viewChild } from '@angular/core'; +import { Component, inject, input, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { addIcons, SiIconComponent } from '@siemens/element-ng/icon'; import { LOG_EVENT } from '@siemens/live-preview'; import { MapPoint, MapPointMetaData, SiMapComponent } from '@siemens/maps-ng'; @@ -32,7 +32,8 @@ import { environment } from 'src/environments/environment'; } - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class CustomClusterPopoverComponent { readonly logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-map/si-map-custom-popover-onhover.ts b/src/app/examples/si-map/si-map-custom-popover-onhover.ts index aae251252..bdd37246d 100644 --- a/src/app/examples/si-map/si-map-custom-popover-onhover.ts +++ b/src/app/examples/si-map/si-map-custom-popover-onhover.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, input, viewChild } from '@angular/core'; +import { Component, input, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { MapPoint, MapPointMetaData, SiMapComponent } from '@siemens/maps-ng'; import { mockPoints, singlePoint } from 'src/app/mocks/points.mock'; import { environment } from 'src/environments/environment'; @@ -20,7 +20,8 @@ import { environment } from 'src/environments/environment'; {{ $any(mapPoint()).extraProps?.value ?? 'N/A' }} - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class CustomPopoverComponent { readonly mapPoint = input.required(); diff --git a/src/app/examples/si-map/si-map-custom-popover.ts b/src/app/examples/si-map/si-map-custom-popover.ts index be84d117f..f55c6583e 100644 --- a/src/app/examples/si-map/si-map-custom-popover.ts +++ b/src/app/examples/si-map/si-map-custom-popover.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, input, viewChild } from '@angular/core'; +import { Component, input, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { MapPoint, MapPointMetaData, SiMapComponent } from '@siemens/maps-ng'; import { mockPoints, singlePoint } from 'src/app/mocks/points.mock'; import { environment } from 'src/environments/environment'; @@ -20,7 +20,8 @@ import { environment } from 'src/environments/environment'; {{ $any(mapPoint()).extraProps?.value ?? 'N/A' }} - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class CustomPopoverComponent { readonly mapPoint = input.required(); diff --git a/src/app/examples/si-map/si-map-custom-style.ts b/src/app/examples/si-map/si-map-custom-style.ts index 220f33a45..55e12a4b1 100644 --- a/src/app/examples/si-map/si-map-custom-style.ts +++ b/src/app/examples/si-map/si-map-custom-style.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, viewChild } from '@angular/core'; +import { Component, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { MapPoint, SiMapComponent } from '@siemens/maps-ng'; import { mockPoints } from 'src/app/mocks/points.mock'; import { environment } from 'src/environments/environment'; @@ -11,6 +11,7 @@ import { environment } from 'src/environments/environment'; selector: 'app-sample', imports: [SiMapComponent], templateUrl: './si-map-custom-style.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'h-100 d-flex flex-column p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-map/si-map-custom-zoom-levels.ts b/src/app/examples/si-map/si-map-custom-zoom-levels.ts index 836f77754..9a3637197 100644 --- a/src/app/examples/si-map/si-map-custom-zoom-levels.ts +++ b/src/app/examples/si-map/si-map-custom-zoom-levels.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, viewChild } from '@angular/core'; +import { Component, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { MapPoint, OverlayNativeProperties, SiMapComponent } from '@siemens/maps-ng'; import { FullScreen } from 'ol/control'; import { mockPoints } from 'src/app/mocks/points.mock'; @@ -12,6 +12,7 @@ import { environment } from 'src/environments/environment'; selector: 'app-sample', imports: [SiMapComponent], templateUrl: './si-map-custom-zoom-levels.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'h-100 d-flex flex-column p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-map/si-map-default-style.ts b/src/app/examples/si-map/si-map-default-style.ts index cc1764124..43ef51ec3 100644 --- a/src/app/examples/si-map/si-map-default-style.ts +++ b/src/app/examples/si-map/si-map-default-style.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, viewChild } from '@angular/core'; +import { Component, inject, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { LOG_EVENT } from '@siemens/live-preview'; import { MapPoint, SiMapComponent } from '@siemens/maps-ng'; import { mockPoints } from 'src/app/mocks/points.mock'; @@ -12,6 +12,7 @@ import { environment } from 'src/environments/environment'; selector: 'app-sample', imports: [SiMapComponent], templateUrl: './si-map-default-style.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'h-100 d-flex flex-column p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-map/si-map-geo-json.ts b/src/app/examples/si-map/si-map-geo-json.ts index e51691c54..e57802df3 100644 --- a/src/app/examples/si-map/si-map-geo-json.ts +++ b/src/app/examples/si-map/si-map-geo-json.ts @@ -2,7 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { AfterViewInit, Component, input, OnInit, viewChild } from '@angular/core'; +import { + AfterViewInit, + Component, + input, + OnInit, + viewChild, + ChangeDetectionStrategy +} from '@angular/core'; import { MapPoint, MapPointMetaData, SiMapComponent } from '@siemens/maps-ng'; import { FeatureLike } from 'ol/Feature'; import { fromLonLat } from 'ol/proj'; @@ -30,7 +37,8 @@ interface MapPointCustom extends MapPointMetaData { {{ mapPoint().shapeType }} - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class CustomPopoverComponent { readonly mapPoint = input.required(); diff --git a/src/app/examples/si-map/si-map-grouping.ts b/src/app/examples/si-map/si-map-grouping.ts index 89f57fbb8..5b50562af 100644 --- a/src/app/examples/si-map/si-map-grouping.ts +++ b/src/app/examples/si-map/si-map-grouping.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, viewChild } from '@angular/core'; +import { Component, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ColorPalette, MapPoint, SiMapComponent } from '@siemens/maps-ng'; import { mockGroupedPoints } from 'src/app/mocks/points.mock'; @@ -12,6 +12,7 @@ import { environment } from 'src/environments/environment'; selector: 'app-sample', imports: [FormsModule, SiMapComponent], templateUrl: './si-map-grouping.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'h-100 d-flex flex-column p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-map/si-map-labels.ts b/src/app/examples/si-map/si-map-labels.ts index 0cdec14d6..0f45f523a 100644 --- a/src/app/examples/si-map/si-map-labels.ts +++ b/src/app/examples/si-map/si-map-labels.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, viewChild } from '@angular/core'; +import { Component, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ColorPalette, MapPoint, SiMapComponent } from '@siemens/maps-ng'; import { mockGroupedPoints } from 'src/app/mocks/points.mock'; @@ -12,6 +12,7 @@ import { environment } from 'src/environments/environment'; selector: 'app-sample', imports: [FormsModule, SiMapComponent], templateUrl: './si-map-labels.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'h-100 d-flex flex-column p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts b/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts index 919267ac0..7a52bb2ea 100644 --- a/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts +++ b/src/app/examples/si-markdown-renderer/si-markdown-renderer.ts @@ -3,13 +3,14 @@ * SPDX-License-Identifier: MIT */ import { HttpClient } from '@angular/common/http'; -import { Component, inject, OnInit, signal } from '@angular/core'; +import { Component, inject, OnInit, signal, ChangeDetectionStrategy } from '@angular/core'; import { SiMarkdownRendererComponent } from '@siemens/element-ng/markdown-renderer'; @Component({ selector: 'app-sample', imports: [SiMarkdownRendererComponent], - templateUrl: './si-markdown-renderer.html' + templateUrl: './si-markdown-renderer.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit { private readonly http = inject(HttpClient); diff --git a/src/app/examples/si-menu/si-menu-bar.ts b/src/app/examples/si-menu/si-menu-bar.ts index 00d106093..14f6bce43 100644 --- a/src/app/examples/si-menu/si-menu-bar.ts +++ b/src/app/examples/si-menu/si-menu-bar.ts @@ -3,13 +3,14 @@ * SPDX-License-Identifier: MIT */ import { CdkMenuTrigger } from '@angular/cdk/menu'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiMenuModule } from '@siemens/element-ng/menu'; @Component({ selector: 'app-sample', imports: [SiMenuModule, CdkMenuTrigger], - templateUrl: './si-menu-bar.html' + templateUrl: './si-menu-bar.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { isAwesome = true; diff --git a/src/app/examples/si-menu/si-menu-factory-legacy.ts b/src/app/examples/si-menu/si-menu-factory-legacy.ts index 7b3c00445..b34313afa 100644 --- a/src/app/examples/si-menu/si-menu-factory-legacy.ts +++ b/src/app/examples/si-menu/si-menu-factory-legacy.ts @@ -3,14 +3,15 @@ * SPDX-License-Identifier: MIT */ import { CdkContextMenuTrigger, CdkMenuTrigger } from '@angular/cdk/menu'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { MenuItem } from '@siemens/element-ng/common'; import { SiMenuModule } from '@siemens/element-ng/menu'; @Component({ selector: 'app-sample', imports: [SiMenuModule, CdkContextMenuTrigger, CdkMenuTrigger], - templateUrl: './si-menu-factory-legacy.html' + templateUrl: './si-menu-factory-legacy.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { // eslint-disable-next-line @typescript-eslint/no-deprecated diff --git a/src/app/examples/si-menu/si-menu-factory.ts b/src/app/examples/si-menu/si-menu-factory.ts index 1bdf247a2..d028f1ed8 100644 --- a/src/app/examples/si-menu/si-menu-factory.ts +++ b/src/app/examples/si-menu/si-menu-factory.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CdkContextMenuTrigger, CdkMenuTrigger } from '@angular/cdk/menu'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { MenuItemCheckbox, MenuItem, @@ -14,7 +14,8 @@ import { @Component({ selector: 'app-sample', imports: [CdkContextMenuTrigger, CdkMenuTrigger, SiMenuFactoryComponent], - templateUrl: './si-menu-factory.html' + templateUrl: './si-menu-factory.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { items: MenuItem[] = [ diff --git a/src/app/examples/si-menu/si-menu.ts b/src/app/examples/si-menu/si-menu.ts index 88b70750f..a06319f38 100644 --- a/src/app/examples/si-menu/si-menu.ts +++ b/src/app/examples/si-menu/si-menu.ts @@ -3,13 +3,14 @@ * SPDX-License-Identifier: MIT */ import { CdkContextMenuTrigger, CdkMenuTrigger } from '@angular/cdk/menu'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiMenuModule } from '@siemens/element-ng/menu'; @Component({ selector: 'app-sample', imports: [SiMenuModule, CdkContextMenuTrigger, CdkMenuTrigger], - templateUrl: './si-menu.html' + templateUrl: './si-menu.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { isAwesome = true; diff --git a/src/app/examples/si-modals/app-table.component.ts b/src/app/examples/si-modals/app-table.component.ts index fe60e6a4c..fca66f5eb 100644 --- a/src/app/examples/si-modals/app-table.component.ts +++ b/src/app/examples/si-modals/app-table.component.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable'; import { ModalRef } from '@siemens/element-ng/modal'; import { SiResizeObserverModule } from '@siemens/element-ng/resize-observer'; @@ -15,7 +15,8 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s selector: 'app-table', imports: [NgxDatatableModule, SiDatatableModule, SiResizeObserverModule], templateUrl: './app-table.component.html', - providers: [DataService] + providers: [DataService], + changeDetection: ChangeDetectionStrategy.OnPush }) export class AppTableComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-modals/si-modal-service.ts b/src/app/examples/si-modals/si-modal-service.ts index 212a24e1f..ee0f16a78 100644 --- a/src/app/examples/si-modals/si-modal-service.ts +++ b/src/app/examples/si-modals/si-modal-service.ts @@ -2,7 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject, Injector, OnDestroy, TemplateRef } from '@angular/core'; +import { + Component, + inject, + Injector, + OnDestroy, + TemplateRef, + ChangeDetectionStrategy +} from '@angular/core'; import { SiStatusIconComponent } from '@siemens/element-ng/icon'; import { ModalRef, SiModalService } from '@siemens/element-ng/modal'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -13,6 +20,7 @@ import { AppTableComponent } from './app-table.component'; selector: 'app-sample', imports: [SiStatusIconComponent], templateUrl: './si-modal-service.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent implements OnDestroy { diff --git a/src/app/examples/si-notification-item/si-notification-item-popover.ts b/src/app/examples/si-notification-item/si-notification-item-popover.ts index 589c88ae5..61f1457ae 100644 --- a/src/app/examples/si-notification-item/si-notification-item-popover.ts +++ b/src/app/examples/si-notification-item/si-notification-item-popover.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { RouterLink } from '@angular/router'; import { SiApplicationHeaderComponent, @@ -55,6 +55,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; max-height: 70vh; } `, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-notification-item/si-notification-item-side-panel.ts b/src/app/examples/si-notification-item/si-notification-item-side-panel.ts index 42ebd57ef..c6b980178 100644 --- a/src/app/examples/si-notification-item/si-notification-item-side-panel.ts +++ b/src/app/examples/si-notification-item/si-notification-item-side-panel.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterLink } from '@angular/router'; import { @@ -65,6 +65,7 @@ interface Notification { SiSummaryChipComponent ], templateUrl: './si-notification-item-side-panel.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-notification-item/si-notification-item.ts b/src/app/examples/si-notification-item/si-notification-item.ts index 5c19ef4cc..e45fcf6d9 100644 --- a/src/app/examples/si-notification-item/si-notification-item.ts +++ b/src/app/examples/si-notification-item/si-notification-item.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiAvatarComponent } from '@siemens/element-ng/avatar'; import { SiCircleStatusComponent } from '@siemens/element-ng/circle-status'; @@ -29,6 +29,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; SiStatusIconComponent ], templateUrl: './si-notification-item.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-number-input/si-number-input.ts b/src/app/examples/si-number-input/si-number-input.ts index 7d5214546..c83cd61cf 100644 --- a/src/app/examples/si-number-input/si-number-input.ts +++ b/src/app/examples/si-number-input/si-number-input.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { JsonPipe } from '@angular/common'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiFormItemComponent } from '@siemens/element-ng/form'; import { SiNumberInputComponent } from '@siemens/element-ng/number-input'; @@ -12,6 +12,7 @@ import { SiNumberInputComponent } from '@siemens/element-ng/number-input'; selector: 'app-sample', imports: [FormsModule, SiFormItemComponent, SiNumberInputComponent, JsonPipe], templateUrl: './si-number-input.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-page-header/si-page-header.ts b/src/app/examples/si-page-header/si-page-header.ts index b38e67984..b51f83d98 100644 --- a/src/app/examples/si-page-header/si-page-header.ts +++ b/src/app/examples/si-page-header/si-page-header.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterLink } from '@angular/router'; import { @@ -41,7 +41,8 @@ import { SiStatusBarComponent, StatusBarItem } from '@siemens/element-ng/status- SiStatusBarComponent, SiHeaderLogoDirective ], - templateUrl: './si-page-header.html' + templateUrl: './si-page-header.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { readonly breadcrumbItems: BreadcrumbItem[] = [ diff --git a/src/app/examples/si-pagination/si-pagination.ts b/src/app/examples/si-pagination/si-pagination.ts index 9bb172303..06dead5ea 100644 --- a/src/app/examples/si-pagination/si-pagination.ts +++ b/src/app/examples/si-pagination/si-pagination.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiPaginationComponent } from '@siemens/element-ng/pagination'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -10,6 +10,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiPaginationComponent], templateUrl: './si-pagination.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-popover-legacy/si-popover-legacy.ts b/src/app/examples/si-popover-legacy/si-popover-legacy.ts index 4cce0787e..0b5b79c6d 100644 --- a/src/app/examples/si-popover-legacy/si-popover-legacy.ts +++ b/src/app/examples/si-popover-legacy/si-popover-legacy.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ /* eslint-disable @typescript-eslint/no-deprecated */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiIconComponent } from '@siemens/element-ng/icon'; import { SiPopoverLegacyDirective } from '@siemens/element-ng/popover-legacy'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -11,7 +11,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiPopoverLegacyDirective, SiIconComponent], - templateUrl: './si-popover-legacy.html' + templateUrl: './si-popover-legacy.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-popover/si-popover.ts b/src/app/examples/si-popover/si-popover.ts index 75bb37268..8f09d287f 100644 --- a/src/app/examples/si-popover/si-popover.ts +++ b/src/app/examples/si-popover/si-popover.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiIconComponent } from '@siemens/element-ng/icon'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -15,7 +15,8 @@ import { @Component({ selector: 'app-sample', imports: [SiIconComponent, SiPopoverDirective, SiPopoverTitleDirective, SiPopoverBodyDirective], - templateUrl: './si-popover.html' + templateUrl: './si-popover.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-progressbar/si-progressbar-dynamic.ts b/src/app/examples/si-progressbar/si-progressbar-dynamic.ts index 1bc9cf84a..e287fc116 100644 --- a/src/app/examples/si-progressbar/si-progressbar-dynamic.ts +++ b/src/app/examples/si-progressbar/si-progressbar-dynamic.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiProgressbarComponent } from '@siemens/element-ng/progressbar'; @Component({ selector: 'app-sample', imports: [SiProgressbarComponent], templateUrl: './si-progressbar-dynamic.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-shadow-root/si-shadow-root.ts b/src/app/examples/si-shadow-root/si-shadow-root.ts index 76a503a76..c4d96532f 100644 --- a/src/app/examples/si-shadow-root/si-shadow-root.ts +++ b/src/app/examples/si-shadow-root/si-shadow-root.ts @@ -4,7 +4,7 @@ */ import { CdkTrapFocus } from '@angular/cdk/a11y'; import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay'; -import { Component, inject, ViewEncapsulation } from '@angular/core'; +import { Component, inject, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; import { SiShadowRootDirective } from '@siemens/element-ng/shadow-root'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -14,6 +14,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; standalone: true, templateUrl: './si-shadow-root.html', styleUrl: 'not-element-styles.scss', + changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: { class: 'p-5' }, hostDirectives: [SiShadowRootDirective] diff --git a/src/app/examples/si-skeleton/si-skeleton.ts b/src/app/examples/si-skeleton/si-skeleton.ts index ebc80c425..d7ebee212 100644 --- a/src/app/examples/si-skeleton/si-skeleton.ts +++ b/src/app/examples/si-skeleton/si-skeleton.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './si-skeleton.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-slider/si-slider-icon.ts b/src/app/examples/si-slider/si-slider-icon.ts index d26a76dcf..432ebbde6 100644 --- a/src/app/examples/si-slider/si-slider-icon.ts +++ b/src/app/examples/si-slider/si-slider-icon.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiSliderComponent } from '@siemens/element-ng/slider'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -11,6 +11,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiSliderComponent, FormsModule], templateUrl: './si-slider-icon.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-slider/si-slider.ts b/src/app/examples/si-slider/si-slider.ts index 1a26ee6bc..182854819 100644 --- a/src/app/examples/si-slider/si-slider.ts +++ b/src/app/examples/si-slider/si-slider.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiSliderComponent } from '@siemens/element-ng/slider'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -11,6 +11,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiSliderComponent, FormsModule], templateUrl: './si-slider.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-status-counter/si-status-counter.ts b/src/app/examples/si-status-counter/si-status-counter.ts index cd53a8d59..0c402870b 100644 --- a/src/app/examples/si-status-counter/si-status-counter.ts +++ b/src/app/examples/si-status-counter/si-status-counter.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiStatusCounterComponent } from '@siemens/element-ng/status-counter'; @Component({ selector: 'app-sample', imports: [SiStatusCounterComponent], templateUrl: './si-status-counter.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-status-toggle/si-status-toggle.ts b/src/app/examples/si-status-toggle/si-status-toggle.ts index 37ef4ef08..5cfb4079b 100644 --- a/src/app/examples/si-status-toggle/si-status-toggle.ts +++ b/src/app/examples/si-status-toggle/si-status-toggle.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, DestroyRef, inject, OnInit } from '@angular/core'; +import { Component, DestroyRef, inject, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import { SiStatusToggleComponent, StatusToggleItem } from '@siemens/element-ng/status-toggle'; @@ -11,7 +11,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [ReactiveFormsModule, SiStatusToggleComponent], - templateUrl: './si-status-toggle.html' + templateUrl: './si-status-toggle.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-summary-chip/si-summary-chip.ts b/src/app/examples/si-summary-chip/si-summary-chip.ts index 7f29380cd..69fdf3442 100644 --- a/src/app/examples/si-summary-chip/si-summary-chip.ts +++ b/src/app/examples/si-summary-chip/si-summary-chip.ts @@ -3,12 +3,13 @@ * SPDX-License-Identifier: MIT */ import { NgTemplateOutlet } from '@angular/common'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiSummaryChipComponent } from '@siemens/element-ng/summary-chip'; @Component({ selector: 'app-sample', imports: [NgTemplateOutlet, SiSummaryChipComponent], - templateUrl: './si-summary-chip.html' + templateUrl: './si-summary-chip.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/si-summary-widget/si-summary-widget.ts b/src/app/examples/si-summary-widget/si-summary-widget.ts index ec87233fc..405788083 100644 --- a/src/app/examples/si-summary-widget/si-summary-widget.ts +++ b/src/app/examples/si-summary-widget/si-summary-widget.ts @@ -3,12 +3,13 @@ * SPDX-License-Identifier: MIT */ import { NgTemplateOutlet } from '@angular/common'; -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiSummaryWidgetComponent } from '@siemens/element-ng/summary-widget'; @Component({ selector: 'app-sample', imports: [NgTemplateOutlet, SiSummaryWidgetComponent], - templateUrl: './si-summary-widget.html' + templateUrl: './si-summary-widget.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/si-switch/si-switch.ts b/src/app/examples/si-switch/si-switch.ts index 46d9a5b17..122cd278f 100644 --- a/src/app/examples/si-switch/si-switch.ts +++ b/src/app/examples/si-switch/si-switch.ts @@ -2,10 +2,11 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', - templateUrl: './si-switch.html' + templateUrl: './si-switch.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/si-system-banner/si-system-banner.ts b/src/app/examples/si-system-banner/si-system-banner.ts index ea942b7ea..c4505c75d 100644 --- a/src/app/examples/si-system-banner/si-system-banner.ts +++ b/src/app/examples/si-system-banner/si-system-banner.ts @@ -2,12 +2,13 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiSystemBannerComponent } from '@siemens/element-ng/system-banner'; @Component({ selector: 'app-sample', imports: [SiSystemBannerComponent], - templateUrl: './si-system-banner.html' + templateUrl: './si-system-banner.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/si-tabs/si-tabs-arrow.ts b/src/app/examples/si-tabs/si-tabs-arrow.ts index f92b3eb9f..8e4b67252 100644 --- a/src/app/examples/si-tabs/si-tabs-arrow.ts +++ b/src/app/examples/si-tabs/si-tabs-arrow.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiTabComponent, SiTabsetComponent } from '@siemens/element-ng/tabs'; @Component({ selector: 'app-sample', imports: [SiTabsetComponent, SiTabComponent], templateUrl: './si-tabs-arrow.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-tabs/si-tabs-flex.ts b/src/app/examples/si-tabs/si-tabs-flex.ts index 303a5bbbc..a0b395e22 100644 --- a/src/app/examples/si-tabs/si-tabs-flex.ts +++ b/src/app/examples/si-tabs/si-tabs-flex.ts @@ -2,13 +2,14 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiTabComponent, SiTabsetComponent } from '@siemens/element-ng/tabs'; @Component({ selector: 'app-sample', imports: [SiTabsetComponent, SiTabComponent], templateUrl: './si-tabs-flex.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/si-tabs/si-tabs-icons.ts b/src/app/examples/si-tabs/si-tabs-icons.ts index e4dd7abe9..98c4d949a 100644 --- a/src/app/examples/si-tabs/si-tabs-icons.ts +++ b/src/app/examples/si-tabs/si-tabs-icons.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiTabComponent, SiTabsetComponent } from '@siemens/element-ng/tabs'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -20,6 +20,7 @@ interface TabModel { selector: 'app-sample', imports: [SiTabsetComponent, SiTabComponent], templateUrl: './si-tabs-icons.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-tabs/si-tabs-legacy.ts b/src/app/examples/si-tabs/si-tabs-legacy.ts index c943c7daf..ecc9d988c 100644 --- a/src/app/examples/si-tabs/si-tabs-legacy.ts +++ b/src/app/examples/si-tabs/si-tabs-legacy.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ /* eslint-disable @typescript-eslint/no-deprecated */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiTabDeselectionEvent, @@ -26,6 +26,7 @@ interface TabModel { selector: 'app-sample', imports: [SiTabLegacyComponent, SiTabsetLegacyComponent, FormsModule], templateUrl: './si-tabs-legacy.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-tabs/si-tabs-routing.ts b/src/app/examples/si-tabs/si-tabs-routing.ts index 48e2c66fa..f331a8e61 100644 --- a/src/app/examples/si-tabs/si-tabs-routing.ts +++ b/src/app/examples/si-tabs/si-tabs-routing.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { AfterViewInit, Component, inject } from '@angular/core'; +import { AfterViewInit, Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router'; import { Link, SiLinkDirective } from '@siemens/element-ng/link'; import { SiTabsetComponent, SiTabLinkComponent } from '@siemens/element-ng/tabs'; @@ -11,7 +11,8 @@ import { provideExampleRoutes } from '@siemens/live-preview'; // Dummy components to be used in the router outlet for the example @Component({ selector: 'app-home', - template: `
This is the home page
` + template: `
This is the home page
`, + changeDetection: ChangeDetectionStrategy.OnPush }) export class HomeComponent {} diff --git a/src/app/examples/si-tabs/si-tabs.ts b/src/app/examples/si-tabs/si-tabs.ts index 6eae78326..a2cb484c2 100644 --- a/src/app/examples/si-tabs/si-tabs.ts +++ b/src/app/examples/si-tabs/si-tabs.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiTabComponent, SiTabsetComponent } from '@siemens/element-ng/tabs'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -22,6 +22,7 @@ interface TabModel { selector: 'app-sample', imports: [FormsModule, SiTabsetComponent, SiTabComponent], templateUrl: './si-tabs.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-theme/theme-switcher.ts b/src/app/examples/si-theme/theme-switcher.ts index b251e1297..b980447c8 100644 --- a/src/app/examples/si-theme/theme-switcher.ts +++ b/src/app/examples/si-theme/theme-switcher.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiThemeService, ThemeType } from '@siemens/element-ng/theme'; @Component({ selector: 'app-sample', imports: [FormsModule], - templateUrl: './theme-switcher.html' + templateUrl: './theme-switcher.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { theme: ThemeType = 'light'; diff --git a/src/app/examples/si-tooltip/si-tooltip.ts b/src/app/examples/si-tooltip/si-tooltip.ts index e650b2627..fad632d63 100644 --- a/src/app/examples/si-tooltip/si-tooltip.ts +++ b/src/app/examples/si-tooltip/si-tooltip.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { SiIconComponent } from '@siemens/element-ng/icon'; import { SiTooltipDirective } from '@siemens/element-ng/tooltip'; @Component({ selector: 'app-sample', imports: [SiIconComponent, SiTooltipDirective], - templateUrl: './si-tooltip.html' + templateUrl: './si-tooltip.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { html = `I am a bold text tooltip.`; diff --git a/src/app/examples/si-tour/si-tour.ts b/src/app/examples/si-tour/si-tour.ts index 7cab057d4..a0fc2d70a 100644 --- a/src/app/examples/si-tour/si-tour.ts +++ b/src/app/examples/si-tour/si-tour.ts @@ -2,7 +2,13 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { AfterViewInit, Component, inject, OnDestroy } from '@angular/core'; +import { + AfterViewInit, + Component, + inject, + OnDestroy, + ChangeDetectionStrategy +} from '@angular/core'; import { RouterLink } from '@angular/router'; import { SiAccordionComponent, SiCollapsiblePanelComponent } from '@siemens/element-ng/accordion'; import { @@ -50,7 +56,8 @@ import { SiTourService, TourStep } from '@siemens/element-ng/tour'; SiLaunchpadFactoryComponent, SiHeaderLogoDirective ], - templateUrl: './si-tour.html' + templateUrl: './si-tour.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements AfterViewInit, OnDestroy { breadcrumbItems: BreadcrumbItem[] = [ diff --git a/src/app/examples/si-unauthorized-page/si-unauthorized-page-choice.ts b/src/app/examples/si-unauthorized-page/si-unauthorized-page-choice.ts index 7d260c9bd..0d436bae9 100644 --- a/src/app/examples/si-unauthorized-page/si-unauthorized-page-choice.ts +++ b/src/app/examples/si-unauthorized-page/si-unauthorized-page-choice.ts @@ -2,14 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { SiUnauthorizedPageModule } from '@siemens/element-ng/unauthorized-page'; import { LOG_EVENT } from '@siemens/live-preview'; @Component({ selector: 'app-sample', imports: [SiUnauthorizedPageModule], - templateUrl: './si-unauthorized-page-choice.html' + templateUrl: './si-unauthorized-page-choice.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent { logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-wizard/si-wizard-cancel-button.ts b/src/app/examples/si-wizard/si-wizard-cancel-button.ts index 8f311501c..2a4058fb2 100644 --- a/src/app/examples/si-wizard/si-wizard-cancel-button.ts +++ b/src/app/examples/si-wizard/si-wizard-cancel-button.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiWizardComponent, SiWizardStepComponent } from '@siemens/element-ng/wizard'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -11,6 +11,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiWizardComponent, SiWizardStepComponent, FormsModule], templateUrl: './si-wizard-cancel-button.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-wizard/si-wizard-dynamical.ts b/src/app/examples/si-wizard/si-wizard-dynamical.ts index 4c4c62e40..d73547549 100644 --- a/src/app/examples/si-wizard/si-wizard-dynamical.ts +++ b/src/app/examples/si-wizard/si-wizard-dynamical.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { AsyncPipe } from '@angular/common'; -import { Component, inject, OnInit } from '@angular/core'; +import { Component, inject, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state'; import { SiWizardComponent, SiWizardStepComponent } from '@siemens/element-ng/wizard'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -19,6 +19,7 @@ interface StepInfo { selector: 'app-sample', imports: [AsyncPipe, SiWizardComponent, SiWizardStepComponent, SiEmptyStateComponent], templateUrl: './si-wizard-dynamical.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent implements OnInit { diff --git a/src/app/examples/si-wizard/si-wizard-failed.ts b/src/app/examples/si-wizard/si-wizard-failed.ts index 5925b0fab..29dbf67f3 100644 --- a/src/app/examples/si-wizard/si-wizard-failed.ts +++ b/src/app/examples/si-wizard/si-wizard-failed.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiWizardComponent, SiWizardStepComponent } from '@siemens/element-ng/wizard'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -11,6 +11,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiWizardComponent, SiWizardStepComponent, FormsModule], templateUrl: './si-wizard-failed.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-wizard/si-wizard-forms.ts b/src/app/examples/si-wizard/si-wizard-forms.ts index 3a8f8ec9d..dad3d6d77 100644 --- a/src/app/examples/si-wizard/si-wizard-forms.ts +++ b/src/app/examples/si-wizard/si-wizard-forms.ts @@ -2,7 +2,15 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, DestroyRef, inject, OnInit, TemplateRef, viewChild } from '@angular/core'; +import { + Component, + DestroyRef, + inject, + OnInit, + TemplateRef, + viewChild, + ChangeDetectionStrategy +} from '@angular/core'; import { FormBuilder, ReactiveFormsModule } from '@angular/forms'; import { SiFormFieldsetComponent, SiFormItemComponent } from '@siemens/element-ng/form'; import { ModalRef, SiModalService } from '@siemens/element-ng/modal'; @@ -30,6 +38,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; SiSelectMultiValueDirective ], templateUrl: './si-wizard-forms.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent implements OnInit { diff --git a/src/app/examples/si-wizard/si-wizard-input-validation.ts b/src/app/examples/si-wizard/si-wizard-input-validation.ts index 79762caea..319533099 100644 --- a/src/app/examples/si-wizard/si-wizard-input-validation.ts +++ b/src/app/examples/si-wizard/si-wizard-input-validation.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiInlineNotificationComponent } from '@siemens/element-ng/inline-notification'; import { SiWizardComponent, SiWizardStepComponent } from '@siemens/element-ng/wizard'; @@ -12,6 +12,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiWizardComponent, SiWizardStepComponent, SiInlineNotificationComponent, FormsModule], templateUrl: './si-wizard-input-validation.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-wizard/si-wizard-numbered-steps.ts b/src/app/examples/si-wizard/si-wizard-numbered-steps.ts index b754519ac..c987158ef 100644 --- a/src/app/examples/si-wizard/si-wizard-numbered-steps.ts +++ b/src/app/examples/si-wizard/si-wizard-numbered-steps.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiWizardComponent, SiWizardStepComponent } from '@siemens/element-ng/wizard'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -11,6 +11,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiWizardComponent, SiWizardStepComponent, FormsModule], templateUrl: './si-wizard-numbered-steps.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-wizard/si-wizard-playground.ts b/src/app/examples/si-wizard/si-wizard-playground.ts index 7b7ddea19..110853431 100644 --- a/src/app/examples/si-wizard/si-wizard-playground.ts +++ b/src/app/examples/si-wizard/si-wizard-playground.ts @@ -3,7 +3,14 @@ * SPDX-License-Identifier: MIT */ import { NgClass } from '@angular/common'; -import { Component, inject, OnInit, signal, viewChild } from '@angular/core'; +import { + Component, + inject, + OnInit, + signal, + viewChild, + ChangeDetectionStrategy +} from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { SiFormItemComponent } from '@siemens/element-ng/form'; import { SiNumberInputComponent } from '@siemens/element-ng/number-input'; @@ -20,7 +27,8 @@ import { LOG_EVENT } from '@siemens/live-preview'; SiWizardStepComponent, NgClass ], - templateUrl: './si-wizard-playground.html' + templateUrl: './si-wizard-playground.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent implements OnInit { protected readonly logEvent = inject(LOG_EVENT); diff --git a/src/app/examples/si-wizard/si-wizard-show-completion-page.ts b/src/app/examples/si-wizard/si-wizard-show-completion-page.ts index 84e7961f9..56ec8d7d9 100644 --- a/src/app/examples/si-wizard/si-wizard-show-completion-page.ts +++ b/src/app/examples/si-wizard/si-wizard-show-completion-page.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { Router } from '@angular/router'; import { SiWizardComponent, SiWizardStepComponent } from '@siemens/element-ng/wizard'; @@ -12,6 +12,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiWizardComponent, SiWizardStepComponent, FormsModule], templateUrl: './si-wizard-show-completion-page.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-wizard/si-wizard-vertical.ts b/src/app/examples/si-wizard/si-wizard-vertical.ts index de274704c..39051427a 100644 --- a/src/app/examples/si-wizard/si-wizard-vertical.ts +++ b/src/app/examples/si-wizard/si-wizard-vertical.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiWizardComponent, SiWizardStepComponent } from '@siemens/element-ng/wizard'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -11,6 +11,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiWizardComponent, SiWizardStepComponent, FormsModule], templateUrl: './si-wizard-vertical.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/si-wizard/si-wizard.ts b/src/app/examples/si-wizard/si-wizard.ts index 1d93be7a3..3be016ec2 100644 --- a/src/app/examples/si-wizard/si-wizard.ts +++ b/src/app/examples/si-wizard/si-wizard.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component, inject } from '@angular/core'; +import { Component, inject, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SiWizardComponent, SiWizardStepComponent } from '@siemens/element-ng/wizard'; import { LOG_EVENT } from '@siemens/live-preview'; @@ -11,6 +11,7 @@ import { LOG_EVENT } from '@siemens/live-preview'; selector: 'app-sample', imports: [SiWizardComponent, SiWizardStepComponent, FormsModule], templateUrl: './si-wizard.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent { diff --git a/src/app/examples/spacing/spacing.ts b/src/app/examples/spacing/spacing.ts index 99583ee78..f5f5d0bbd 100644 --- a/src/app/examples/spacing/spacing.ts +++ b/src/app/examples/spacing/spacing.ts @@ -2,10 +2,11 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', - templateUrl: './spacing.html' + templateUrl: './spacing.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SampleComponent {} diff --git a/src/app/examples/typography/bootstrap.ts b/src/app/examples/typography/bootstrap.ts index 31a4569eb..5dc42586c 100644 --- a/src/app/examples/typography/bootstrap.ts +++ b/src/app/examples/typography/bootstrap.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './bootstrap.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/typography/color-variants.ts b/src/app/examples/typography/color-variants.ts index b08af1c6f..29cd714d0 100644 --- a/src/app/examples/typography/color-variants.ts +++ b/src/app/examples/typography/color-variants.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './color-variants.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/typography/display-styles.ts b/src/app/examples/typography/display-styles.ts index 363a828cb..97b5461db 100644 --- a/src/app/examples/typography/display-styles.ts +++ b/src/app/examples/typography/display-styles.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', @@ -12,6 +12,7 @@ import { Component } from '@angular/core';

Display Bold

Display

`, + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/typography/type-styles.ts b/src/app/examples/typography/type-styles.ts index bc54c60e4..c0914c2c6 100644 --- a/src/app/examples/typography/type-styles.ts +++ b/src/app/examples/typography/type-styles.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './type-styles.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-5' } }) export class SampleComponent {} diff --git a/src/app/examples/typography/typography.ts b/src/app/examples/typography/typography.ts index 58adade9d..d5e53deeb 100644 --- a/src/app/examples/typography/typography.ts +++ b/src/app/examples/typography/typography.ts @@ -2,11 +2,12 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-sample', templateUrl: './typography.html', + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'px-9 pt-9 bg-base-1' } }) export class SampleComponent {}