From b196e9651e7108d7b178638835416aeb63a13395 Mon Sep 17 00:00:00 2001
From: "Bajohr, Rayk" <rayk.bajohr@siemens.com>
Date: Sun, 21 Jun 2026 14:59:45 +0200
Subject: [PATCH] refactor(datepicker): explicitly define change detection
 strategy

---
 .../datepicker/components/si-calendar-body.component.ts      | 2 ++
 .../datepicker/components/si-initial-focus.component.ts      | 4 +++-
 projects/element-ng/datepicker/si-date-range.component.ts    | 2 ++
 projects/element-ng/datepicker/si-datepicker.component.ts    | 4 +++-
 .../element-ng/datepicker/si-timepicker.component.spec.ts    | 5 +++--
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/projects/element-ng/datepicker/components/si-calendar-body.component.ts b/projects/element-ng/datepicker/components/si-calendar-body.component.ts
index 577cfec0f6..ddfbe8a4c5 100644
--- a/projects/element-ng/datepicker/components/si-calendar-body.component.ts
+++ b/projects/element-ng/datepicker/components/si-calendar-body.component.ts
@@ -5,6 +5,7 @@
 import { A11yModule } from '@angular/cdk/a11y';
 import {
   booleanAttribute,
+  ChangeDetectionStrategy,
   Component,
   computed,
   input,
@@ -141,6 +142,7 @@ class RangeSelectionStrategy extends SelectionStrategy {
   selector: '[si-calendar-body]',
   imports: [A11yModule, SiCalendarDateCellDirective],
   templateUrl: './si-calendar-body.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'si-calendar-body'
   },
diff --git a/projects/element-ng/datepicker/components/si-initial-focus.component.ts b/projects/element-ng/datepicker/components/si-initial-focus.component.ts
index 16408347ec..637766b2df 100644
--- a/projects/element-ng/datepicker/components/si-initial-focus.component.ts
+++ b/projects/element-ng/datepicker/components/si-initial-focus.component.ts
@@ -5,6 +5,7 @@
 import {
   AfterViewInit,
   booleanAttribute,
+  ChangeDetectionStrategy,
   Component,
   input,
   model,
@@ -19,7 +20,8 @@ import { Cell, SiCalendarBodyComponent } from './si-calendar-body.component';
  * Helper directive to set the initial focus to the calendar body cell.
  */
 @Component({
-  template: ''
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SiInitialFocusComponent implements AfterViewInit {
   /** The cell which has the mouse hover. */
diff --git a/projects/element-ng/datepicker/si-date-range.component.ts b/projects/element-ng/datepicker/si-date-range.component.ts
index 2c4d3c3704..1637dba45f 100644
--- a/projects/element-ng/datepicker/si-date-range.component.ts
+++ b/projects/element-ng/datepicker/si-date-range.component.ts
@@ -6,6 +6,7 @@ import { A11yModule } from '@angular/cdk/a11y';
 import {
   AfterViewInit,
   booleanAttribute,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ComponentRef,
@@ -76,6 +77,7 @@ import { DatepickerInputConfig, DateRange } from './si-datepicker.model';
       useExisting: SiDateRangeComponent
     }
   ],
+  changeDetection: ChangeDetectionStrategy.Default,
   host: {
     class: 'form-control d-flex align-items-center',
     role: 'group',
diff --git a/projects/element-ng/datepicker/si-datepicker.component.ts b/projects/element-ng/datepicker/si-datepicker.component.ts
index 181463fb18..1ba367aaa0 100644
--- a/projects/element-ng/datepicker/si-datepicker.component.ts
+++ b/projects/element-ng/datepicker/si-datepicker.component.ts
@@ -6,6 +6,7 @@ import { getLocaleFirstDayOfWeek, WeekDay } from '@angular/common';
 import {
   AfterViewInit,
   booleanAttribute,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   computed,
@@ -69,7 +70,8 @@ export type RangeType = 'START' | 'END' | undefined;
     SiTranslatePipe
   ],
   templateUrl: './si-datepicker.component.html',
-  styleUrl: './si-datepicker.component.scss'
+  styleUrl: './si-datepicker.component.scss',
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class SiDatepickerComponent implements OnInit, OnChanges, AfterViewInit {
   private readonly locale = inject(LOCALE_ID).toString();
diff --git a/projects/element-ng/datepicker/si-timepicker.component.spec.ts b/projects/element-ng/datepicker/si-timepicker.component.spec.ts
index 8dcfacdef5..e503669128 100644
--- a/projects/element-ng/datepicker/si-timepicker.component.spec.ts
+++ b/projects/element-ng/datepicker/si-timepicker.component.spec.ts
@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { Component, signal, viewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 
@@ -22,7 +22,8 @@ import { SiTimepickerComponent as TestComponent } from './index';
       [showMeridian]="showMeridian()"
       (inputCompleted)="onInputCompleted()"
     />
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 class WrapperComponent {
   readonly picker = viewChild.required<TestComponent>(TestComponent);