@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/fesm2022/siemens-element-ng-datepicker.mjs

@@ -1,6 +1,6 @@
 import { getLocaleDayPeriods, FormStyle, TranslationWidth, getLocaleId, getLocaleDateTimeFormat, FormatWidth, getLocaleTimeFormat, getLocaleDateFormat, formatDate, DatePipe, NgTemplateOutlet, getLocaleFirstDayOfWeek, WeekDay } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, booleanAttribute, computed, signal, inject, LOCALE_ID, Directive, ElementRef, viewChildren, ChangeDetectionStrategy, Component, viewChild, HostListener, HostAttributeToken, effect, ChangeDetectorRef, SimpleChange, DOCUMENT, DestroyRef, contentChild, NgModule } from '@angular/core';
+import { input, model, output, booleanAttribute, computed, signal, inject, LOCALE_ID, Directive, ElementRef, viewChildren, Component, viewChild, HostListener, HostAttributeToken, effect, ChangeDetectorRef, SimpleChange, ChangeDetectionStrategy, DOCUMENT, DestroyRef, contentChild, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormBuilder, ReactiveFormsModule, FormControl, FormsModule, NgControl } from '@angular/forms';
 import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
@@ -749,7 +749,8 @@ class SiDateInputDirective {
      * `si-date-input-${SiDateInputDirective.idCounter++}`
      * ```
      */
-    id = input(`si-date-input-${SiDateInputDirective.idCounter++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`si-date-input-${SiDateInputDirective.idCounter++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /**
      * Configuration object for the datepicker.
      *
@@ -758,7 +759,8 @@ class SiDateInputDirective {
      * {}
      * ```
      */
-    siDatepickerConfig = model({}, ...(ngDevMode ? [{ debugName: "siDatepickerConfig" }] : []));
+    siDatepickerConfig = model({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "siDatepickerConfig" }] : /* istanbul ignore next */ []));
     /**
      * Emits an event to notify about disabling the time from the datepicker.
      * When time is disable, we construct a pure date object in UTC 00:00:00 time.
@@ -773,12 +775,12 @@ class SiDateInputDirective {
      * @defaultValue false
      */
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
     /**
      * Whether the date range input is readonly.
      * @defaultValue false
      */
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * This ID will be bound to the `aria-describedby` attribute of the date-input.
      * Use this to reference the element containing the error message(s) for the date-input.
@@ -789,9 +791,12 @@ class SiDateInputDirective {
      * `${this.id()}-errormessage`
      * ```
      */
-    errormessageId = input(`${this.id()}-errormessage`, ...(ngDevMode ? [{ debugName: "errormessageId" }] : []));
+    errormessageId = input(`${this.id()}-errormessage`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errormessageId" }] : /* istanbul ignore next */ []));
     /** @internal */
     validatorOnChange = () => { };
+    /** @internal */
+    validationChange = output();
     /**
      * Date form input validator function, validating text format, min and max value.
      */
@@ -806,11 +811,14 @@ class SiDateInputDirective {
      */
     dateChange = output();
     /** @internal */
-    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     onTouched = () => { };
     onModelChange = () => { };
-    dateString = signal('', ...(ngDevMode ? [{ debugName: "dateString" }] : []));
-    disabledNgControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : []));
+    dateString = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateString" }] : /* istanbul ignore next */ []));
+    disabledNgControl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : /* istanbul ignore next */ []));
     locale = inject(LOCALE_ID).toString();
     format = '';
     ngOnChanges(changes) {
@@ -829,6 +837,8 @@ class SiDateInputDirective {
             if (this.date && formatChanged) {
                 this.updateNativeValue();
             }
+            this.validatorOnChange();
+            this.validationChange.emit();
         }
     }
     validate(c) {
@@ -969,8 +979,8 @@ class SiDateInputDirective {
                 }
             };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiDateInputDirective, isStandalone: true, selector: "input[siDateInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, siDatepickerConfig: { classPropertyName: "siDatepickerConfig", publicName: "siDatepickerConfig", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { siDatepickerConfig: "siDatepickerConfigChange", siDatepickerDisabledTime: "siDatepickerDisabledTime", stateChange: "stateChange", dateChange: "dateChange" }, host: { listeners: { "input": "onInput($event)", "blur": "onBlur($event)" }, properties: { "attr.id": "id()", "attr.disabled": "disabled() || null", "attr.readonly": "readonly() || null", "class.readonly": "readonly()", "attr.aria-describedby": "errormessageId()", "value": "dateString()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiDateInputDirective, isStandalone: true, selector: "input[siDateInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, siDatepickerConfig: { classPropertyName: "siDatepickerConfig", publicName: "siDatepickerConfig", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { siDatepickerConfig: "siDatepickerConfigChange", siDatepickerDisabledTime: "siDatepickerDisabledTime", stateChange: "stateChange", validationChange: "validationChange", dateChange: "dateChange" }, host: { listeners: { "input": "onInput($event)", "blur": "onBlur($event)" }, properties: { "attr.id": "id()", "attr.disabled": "disabled() || null", "attr.readonly": "readonly() || null", "class.readonly": "readonly()", "attr.aria-describedby": "errormessageId()", "value": "dateString()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SiDateInputDirective,
@@ -987,7 +997,7 @@ class SiDateInputDirective {
             }
         ], exportAs: ["siDateInput"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[siDateInput]',
@@ -1019,7 +1029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     },
                     exportAs: 'siDateInput'
                 }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], siDatepickerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "siDatepickerConfig", required: false }] }, { type: i0.Output, args: ["siDatepickerConfigChange"] }], siDatepickerDisabledTime: [{ type: i0.Output, args: ["siDatepickerDisabledTime"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], siDatepickerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "siDatepickerConfig", required: false }] }, { type: i0.Output, args: ["siDatepickerConfigChange"] }], siDatepickerDisabledTime: [{ type: i0.Output, args: ["siDatepickerDisabledTime"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }], validationChange: [{ type: i0.Output, args: ["validationChange"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -1027,15 +1037,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiCalendarDateCellDirective {
     /** Calendar cell data used to render its state and accessible label. */
-    cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
+    cell = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cell" }] : /* istanbul ignore next */ []));
     /** Date comparison strategy used by the containing calendar view. */
-    compareAdapter = input.required(...(ngDevMode ? [{ debugName: "compareAdapter" }] : []));
+    compareAdapter = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareAdapter" }] : /* istanbul ignore next */ []));
     /** @defaultValue inject(ElementRef) */
     ref = inject(ElementRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCalendarDateCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiCalendarDateCellDirective, isStandalone: true, selector: "[siCalendarDateCell]", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, compareAdapter: { classPropertyName: "compareAdapter", publicName: "compareAdapter", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-disabled": "cell().disabled", "class.disabled": "cell().disabled", "attr.aria-label": "cell().ariaLabel", "class.today": "this.cell().isToday", "attr.aria-current": "this.cell().isToday ? \"date\" : null" }, classAttribute: "si-calendar-date-cell focus-inside" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCalendarDateCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiCalendarDateCellDirective, isStandalone: true, selector: "[siCalendarDateCell]", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, compareAdapter: { classPropertyName: "compareAdapter", publicName: "compareAdapter", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-disabled": "cell().disabled", "class.disabled": "cell().disabled", "attr.aria-label": "cell().ariaLabel", "class.today": "this.cell().isToday", "attr.aria-current": "this.cell().isToday ? \"date\" : null" }, classAttribute: "si-calendar-date-cell focus-inside" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCalendarDateCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCalendarDateCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siCalendarDateCell]',
@@ -1181,54 +1193,65 @@ class RangeSelectionStrategy extends SelectionStrategy {
 }
 class SiCalendarBodyComponent {
     /** The active date, the cell which will receive the focus. */
-    focusedDate = model.required(...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
+    focusedDate = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
     /** The date which shall be indicated as currently selected. */
-    startDate = input(...(ngDevMode ? [undefined, { debugName: "startDate" }] : []));
+    startDate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "startDate" }] : /* istanbul ignore next */ []));
     /** Selected end value which is only considered with enableRangeSelection. */
-    endDate = input(...(ngDevMode ? [undefined, { debugName: "endDate" }] : []));
+    endDate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "endDate" }] : /* istanbul ignore next */ []));
     /**
      * The cells to display in the table.
      *
      * @defaultValue []
      */
-    rows = input([], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    rows = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     /**
      * Labels for each row, which can be used to display the week number.
      * @defaultValue undefined
      */
-    rowLabels = input(undefined, ...(ngDevMode ? [{ debugName: "rowLabels" }] : []));
+    rowLabels = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowLabels" }] : /* istanbul ignore next */ []));
     /**
      * Additional row label CSS class(es).
      *
      * @defaultValue []
      */
-    rowLabelCssClasses = input([], ...(ngDevMode ? [{ debugName: "rowLabelCssClasses" }] : []));
+    rowLabelCssClasses = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowLabelCssClasses" }] : /* istanbul ignore next */ []));
     /**
      * Choose the selection strategy between single or range selection.
      * @defaultValue false
      */
-    enableRangeSelection = input(false, ...(ngDevMode ? [{ debugName: "enableRangeSelection" }] : []));
+    enableRangeSelection = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableRangeSelection" }] : /* istanbul ignore next */ []));
     /**
      * Indicate whether a range preview shall be displayed.
      * It's necessary since to display a preview also datepicker has a valid endDate.
      *
      * @defaultValue true
      */
-    previewRange = input(true, { ...(ngDevMode ? { debugName: "previewRange" } : {}), transform: booleanAttribute });
+    previewRange = input(true, { ...(ngDevMode ? { debugName: "previewRange" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** The cell which which has the mouse hover. */
-    activeHover = model(...(ngDevMode ? [undefined, { debugName: "activeHover" }] : []));
+    activeHover = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "activeHover" }] : /* istanbul ignore next */ []));
     /**
      * Compare date functions which are necessary to compare a the dates according the current view.
      *
      * @defaultValue new DayCompareAdapter()
      */
-    compareAdapter = input(new DayCompareAdapter(), ...(ngDevMode ? [{ debugName: "compareAdapter" }] : []));
+    compareAdapter = input(new DayCompareAdapter(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareAdapter" }] : /* istanbul ignore next */ []));
     /** Emits when a user select a cell via click, space or enter. */
     selectedValueChange = output();
-    calendarDateCells = viewChildren(SiCalendarDateCellDirective, ...(ngDevMode ? [{ debugName: "calendarDateCells" }] : []));
+    calendarDateCells = viewChildren(SiCalendarDateCellDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarDateCells" }] : /* istanbul ignore next */ []));
     selection = computed(() => this.enableRangeSelection()
         ? new RangeSelectionStrategy(this.compareAdapter())
-        : new SingleSelectionStrategy(this.compareAdapter()), ...(ngDevMode ? [{ debugName: "selection" }] : []));
+        : new SingleSelectionStrategy(this.compareAdapter()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
     cellRangeClasses = computed(() => {
         const sel = this.selection();
         const rows = this.rows();
@@ -1258,7 +1281,8 @@ class SiCalendarBodyComponent {
             }
             return classes;
         }));
-    }, ...(ngDevMode ? [{ debugName: "cellRangeClasses" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellRangeClasses" }] : /* istanbul ignore next */ []));
     /**
      * Focus calendar cell which is marked as active cell.
      */
@@ -1292,12 +1316,12 @@ class SiCalendarBodyComponent {
             this.focusedDate.set(cell.valueRaw);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiCalendarBodyComponent, isStandalone: true, selector: "[si-calendar-body]", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowLabels: { classPropertyName: "rowLabels", publicName: "rowLabels", isSignal: true, isRequired: false, transformFunction: null }, rowLabelCssClasses: { classPropertyName: "rowLabelCssClasses", publicName: "rowLabelCssClasses", isSignal: true, isRequired: false, transformFunction: null }, enableRangeSelection: { classPropertyName: "enableRangeSelection", publicName: "enableRangeSelection", isSignal: true, isRequired: false, transformFunction: null }, previewRange: { classPropertyName: "previewRange", publicName: "previewRange", isSignal: true, isRequired: false, transformFunction: null }, activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null }, compareAdapter: { classPropertyName: "compareAdapter", publicName: "compareAdapter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeHover: "activeHoverChange", selectedValueChange: "selectedValueChange" }, host: { classAttribute: "si-calendar-body" }, viewQueries: [{ propertyName: "calendarDateCells", predicate: SiCalendarDateCellDirective, descendants: true, isSignal: true }], exportAs: ["siCalendarBody"], ngImport: i0, template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!-- Typically used for week numbers -->\n    @if (rowLabels()) {\n      <td class=\"si-calendar-row-label\" [attr.data-row]=\"rowIndex\">\n        <div [class]=\"rowLabelCssClasses()\">{{ rowLabels()?.at(rowIndex) ?? '' }}</div>\n      </td>\n    }\n    @for (col of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"si-calendar-cell\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-col]=\"colIndex\"\n        [class]=\"cellRangeClasses()[rowIndex][colIndex]\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\n          [class]=\"cellCss(col)\"\n          [class.selected]=\"selection().isSelected(col, startDate(), endDate())\"\n          [class.text-secondary]=\"\n            col.isPreview &&\n            !col.disabled &&\n            !selection().isRangeSelected(col, startDate()) &&\n            !selection().isRangeSelected(col, endDate()) &&\n            !selection().inRange(col, startDate(), endDate())\n          \"\n          [tabindex]=\"isActive(col) ? '0' : '-1'\"\n          (mouseover)=\"emitActiveHover(col)\"\n          (click)=\"emitSelectCell(col)\"\n          (focus)=\"emitActiveDateChange(col)\"\n        >\n          {{ col.displayValue }}\n        </button>\n      </td>\n    }\n  </tr>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: SiCalendarDateCellDirective, selector: "[siCalendarDateCell]", inputs: ["cell", "compareAdapter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiCalendarBodyComponent, isStandalone: true, selector: "[si-calendar-body]", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowLabels: { classPropertyName: "rowLabels", publicName: "rowLabels", isSignal: true, isRequired: false, transformFunction: null }, rowLabelCssClasses: { classPropertyName: "rowLabelCssClasses", publicName: "rowLabelCssClasses", isSignal: true, isRequired: false, transformFunction: null }, enableRangeSelection: { classPropertyName: "enableRangeSelection", publicName: "enableRangeSelection", isSignal: true, isRequired: false, transformFunction: null }, previewRange: { classPropertyName: "previewRange", publicName: "previewRange", isSignal: true, isRequired: false, transformFunction: null }, activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null }, compareAdapter: { classPropertyName: "compareAdapter", publicName: "compareAdapter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeHover: "activeHoverChange", selectedValueChange: "selectedValueChange" }, host: { classAttribute: "si-calendar-body" }, viewQueries: [{ propertyName: "calendarDateCells", predicate: SiCalendarDateCellDirective, descendants: true, isSignal: true }], exportAs: ["siCalendarBody"], ngImport: i0, template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!-- Typically used for week numbers -->\n    @if (rowLabels()) {\n      <td class=\"si-calendar-row-label\" [attr.data-row]=\"rowIndex\">\n        <div [class]=\"rowLabelCssClasses()\">{{ rowLabels()?.at(rowIndex) ?? '' }}</div>\n      </td>\n    }\n    @for (col of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"si-calendar-cell\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-col]=\"colIndex\"\n        [class]=\"cellRangeClasses()[rowIndex][colIndex]\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\n          [class]=\"cellCss(col)\"\n          [class.selected]=\"selection().isSelected(col, startDate(), endDate())\"\n          [class.text-secondary]=\"\n            col.isPreview &&\n            !col.disabled &&\n            !selection().isRangeSelected(col, startDate()) &&\n            !selection().isRangeSelected(col, endDate()) &&\n            !selection().inRange(col, startDate(), endDate())\n          \"\n          [tabindex]=\"isActive(col) ? '0' : '-1'\"\n          (mouseover)=\"emitActiveHover(col)\"\n          (click)=\"emitSelectCell(col)\"\n          (focus)=\"emitActiveDateChange(col)\"\n        >\n          {{ col.displayValue }}\n        </button>\n      </td>\n    }\n  </tr>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: SiCalendarDateCellDirective, selector: "[siCalendarDateCell]", inputs: ["cell", "compareAdapter"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCalendarBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCalendarBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[si-calendar-body]', imports: [A11yModule, SiCalendarDateCellDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: '[si-calendar-body]', imports: [A11yModule, SiCalendarDateCellDirective], host: {
                         class: 'si-calendar-body'
                     }, exportAs: 'siCalendarBody', template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!-- Typically used for week numbers -->\n    @if (rowLabels()) {\n      <td class=\"si-calendar-row-label\" [attr.data-row]=\"rowIndex\">\n        <div [class]=\"rowLabelCssClasses()\">{{ rowLabels()?.at(rowIndex) ?? '' }}</div>\n      </td>\n    }\n    @for (col of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"si-calendar-cell\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-col]=\"colIndex\"\n        [class]=\"cellRangeClasses()[rowIndex][colIndex]\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\n          [class]=\"cellCss(col)\"\n          [class.selected]=\"selection().isSelected(col, startDate(), endDate())\"\n          [class.text-secondary]=\"\n            col.isPreview &&\n            !col.disabled &&\n            !selection().isRangeSelected(col, startDate()) &&\n            !selection().isRangeSelected(col, endDate()) &&\n            !selection().inRange(col, startDate(), endDate())\n          \"\n          [tabindex]=\"isActive(col) ? '0' : '-1'\"\n          (mouseover)=\"emitActiveHover(col)\"\n          (click)=\"emitSelectCell(col)\"\n          (focus)=\"emitActiveDateChange(col)\"\n        >\n          {{ col.displayValue }}\n        </button>\n      </td>\n    }\n  </tr>\n}\n" }]
         }], propDecorators: { focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedDate", required: true }] }, { type: i0.Output, args: ["focusedDateChange"] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabels", required: false }] }], rowLabelCssClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabelCssClasses", required: false }] }], enableRangeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRangeSelection", required: false }] }], previewRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewRange", required: false }] }], activeHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeHover", required: false }] }, { type: i0.Output, args: ["activeHoverChange"] }], compareAdapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareAdapter", required: false }] }], selectedValueChange: [{ type: i0.Output, args: ["selectedValueChange"] }], calendarDateCells: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiCalendarDateCellDirective), { isSignal: true }] }] } });
@@ -1308,29 +1332,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiCalendarDirectionButtonComponent {
     /** Accessible label for the button. */
-    ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Whether the button is disabled.
      *
      * @defaultValue false
      */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Direction in which the button navigates. */
-    direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+    direction = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "direction" }] : /* istanbul ignore next */ []));
     /** Emits when the button is clicked. */
     clicked = output();
-    icon = computed(() => this.direction() === 'left' ? this.icons.elementLeft2 : this.icons.elementRight2, ...(ngDevMode ? [{ debugName: "icon" }] : []));
-    buttonClass = computed(() => this.direction() === 'left' ? 'previous-button' : 'next-button', ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
+    icon = computed(() => this.direction() === 'left' ? this.icons.elementLeft2 : this.icons.elementRight2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    buttonClass = computed(() => this.direction() === 'left' ? 'previous-button' : 'next-button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementLeft2, elementRight2 });
     onClick() {
         this.clicked.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCalendarDirectionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiCalendarDirectionButtonComponent, isStandalone: true, selector: "si-calendar-direction-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  type=\"button\"\n  [class]=\"`btn btn-circle btn-tertiary ${buttonClass()}`\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"onClick()\"\n>\n  <si-icon class=\"icon flip-rtl\" [icon]=\"icon()\" />\n</button>\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCalendarDirectionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SiCalendarDirectionButtonComponent, isStandalone: true, selector: "si-calendar-direction-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  type=\"button\"\n  [class]=\"`btn btn-circle btn-tertiary ${buttonClass()}`\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"onClick()\"\n>\n  <si-icon class=\"icon flip-rtl\" [icon]=\"icon()\" />\n</button>\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCalendarDirectionButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCalendarDirectionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-calendar-direction-button', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  [class]=\"`btn btn-circle btn-tertiary ${buttonClass()}`\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"onClick()\"\n>\n  <si-icon class=\"icon flip-rtl\" [icon]=\"icon()\" />\n</button>\n" }]
+            args: [{ selector: 'si-calendar-direction-button', imports: [SiIconComponent], template: "<button\n  type=\"button\"\n  [class]=\"`btn btn-circle btn-tertiary ${buttonClass()}`\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"onClick()\"\n>\n  <si-icon class=\"icon flip-rtl\" [icon]=\"icon()\" />\n</button>\n" }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -1342,59 +1370,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiInitialFocusComponent {
     /** The cell which has the mouse hover. */
-    activeHover = model(...(ngDevMode ? [undefined, { debugName: "activeHover" }] : []));
+    activeHover = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "activeHover" }] : /* istanbul ignore next */ []));
     /** The date which is displayed as selected. */
-    startDate = input(...(ngDevMode ? [undefined, { debugName: "startDate" }] : []));
+    startDate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "startDate" }] : /* istanbul ignore next */ []));
     /** The date which is displayed as selected end. The value is only considered with enableRangeSelection. */
-    endDate = input(...(ngDevMode ? [undefined, { debugName: "endDate" }] : []));
+    endDate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "endDate" }] : /* istanbul ignore next */ []));
     /**
      * Guard to set the focus during ngAfterViewInit, we just set the focus after we first initialized the view
      *
      * @defaultValue true
      */
-    initialFocus = input(true, ...(ngDevMode ? [{ debugName: "initialFocus" }] : []));
+    initialFocus = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialFocus" }] : /* istanbul ignore next */ []));
     /** The minimum selectable date. */
-    minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
+    minDate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
     /** The maximum selectable date. */
-    maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
+    maxDate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
     /**
      * Optional input to control the minimum month the datepicker can show and the user can navigate.
      * The `minMonth` can be larger than the `minDate` This option enables the usage of multiple
      * datepickers next to each other while the more left calendar always
      * shows an earlier month the more right one.
      */
-    minMonth = input(...(ngDevMode ? [undefined, { debugName: "minMonth" }] : []));
+    minMonth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minMonth" }] : /* istanbul ignore next */ []));
     /**
      * Optional input to control the maximum month the datepicker can show and the user can navigate.
      * The `maxMonth` can be smaller than the `maxDate` This option enables the usage of multiple
      * datepickers next to each other while the more left calendar always
      * shows an earlier month the more right one.
      */
-    maxMonth = input(...(ngDevMode ? [undefined, { debugName: "maxMonth" }] : []));
+    maxMonth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxMonth" }] : /* istanbul ignore next */ []));
     /** Aria label for the next button. Needed for a11y. */
-    previousLabel = input.required(...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    previousLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []));
     /**  Aria label for the next button. Needed for a11y. */
-    nextLabel = input.required(...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    nextLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
     /**
      * Is range selection enabled, when enabled it shows a preview between the startDate and the focused date.
      *
      * @defaultValue false
      */
-    isRangeSelection = input(false, { ...(ngDevMode ? { debugName: "isRangeSelection" } : {}), transform: booleanAttribute });
+    isRangeSelection = input(false, { ...(ngDevMode ? { debugName: "isRangeSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Indicate whether a range preview shall be displayed.
      * When enabled a preview is visible between startDate and focusedDate.
      *
      * @defaultValue true
      */
-    previewRange = input(true, { ...(ngDevMode ? { debugName: "previewRange" } : {}), transform: booleanAttribute });
+    previewRange = input(true, { ...(ngDevMode ? { debugName: "previewRange" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Emits when a new value is selected. In case where the value is null to
      * user aborted the selection by Escape.
      */
     selectedValueChange = output();
     /** The body of calendar table */
-    calendarBody = viewChild.required(SiCalendarBodyComponent);
+    calendarBody = viewChild.required(SiCalendarBodyComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarBody" }] : /* istanbul ignore next */ []));
     ngAfterViewInit() {
         if (this.initialFocus()) {
             this.focusActiveCell();
@@ -1409,14 +1448,13 @@ class SiInitialFocusComponent {
     onActiveHoverChange(event) {
         this.activeHover.set(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiInitialFocusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiInitialFocusComponent, isStandalone: true, selector: "ng-component", inputs: { activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minMonth: { classPropertyName: "minMonth", publicName: "minMonth", isSignal: true, isRequired: false, transformFunction: null }, maxMonth: { classPropertyName: "maxMonth", publicName: "maxMonth", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, isRangeSelection: { classPropertyName: "isRangeSelection", publicName: "isRangeSelection", isSignal: true, isRequired: false, transformFunction: null }, previewRange: { classPropertyName: "previewRange", publicName: "previewRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeHover: "activeHoverChange", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: SiCalendarBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiInitialFocusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: SiInitialFocusComponent, isStandalone: true, selector: "ng-component", inputs: { activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minMonth: { classPropertyName: "minMonth", publicName: "minMonth", isSignal: true, isRequired: false, transformFunction: null }, maxMonth: { classPropertyName: "maxMonth", publicName: "maxMonth", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, isRangeSelection: { classPropertyName: "isRangeSelection", publicName: "isRangeSelection", isSignal: true, isRequired: false, transformFunction: null }, previewRange: { classPropertyName: "previewRange", publicName: "previewRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeHover: "activeHoverChange", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: SiCalendarBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiInitialFocusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiInitialFocusComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    template: ''
                 }]
         }], propDecorators: { activeHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeHover", required: false }] }, { type: i0.Output, args: ["activeHoverChange"] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMonth", required: false }] }], maxMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxMonth", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: true }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: true }] }], isRangeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRangeSelection", required: false }] }], previewRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewRange", required: false }] }], selectedValueChange: [{ type: i0.Output, args: ["selectedValueChange"] }], calendarBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiCalendarBodyComponent), { isSignal: true }] }] } });
 
@@ -1435,31 +1473,38 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
      *
      * @defaultValue false
      */
-    hideWeekNumbers = input(false, { ...(ngDevMode ? { debugName: "hideWeekNumbers" } : {}), transform: booleanAttribute });
+    hideWeekNumbers = input(false, { ...(ngDevMode ? { debugName: "hideWeekNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Defines the starting day of the week. Default is `monday`.
      *
      * @defaultValue 'monday'
      */
-    weekStartDay = input('monday', ...(ngDevMode ? [{ debugName: "weekStartDay" }] : []));
+    weekStartDay = input('monday', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekStartDay" }] : /* istanbul ignore next */ []));
     /**
      * The active date, the cell which will receive the focus.
      * @defaultValue calendarUtils.today()
      */
-    focusedDate = model.required(...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
+    focusedDate = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
     /** Today button text */
-    todayLabel = input(...(ngDevMode ? [undefined, { debugName: "todayLabel" }] : []));
+    todayLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "todayLabel" }] : /* istanbul ignore next */ []));
     /** Aria label for calendar week column */
-    calendarWeekLabel = input(...(ngDevMode ? [undefined, { debugName: "calendarWeekLabel" }] : []));
+    calendarWeekLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "calendarWeekLabel" }] : /* istanbul ignore next */ []));
     /** Emits when the active focused date changed to another month / year, typically during keyboard navigation */
     activeMonthChange = output();
     /** Emits when the user requests a different to show a different view */
     viewChange = output();
-    today = computed(() => this.todayLabel() ?? this.todayDefaultText, ...(ngDevMode ? [{ debugName: "today" }] : []));
+    today = computed(() => this.todayLabel() ?? this.todayDefaultText, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
     /** The translated list of week days. */
-    days = computed(() => getDayStrings(this.locale, this.weekStartDay()), ...(ngDevMode ? [{ debugName: "days" }] : []));
+    days = computed(() => getDayStrings(this.locale, this.weekStartDay()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []));
     /** The week numbers which are shown as row label */
-    weekNumbers = computed(() => this.weeks().map(w => getWeekOfYear(w[0].valueRaw, this.weekStartDay()).toString()), ...(ngDevMode ? [{ debugName: "weekNumbers" }] : []));
+    weekNumbers = computed(() => this.weeks().map(w => getWeekOfYear(w[0].valueRaw, this.weekStartDay()).toString()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekNumbers" }] : /* istanbul ignore next */ []));
     /**
      * The current visible list of calendar days.
      * Every time the focusedDate changes to either another month or year the list will be rebuild.
@@ -1496,11 +1541,13 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
             });
         }
         return weeks;
-    }, ...(ngDevMode ? [{ debugName: "weeks" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
     /** Compare date based on the current view */
     compareAdapter = new DayCompareAdapter();
     /** Disable today button if it is the same month */
-    isTodayButtonDisabled = computed(() => isSameMonth(today(), this.focusedDate()), ...(ngDevMode ? [{ debugName: "isTodayButtonDisabled" }] : []));
+    isTodayButtonDisabled = computed(() => isSameMonth(today(), this.focusedDate()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTodayButtonDisabled" }] : /* istanbul ignore next */ []));
     /**
      * Indicate the previous button shall be disabled.
      * This happens when the focusedDate is equal or before the minDate.
@@ -1509,7 +1556,8 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
         const minDate = this.minDate();
         const focusedDate = this.focusedDate();
         return minDate && (isSameMonth(focusedDate, minDate) || isAfterMonth(minDate, focusedDate));
-    }, ...(ngDevMode ? [{ debugName: "isPreviousButtonDisabled" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPreviousButtonDisabled" }] : /* istanbul ignore next */ []));
     /**
      * Indicate the next button shall be disabled.
      * This happens when the focusedDate is equal or after the maxDate.
@@ -1518,7 +1566,8 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
         const maxDate = this.maxDate();
         const focusedDate = this.focusedDate();
         return maxDate && (isSameMonth(focusedDate, maxDate) || isAfterMonth(focusedDate, maxDate));
-    }, ...(ngDevMode ? [{ debugName: "isNextButtonDisabled" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNextButtonDisabled" }] : /* istanbul ignore next */ []));
     locale = inject(LOCALE_ID).toString();
     calendarBodyKeyDown(event) {
         const isRtl = isRTL();
@@ -1598,12 +1647,12 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
     emitViewChange(view) {
         this.viewChange.emit(view);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDaySelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiDaySelectionComponent, isStandalone: true, selector: "si-day-selection", inputs: { hideWeekNumbers: { classPropertyName: "hideWeekNumbers", publicName: "hideWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, weekStartDay: { classPropertyName: "weekStartDay", publicName: "weekStartDay", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekLabel: { classPropertyName: "calendarWeekLabel", publicName: "calendarWeekLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange" }, host: { classAttribute: "d-flex flex-column gap-6" }, usesInheritance: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel() | translate\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setMonthOffset(-1)\"\n  />\n  <div class=\"flex-fill\">\n    <button\n      type=\"button\"\n      class=\"open-month-view flex-fill text-end px-4 btn btn-tertiary calendar-button\"\n      (click)=\"emitViewChange('month')\"\n    >\n      {{ focusedDate() | date: 'MMMM' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"open-year-view flex-fill text-start px-4 btn btn-tertiary calendar-button\"\n      (click)=\"emitViewChange('year')\"\n    >\n      {{ focusedDate() | date: 'yyyy' }}\n    </button>\n  </div>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel() | translate\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setMonthOffset(1)\"\n  />\n</div>\n<div class=\"calendar-table\">\n  <table class=\"px-9\" role=\"grid\">\n    <thead class=\"si-calendar-table-header\">\n      <tr>\n        @if (!hideWeekNumbers()) {\n          <th scope=\"col\" class=\"week-num\">\n            <span class=\"visually-hidden\">{{ calendarWeekLabel() | translate }}</span>\n          </th>\n        }\n        @for (day of days(); track $index) {\n          <th scope=\"col\">\n            <span class=\"si-hidden-xs si-hidden-sm\">{{ day }}</span>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody\n      si-calendar-body\n      rowLabelCssClasses=\"week-num\"\n      [focusedDate]=\"focusedDate()\"\n      [compareAdapter]=\"compareAdapter\"\n      [startDate]=\"startDate()\"\n      [endDate]=\"endDate()\"\n      [enableRangeSelection]=\"isRangeSelection()\"\n      [previewRange]=\"previewRange()\"\n      [rows]=\"weeks()\"\n      [rowLabels]=\"hideWeekNumbers() ? undefined : weekNumbers()\"\n      [activeHover]=\"activeHover()\"\n      (activeHoverChange)=\"onActiveHoverChange($event)\"\n      (selectedValueChange)=\"emitSelectedValue($event)\"\n      (focusedDateChange)=\"emitActiveDate($event!)\"\n      (keydown)=\"calendarBodyKeyDown($event)\"\n    >\n    </tbody>\n  </table>\n</div>\n<div class=\"footer ps-8 pe-8\">\n  <button\n    type=\"button\"\n    class=\"today-button btn btn-tertiary flex-fill\"\n    [disabled]=\"isTodayButtonDisabled()\"\n    (click)=\"goToToday()\"\n  >\n    {{ today() | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDaySelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiDaySelectionComponent, isStandalone: true, selector: "si-day-selection", inputs: { hideWeekNumbers: { classPropertyName: "hideWeekNumbers", publicName: "hideWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, weekStartDay: { classPropertyName: "weekStartDay", publicName: "weekStartDay", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekLabel: { classPropertyName: "calendarWeekLabel", publicName: "calendarWeekLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange" }, host: { classAttribute: "d-flex flex-column gap-6" }, usesInheritance: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel() | translate\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setMonthOffset(-1)\"\n  />\n  <div class=\"flex-fill\">\n    <button\n      type=\"button\"\n      class=\"open-month-view flex-fill text-end px-4 btn btn-tertiary calendar-button\"\n      (click)=\"emitViewChange('month')\"\n    >\n      {{ focusedDate() | date: 'MMMM' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"open-year-view flex-fill text-start px-4 btn btn-tertiary calendar-button\"\n      (click)=\"emitViewChange('year')\"\n    >\n      {{ focusedDate() | date: 'yyyy' }}\n    </button>\n  </div>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel() | translate\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setMonthOffset(1)\"\n  />\n</div>\n<div class=\"calendar-table\">\n  <table class=\"px-9\" role=\"grid\">\n    <thead class=\"si-calendar-table-header\">\n      <tr>\n        @if (!hideWeekNumbers()) {\n          <th scope=\"col\" class=\"week-num\">\n            <span class=\"visually-hidden\">{{ calendarWeekLabel() | translate }}</span>\n          </th>\n        }\n        @for (day of days(); track $index) {\n          <th scope=\"col\">\n            <span class=\"si-hidden-xs si-hidden-sm\">{{ day }}</span>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody\n      si-calendar-body\n      rowLabelCssClasses=\"week-num\"\n      [focusedDate]=\"focusedDate()\"\n      [compareAdapter]=\"compareAdapter\"\n      [startDate]=\"startDate()\"\n      [endDate]=\"endDate()\"\n      [enableRangeSelection]=\"isRangeSelection()\"\n      [previewRange]=\"previewRange()\"\n      [rows]=\"weeks()\"\n      [rowLabels]=\"hideWeekNumbers() ? undefined : weekNumbers()\"\n      [activeHover]=\"activeHover()\"\n      (activeHoverChange)=\"onActiveHoverChange($event)\"\n      (selectedValueChange)=\"emitSelectedValue($event)\"\n      (focusedDateChange)=\"emitActiveDate($event!)\"\n      (keydown)=\"calendarBodyKeyDown($event)\"\n    >\n    </tbody>\n  </table>\n</div>\n<div class=\"footer ps-8 pe-8\">\n  <button\n    type=\"button\"\n    class=\"today-button btn btn-tertiary flex-fill\"\n    [disabled]=\"isTodayButtonDisabled()\"\n    (click)=\"goToToday()\"\n  >\n    {{ today() | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDaySelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDaySelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-day-selection', imports: [DatePipe, SiCalendarBodyComponent, SiCalendarDirectionButtonComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-day-selection', imports: [DatePipe, SiCalendarBodyComponent, SiCalendarDirectionButtonComponent, SiTranslatePipe], host: {
                         class: 'd-flex flex-column gap-6'
                     }, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel() | translate\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setMonthOffset(-1)\"\n  />\n  <div class=\"flex-fill\">\n    <button\n      type=\"button\"\n      class=\"open-month-view flex-fill text-end px-4 btn btn-tertiary calendar-button\"\n      (click)=\"emitViewChange('month')\"\n    >\n      {{ focusedDate() | date: 'MMMM' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"open-year-view flex-fill text-start px-4 btn btn-tertiary calendar-button\"\n      (click)=\"emitViewChange('year')\"\n    >\n      {{ focusedDate() | date: 'yyyy' }}\n    </button>\n  </div>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel() | translate\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setMonthOffset(1)\"\n  />\n</div>\n<div class=\"calendar-table\">\n  <table class=\"px-9\" role=\"grid\">\n    <thead class=\"si-calendar-table-header\">\n      <tr>\n        @if (!hideWeekNumbers()) {\n          <th scope=\"col\" class=\"week-num\">\n            <span class=\"visually-hidden\">{{ calendarWeekLabel() | translate }}</span>\n          </th>\n        }\n        @for (day of days(); track $index) {\n          <th scope=\"col\">\n            <span class=\"si-hidden-xs si-hidden-sm\">{{ day }}</span>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody\n      si-calendar-body\n      rowLabelCssClasses=\"week-num\"\n      [focusedDate]=\"focusedDate()\"\n      [compareAdapter]=\"compareAdapter\"\n      [startDate]=\"startDate()\"\n      [endDate]=\"endDate()\"\n      [enableRangeSelection]=\"isRangeSelection()\"\n      [previewRange]=\"previewRange()\"\n      [rows]=\"weeks()\"\n      [rowLabels]=\"hideWeekNumbers() ? undefined : weekNumbers()\"\n      [activeHover]=\"activeHover()\"\n      (activeHoverChange)=\"onActiveHoverChange($event)\"\n      (selectedValueChange)=\"emitSelectedValue($event)\"\n      (focusedDateChange)=\"emitActiveDate($event!)\"\n      (keydown)=\"calendarBodyKeyDown($event)\"\n    >\n    </tbody>\n  </table>\n</div>\n<div class=\"footer ps-8 pe-8\">\n  <button\n    type=\"button\"\n    class=\"today-button btn btn-tertiary flex-fill\"\n    [disabled]=\"isTodayButtonDisabled()\"\n    (click)=\"goToToday()\"\n  >\n    {{ today() | translate }}\n  </button>\n</div>\n" }]
         }], propDecorators: { hideWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWeekNumbers", required: false }] }], weekStartDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartDay", required: false }] }], focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedDate", required: true }] }, { type: i0.Output, args: ["focusedDateChange"] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], calendarWeekLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarWeekLabel", required: false }] }], activeMonthChange: [{ type: i0.Output, args: ["activeMonthChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }] } });
@@ -1622,11 +1671,13 @@ class SiMonthSelectionComponent extends SiInitialFocusComponent {
      *
      * @defaultValue []
      */
-    months = input([], ...(ngDevMode ? [{ debugName: "months" }] : []));
+    months = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
     /**
      * The active date, the cell which will receive the focus.
      */
-    focusedDate = model.required(...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
+    focusedDate = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
     /** Emits when the active focused date is changed to another month / year, typically during keyboard navigation. */
     activeMonthChange = output();
     /** Emits when the user requests a different to show a different view. */
@@ -1653,7 +1704,8 @@ class SiMonthSelectionComponent extends SiInitialFocusComponent {
         const minDate = this.minDate();
         const focusedDate = this.focusedDate();
         return minDate && (isSameYear(focusedDate, minDate) || isAfterYear(minDate, focusedDate));
-    }, ...(ngDevMode ? [{ debugName: "isPreviousButtonDisabled" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPreviousButtonDisabled" }] : /* istanbul ignore next */ []));
     /**
      * Indicate the next button shall be disabled.
      * This happens when the focusedDate is equal or after the maxDate.
@@ -1662,7 +1714,8 @@ class SiMonthSelectionComponent extends SiInitialFocusComponent {
         const maxDate = this.maxDate();
         const focusedDate = this.focusedDate();
         return maxDate && (isSameYear(focusedDate, maxDate) || isAfterYear(focusedDate, maxDate));
-    }, ...(ngDevMode ? [{ debugName: "isNextButtonDisabled" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNextButtonDisabled" }] : /* istanbul ignore next */ []));
     ngOnChanges(changes) {
         if (changes.maxDate ||
             changes.minDate ||
@@ -1771,12 +1824,12 @@ class SiMonthSelectionComponent extends SiInitialFocusComponent {
         }
         this.monthCells.push(row);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMonthSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiMonthSelectionComponent, isStandalone: true, selector: "si-month-selection", inputs: { months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange" }, host: { listeners: { "keydown.Escape": "triggerEsc($event)" }, classAttribute: "d-flex flex-column gap-6" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel()\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setYearOffset(-1)\"\n  />\n  <button\n    type=\"button\"\n    class=\"open-year-view flex-fill mx-4 btn btn-tertiary calendar-button\"\n    (click)=\"emitViewChange()\"\n  >\n    {{ focusedDate() | date: 'yyyy' }}\n  </button>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel()\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setYearOffset(1)\"\n  />\n</div>\n<div class=\"calendar-table\">\n  <table class=\"px-9\" role=\"grid\">\n    <tbody\n      si-calendar-body\n      [focusedDate]=\"focusedDate()\"\n      [compareAdapter]=\"compareAdapter\"\n      [startDate]=\"startDate()\"\n      [endDate]=\"endDate()\"\n      [enableRangeSelection]=\"isRangeSelection()\"\n      [previewRange]=\"previewRange()\"\n      [rows]=\"monthCells\"\n      [activeHover]=\"activeHover()\"\n      (activeHoverChange)=\"onActiveHoverChange($event)\"\n      (selectedValueChange)=\"emitSelectedValue($event)\"\n      (focusedDateChange)=\"emitFocusedDate($event)\"\n      (keydown)=\"calendarBodyKeyDown($event)\"\n    >\n    </tbody>\n  </table>\n</div>\n<div class=\"footer\"></div>\n", dependencies: [{ kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMonthSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SiMonthSelectionComponent, isStandalone: true, selector: "si-month-selection", inputs: { months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange" }, host: { listeners: { "keydown.Escape": "triggerEsc($event)" }, classAttribute: "d-flex flex-column gap-6" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel()\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setYearOffset(-1)\"\n  />\n  <button\n    type=\"button\"\n    class=\"open-year-view flex-fill mx-4 btn btn-tertiary calendar-button\"\n    (click)=\"emitViewChange()\"\n  >\n    {{ focusedDate() | date: 'yyyy' }}\n  </button>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel()\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setYearOffset(1)\"\n  />\n</div>\n<div class=\"calendar-table\">\n  <table class=\"px-9\" role=\"grid\">\n    <tbody\n      si-calendar-body\n      [focusedDate]=\"focusedDate()\"\n      [compareAdapter]=\"compareAdapter\"\n      [startDate]=\"startDate()\"\n      [endDate]=\"endDate()\"\n      [enableRangeSelection]=\"isRangeSelection()\"\n      [previewRange]=\"previewRange()\"\n      [rows]=\"monthCells\"\n      [activeHover]=\"activeHover()\"\n      (activeHoverChange)=\"onActiveHoverChange($event)\"\n      (selectedValueChange)=\"emitSelectedValue($event)\"\n      (focusedDateChange)=\"emitFocusedDate($event)\"\n      (keydown)=\"calendarBodyKeyDown($event)\"\n    >\n    </tbody>\n  </table>\n</div>\n<div class=\"footer\"></div>\n", dependencies: [{ kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMonthSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMonthSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-month-selection', imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-month-selection', imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe], host: {
                         class: 'd-flex flex-column gap-6'
                     }, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel()\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setYearOffset(-1)\"\n  />\n  <button\n    type=\"button\"\n    class=\"open-year-view flex-fill mx-4 btn btn-tertiary calendar-button\"\n    (click)=\"emitViewChange()\"\n  >\n    {{ focusedDate() | date: 'yyyy' }}\n  </button>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel()\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setYearOffset(1)\"\n  />\n</div>\n<div class=\"calendar-table\">\n  <table class=\"px-9\" role=\"grid\">\n    <tbody\n      si-calendar-body\n      [focusedDate]=\"focusedDate()\"\n      [compareAdapter]=\"compareAdapter\"\n      [startDate]=\"startDate()\"\n      [endDate]=\"endDate()\"\n      [enableRangeSelection]=\"isRangeSelection()\"\n      [previewRange]=\"previewRange()\"\n      [rows]=\"monthCells\"\n      [activeHover]=\"activeHover()\"\n      (activeHoverChange)=\"onActiveHoverChange($event)\"\n      (selectedValueChange)=\"emitSelectedValue($event)\"\n      (focusedDateChange)=\"emitFocusedDate($event)\"\n      (keydown)=\"calendarBodyKeyDown($event)\"\n    >\n    </tbody>\n  </table>\n</div>\n<div class=\"footer\"></div>\n" }]
         }], propDecorators: { months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedDate", required: true }] }, { type: i0.Output, args: ["focusedDateChange"] }], activeMonthChange: [{ type: i0.Output, args: ["activeMonthChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], triggerEsc: [{
@@ -1796,7 +1849,8 @@ class SiYearSelectionComponent extends SiInitialFocusComponent {
     /**
      * The active date, the cell which will receive the focus.
      */
-    focusedDate = model.required(...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
+    focusedDate = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
     /** Emits when the active focused date changed to another month / year, typically during keyboard navigation. */
     yearRangeChange = output();
     /** Listen Escape event to switch view back */
@@ -1810,9 +1864,11 @@ class SiYearSelectionComponent extends SiInitialFocusComponent {
     /** The number of years which shall be displayed, this number should be even and dividable by columnCount */
     yearsToDisplay = 18;
     /** Lower windows bound for displayed year range */
-    fromYear = signal(undefined, ...(ngDevMode ? [{ debugName: "fromYear" }] : []));
+    fromYear = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fromYear" }] : /* istanbul ignore next */ []));
     /** Upper windows bound for displayed year range */
-    toYear = signal(undefined, ...(ngDevMode ? [{ debugName: "toYear" }] : []));
+    toYear = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toYear" }] : /* istanbul ignore next */ []));
     /**
      * The current visible list of calendar years.
      * Every time the focusedDate changes to another year the list will be rebuilt.
@@ -1829,7 +1885,8 @@ class SiYearSelectionComponent extends SiInitialFocusComponent {
         const min = minDate(minDate$1, minMonth);
         return (this.compareAdapter.isEqual(this.fromYear(), min) ||
             this.compareAdapter.isAfter(min, this.fromYear()));
-    }, ...(ngDevMode ? [{ debugName: "isPreviousButtonDisabled" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPreviousButtonDisabled" }] : /* istanbul ignore next */ []));
     /** Is next button  disabled  based on the maxDate */
     isNextButtonDisabled = computed(() => {
         const maxDate = this.maxDate();
@@ -1838,7 +1895,8 @@ class SiYearSelectionComponent extends SiInitialFocusComponent {
         }
         return (this.compareAdapter.isEqual(this.toYear(), maxDate) ||
             this.compareAdapter.isAfter(this.toYear(), maxDate));
-    }, ...(ngDevMode ? [{ debugName: "isNextButtonDisabled" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNextButtonDisabled" }] : /* istanbul ignore next */ []));
     ngOnChanges(changes) {
         if (changes.startDate || changes.focusedDate || changes.maxDate || changes.minDate) {
             this.initView();
@@ -1982,12 +2040,12 @@ class SiYearSelectionComponent extends SiInitialFocusComponent {
             this.initView();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiYearSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiYearSelectionComponent, isStandalone: true, selector: "si-year-selection", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", yearRangeChange: "yearRangeChange" }, host: { listeners: { "keydown.Escape": "triggerEsc($event)" }, classAttribute: "d-flex flex-column gap-6" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel()\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"changeVisibleYearRange(-1)\"\n  />\n  <span class=\"year-range-label flex-fill mx-4 si-h4 text-secondary calendar-button\">\n    {{ fromYear() | date: 'yyyy' }} - {{ toYear() | date: 'yyyy' }}\n  </span>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel()\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"changeVisibleYearRange(1)\"\n  />\n</div>\n<div class=\"calendar-table\">\n  <table class=\"px-9\" role=\"grid\">\n    <tbody\n      si-calendar-body\n      [focusedDate]=\"focusedDate()\"\n      [compareAdapter]=\"compareAdapter\"\n      [startDate]=\"startDate()\"\n      [endDate]=\"endDate()\"\n      [enableRangeSelection]=\"isRangeSelection()\"\n      [previewRange]=\"previewRange()\"\n      [rows]=\"yearCells\"\n      (selectedValueChange)=\"emitSelectedValue($event)\"\n      (keydown)=\"calendarBodyKeyDown($event)\"\n    >\n    </tbody>\n  </table>\n</div>\n<div class=\"footer\"></div>\n", dependencies: [{ kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiYearSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SiYearSelectionComponent, isStandalone: true, selector: "si-year-selection", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", yearRangeChange: "yearRangeChange" }, host: { listeners: { "keydown.Escape": "triggerEsc($event)" }, classAttribute: "d-flex flex-column gap-6" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel()\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"changeVisibleYearRange(-1)\"\n  />\n  <span class=\"year-range-label flex-fill mx-4 si-h4 text-secondary calendar-button\">\n    {{ fromYear() | date: 'yyyy' }} - {{ toYear() | date: 'yyyy' }}\n  </span>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel()\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"changeVisibleYearRange(1)\"\n  />\n</div>\n<div class=\"calendar-table\">\n  <table class=\"px-9\" role=\"grid\">\n    <tbody\n      si-calendar-body\n      [focusedDate]=\"focusedDate()\"\n      [compareAdapter]=\"compareAdapter\"\n      [startDate]=\"startDate()\"\n      [endDate]=\"endDate()\"\n      [enableRangeSelection]=\"isRangeSelection()\"\n      [previewRange]=\"previewRange()\"\n      [rows]=\"yearCells\"\n      (selectedValueChange)=\"emitSelectedValue($event)\"\n      (keydown)=\"calendarBodyKeyDown($event)\"\n    >\n    </tbody>\n  </table>\n</div>\n<div class=\"footer\"></div>\n", dependencies: [{ kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiYearSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiYearSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-year-selection', imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-year-selection', imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe], host: {
                         class: 'd-flex flex-column gap-6'
                     }, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel()\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"changeVisibleYearRange(-1)\"\n  />\n  <span class=\"year-range-label flex-fill mx-4 si-h4 text-secondary calendar-button\">\n    {{ fromYear() | date: 'yyyy' }} - {{ toYear() | date: 'yyyy' }}\n  </span>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel()\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"changeVisibleYearRange(1)\"\n  />\n</div>\n<div class=\"calendar-table\">\n  <table class=\"px-9\" role=\"grid\">\n    <tbody\n      si-calendar-body\n      [focusedDate]=\"focusedDate()\"\n      [compareAdapter]=\"compareAdapter\"\n      [startDate]=\"startDate()\"\n      [endDate]=\"endDate()\"\n      [enableRangeSelection]=\"isRangeSelection()\"\n      [previewRange]=\"previewRange()\"\n      [rows]=\"yearCells\"\n      (selectedValueChange)=\"emitSelectedValue($event)\"\n      (keydown)=\"calendarBodyKeyDown($event)\"\n    >\n    </tbody>\n  </table>\n</div>\n<div class=\"footer\"></div>\n" }]
         }], propDecorators: { focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedDate", required: true }] }, { type: i0.Output, args: ["focusedDateChange"] }], yearRangeChange: [{ type: i0.Output, args: ["yearRangeChange"] }], triggerEsc: [{
@@ -2010,7 +2068,8 @@ class SiTimepickerComponent {
      * `__si-timepicker-${SiTimepickerComponent.idCounter++}`
      * ```
      */
-    id = input(`__si-timepicker-${SiTimepickerComponent.idCounter++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`__si-timepicker-${SiTimepickerComponent.idCounter++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     labelledby = inject(new HostAttributeToken('aria-labelledby'), {
         optional: true
     }) ?? `${this.id()}-label`;
@@ -2020,146 +2079,165 @@ class SiTimepickerComponent {
      * @defaultValue false
      */
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
     /**
      * Visible label for the hours input.
      *
      * @defaultValue 'hh'
      */
-    hoursLabel = input('hh', ...(ngDevMode ? [{ debugName: "hoursLabel" }] : []));
+    hoursLabel = input('hh', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoursLabel" }] : /* istanbul ignore next */ []));
     /**
      * Visible label for the minutes input.
      *
      * @defaultValue 'mm'
      */
-    minutesLabel = input('mm', ...(ngDevMode ? [{ debugName: "minutesLabel" }] : []));
+    minutesLabel = input('mm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minutesLabel" }] : /* istanbul ignore next */ []));
     /**
      * Visible label for the seconds input.
      *
      * @defaultValue 'ss'
      */
-    secondsLabel = input('ss', ...(ngDevMode ? [{ debugName: "secondsLabel" }] : []));
+    secondsLabel = input('ss', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondsLabel" }] : /* istanbul ignore next */ []));
     /**
      * Visible label for the milliseconds input.
      *
      * @defaultValue 'ms'
      */
-    millisecondsLabel = input('ms', ...(ngDevMode ? [{ debugName: "millisecondsLabel" }] : []));
+    millisecondsLabel = input('ms', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "millisecondsLabel" }] : /* istanbul ignore next */ []));
     /**
      * Hide the labels of the input fields.
      * @defaultValue false
      */
-    hideLabels = input(false, { ...(ngDevMode ? { debugName: "hideLabels" } : {}), transform: booleanAttribute });
+    hideLabels = input(false, { ...(ngDevMode ? { debugName: "hideLabels" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_DATEPICKER.HOURS:Hours`)
      * ```
      */
-    hoursAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.HOURS:Hours`), ...(ngDevMode ? [{ debugName: "hoursAriaLabel" }] : []));
+    hoursAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.HOURS:Hours`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoursAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_DATEPICKER.MINUTES:Minutes`)
      * ```
      */
-    minutesAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.MINUTES:Minutes`), ...(ngDevMode ? [{ debugName: "minutesAriaLabel" }] : []));
+    minutesAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.MINUTES:Minutes`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minutesAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_DATEPICKER.SECONDS:Seconds`)
      * ```
      */
-    secondsAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.SECONDS:Seconds`), ...(ngDevMode ? [{ debugName: "secondsAriaLabel" }] : []));
+    secondsAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.SECONDS:Seconds`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondsAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`)
      * ```
      */
-    millisecondsAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`), ...(ngDevMode ? [{ debugName: "millisecondsAriaLabel" }] : []));
+    millisecondsAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "millisecondsAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Placeholder for the hours input.
      *
      * @defaultValue 'hh'
      */
-    hoursPlaceholder = input('hh', ...(ngDevMode ? [{ debugName: "hoursPlaceholder" }] : []));
+    hoursPlaceholder = input('hh', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoursPlaceholder" }] : /* istanbul ignore next */ []));
     /**
      * Placeholder for the minutes input.
      *
      * @defaultValue 'mm'
      */
-    minutesPlaceholder = input('mm', ...(ngDevMode ? [{ debugName: "minutesPlaceholder" }] : []));
+    minutesPlaceholder = input('mm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minutesPlaceholder" }] : /* istanbul ignore next */ []));
     /**
      * Placeholder for the seconds input.
      *
      * @defaultValue 'ss'
      */
-    secondsPlaceholder = input('ss', ...(ngDevMode ? [{ debugName: "secondsPlaceholder" }] : []));
+    secondsPlaceholder = input('ss', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondsPlaceholder" }] : /* istanbul ignore next */ []));
     /**
      * Placeholder for the milliseconds input.
      *
      * @defaultValue 'ms'
      */
-    millisecondsPlaceholder = input('ms', ...(ngDevMode ? [{ debugName: "millisecondsPlaceholder" }] : []));
+    millisecondsPlaceholder = input('ms', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "millisecondsPlaceholder" }] : /* istanbul ignore next */ []));
     /** Custom labels for the AM and PM options. */
-    meridians = input(...(ngDevMode ? [undefined, { debugName: "meridians" }] : []));
+    meridians = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meridians" }] : /* istanbul ignore next */ []));
     /**
      * Visible label for the AM/PM selector.
      *
      * @defaultValue 'am/pm'
      */
-    meridiansLabel = input('am/pm', ...(ngDevMode ? [{ debugName: "meridiansLabel" }] : []));
+    meridiansLabel = input('am/pm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meridiansLabel" }] : /* istanbul ignore next */ []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_DATEPICKER.PERIOD:Period`)
      * ```
      */
-    meridiansAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.PERIOD:Period`), ...(ngDevMode ? [{ debugName: "meridiansAriaLabel" }] : []));
+    meridiansAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.PERIOD:Period`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meridiansAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Whether the minutes input is displayed.
      *
      * @defaultValue true
      */
-    showMinutes = input(true, { ...(ngDevMode ? { debugName: "showMinutes" } : {}), transform: booleanAttribute });
+    showMinutes = input(true, { ...(ngDevMode ? { debugName: "showMinutes" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether the seconds input is displayed.
      *
      * @defaultValue false
      */
-    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : {}), transform: booleanAttribute });
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether the milliseconds input is displayed.
      *
      * @defaultValue false
      */
-    showMilliseconds = input(false, { ...(ngDevMode ? { debugName: "showMilliseconds" } : {}), transform: booleanAttribute });
+    showMilliseconds = input(false, { ...(ngDevMode ? { debugName: "showMilliseconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Show time in 12-hour period including the select to toggle between AM/PM.
      */
-    showMeridian = input(...(ngDevMode ? [undefined, { debugName: "showMeridian" }] : []));
+    showMeridian = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "showMeridian" }] : /* istanbul ignore next */ []));
     /**
      * A minimum time limit. The date part of the date object will be ignored.
      */
-    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+    min = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
     /**
      * A maximum time limit. The date part of the date object will be ignored.
      */
-    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    max = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
     /**
      * Whether the time inputs are read-only.
      *
      * @defaultValue false
      */
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Emits whether the entered time components form a valid time. */
     isValid = output();
     /** Emits the selected meridian when it changes. */
     meridianChange = output();
     /** Emits when the user presses Enter in the final time input. */
     inputCompleted = output();
-    inputParts = viewChildren('inputPart', ...(ngDevMode ? [{ debugName: "inputParts" }] : []));
+    inputParts = viewChildren('inputPart', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputParts" }] : /* istanbul ignore next */ []));
     /**
      * This ID will be bound to the `aria-describedby` attribute of the timepicker.
      * Use this to reference the element containing the error message(s) for the timepicker.
@@ -2170,17 +2248,22 @@ class SiTimepickerComponent {
      * `${this.id()}-errormessage`
      * ```
      */
-    errormessageId = input(`${this.id()}-errormessage`, ...(ngDevMode ? [{ debugName: "errormessageId" }] : []));
+    errormessageId = input(`${this.id()}-errormessage`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errormessageId" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     // The following are the time values for the ui.
     periods = computed(() => {
         const meridians = this.meridians();
         return meridians?.length ? meridians : this.periodDefaults;
-    }, ...(ngDevMode ? [{ debugName: "periods" }] : []));
-    use12HourClock = computed(() => this.showMeridian() ?? getLocaleTimeFormat(this.locale, FormatWidth.Full).includes('a'), ...(ngDevMode ? [{ debugName: "use12HourClock" }] : []));
-    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    meridian = signal('', ...(ngDevMode ? [{ debugName: "meridian" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "periods" }] : /* istanbul ignore next */ []));
+    use12HourClock = computed(() => this.showMeridian() ?? getLocaleTimeFormat(this.locale, FormatWidth.Full).includes('a'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "use12HourClock" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    meridian = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meridian" }] : /* istanbul ignore next */ []));
     units = computed(() => {
         const config = [
             {
@@ -2224,7 +2307,8 @@ class SiTimepickerComponent {
             });
         }
         return config;
-    }, ...(ngDevMode ? [{ debugName: "units" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "units" }] : /* istanbul ignore next */ []));
     /* Input fields state */
     timeControls = this.formBuilder.group({
         hours: this.formBuilder.nonNullable.control('', [this.validateTime('hours')]),
@@ -2243,7 +2327,8 @@ class SiTimepickerComponent {
         }
         return false;
     }
-    disabledNgControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : []));
+    disabledNgControl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : /* istanbul ignore next */ []));
     /**
      * Holds the time as date object that is presented by this control.
      */
@@ -2596,8 +2681,8 @@ class SiTimepickerComponent {
             return null;
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiTimepickerComponent, isStandalone: true, selector: "si-timepicker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsLabel: { classPropertyName: "secondsLabel", publicName: "secondsLabel", isSignal: true, isRequired: false, transformFunction: null }, millisecondsLabel: { classPropertyName: "millisecondsLabel", publicName: "millisecondsLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabels: { classPropertyName: "hideLabels", publicName: "hideLabels", isSignal: true, isRequired: false, transformFunction: null }, hoursAriaLabel: { classPropertyName: "hoursAriaLabel", publicName: "hoursAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesAriaLabel: { classPropertyName: "minutesAriaLabel", publicName: "minutesAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsAriaLabel: { classPropertyName: "secondsAriaLabel", publicName: "secondsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, millisecondsAriaLabel: { classPropertyName: "millisecondsAriaLabel", publicName: "millisecondsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, hoursPlaceholder: { classPropertyName: "hoursPlaceholder", publicName: "hoursPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minutesPlaceholder: { classPropertyName: "minutesPlaceholder", publicName: "minutesPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, secondsPlaceholder: { classPropertyName: "secondsPlaceholder", publicName: "secondsPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, millisecondsPlaceholder: { classPropertyName: "millisecondsPlaceholder", publicName: "millisecondsPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, meridians: { classPropertyName: "meridians", publicName: "meridians", isSignal: true, isRequired: false, transformFunction: null }, meridiansLabel: { classPropertyName: "meridiansLabel", publicName: "meridiansLabel", isSignal: true, isRequired: false, transformFunction: null }, meridiansAriaLabel: { classPropertyName: "meridiansAriaLabel", publicName: "meridiansAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, showMinutes: { classPropertyName: "showMinutes", publicName: "showMinutes", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showMilliseconds: { classPropertyName: "showMilliseconds", publicName: "showMilliseconds", isSignal: true, isRequired: false, transformFunction: null }, showMeridian: { classPropertyName: "showMeridian", publicName: "showMeridian", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isValid: "isValid", meridianChange: "meridianChange", inputCompleted: "inputCompleted" }, host: { attributes: { "role": "group" }, properties: { "class.readonly": "readonly()", "attr.aria-labelledby": "labelledby" }, classAttribute: "form-custom-control" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiTimepickerComponent, isStandalone: true, selector: "si-timepicker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsLabel: { classPropertyName: "secondsLabel", publicName: "secondsLabel", isSignal: true, isRequired: false, transformFunction: null }, millisecondsLabel: { classPropertyName: "millisecondsLabel", publicName: "millisecondsLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabels: { classPropertyName: "hideLabels", publicName: "hideLabels", isSignal: true, isRequired: false, transformFunction: null }, hoursAriaLabel: { classPropertyName: "hoursAriaLabel", publicName: "hoursAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesAriaLabel: { classPropertyName: "minutesAriaLabel", publicName: "minutesAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsAriaLabel: { classPropertyName: "secondsAriaLabel", publicName: "secondsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, millisecondsAriaLabel: { classPropertyName: "millisecondsAriaLabel", publicName: "millisecondsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, hoursPlaceholder: { classPropertyName: "hoursPlaceholder", publicName: "hoursPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minutesPlaceholder: { classPropertyName: "minutesPlaceholder", publicName: "minutesPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, secondsPlaceholder: { classPropertyName: "secondsPlaceholder", publicName: "secondsPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, millisecondsPlaceholder: { classPropertyName: "millisecondsPlaceholder", publicName: "millisecondsPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, meridians: { classPropertyName: "meridians", publicName: "meridians", isSignal: true, isRequired: false, transformFunction: null }, meridiansLabel: { classPropertyName: "meridiansLabel", publicName: "meridiansLabel", isSignal: true, isRequired: false, transformFunction: null }, meridiansAriaLabel: { classPropertyName: "meridiansAriaLabel", publicName: "meridiansAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, showMinutes: { classPropertyName: "showMinutes", publicName: "showMinutes", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showMilliseconds: { classPropertyName: "showMilliseconds", publicName: "showMilliseconds", isSignal: true, isRequired: false, transformFunction: null }, showMeridian: { classPropertyName: "showMeridian", publicName: "showMeridian", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isValid: "isValid", meridianChange: "meridianChange", inputCompleted: "inputCompleted" }, host: { attributes: { "role": "group" }, properties: { "class.readonly": "readonly()", "attr.aria-labelledby": "labelledby" }, classAttribute: "form-custom-control" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SiTimepickerComponent,
@@ -2612,9 +2697,9 @@ class SiTimepickerComponent {
                 provide: SI_FORM_ITEM_CONTROL,
                 useExisting: SiTimepickerComponent
             }
-        ], viewQueries: [{ propertyName: "inputParts", predicate: ["inputPart"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label>\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [formControl]=\"timeControls.controls[config.name]\"\n        [name]=\"config.name\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}:host.ng-touched.ng-invalid:not(:has(.ng-touched.ng-invalid)) .form-control{--border-color: var(--element-status-danger)}:host input{inline-size:calc(3ch + 16px)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputParts", predicate: ["inputPart"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label>\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [formControl]=\"timeControls.controls[config.name]\"\n        [name]=\"config.name\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}:host.ng-touched.ng-invalid:not(:has(.ng-touched.ng-invalid)) .form-control{--border-color: var(--si-sys-border-danger)}:host input{inline-size:calc(3ch + 2 * var(--si-sys-sizing-spacing-x-40))}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-timepicker', imports: [A11yModule, NgTemplateOutlet, ReactiveFormsModule, SiTranslatePipe], providers: [
                         {
@@ -2631,12 +2716,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: SI_FORM_ITEM_CONTROL,
                             useExisting: SiTimepickerComponent
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    ], host: {
                         role: 'group',
                         class: 'form-custom-control',
                         '[class.readonly]': 'readonly()',
                         '[attr.aria-labelledby]': 'labelledby'
-                    }, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label>\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [formControl]=\"timeControls.controls[config.name]\"\n        [name]=\"config.name\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}:host.ng-touched.ng-invalid:not(:has(.ng-touched.ng-invalid)) .form-control{--border-color: var(--element-status-danger)}:host input{inline-size:calc(3ch + 16px)}\n"] }]
+                    }, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label>\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [formControl]=\"timeControls.controls[config.name]\"\n        [name]=\"config.name\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}:host.ng-touched.ng-invalid:not(:has(.ng-touched.ng-invalid)) .form-control{--border-color: var(--si-sys-border-danger)}:host input{inline-size:calc(3ch + 2 * var(--si-sys-sizing-spacing-x-40))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], secondsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsLabel", required: false }] }], millisecondsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "millisecondsLabel", required: false }] }], hideLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabels", required: false }] }], hoursAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursAriaLabel", required: false }] }], minutesAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesAriaLabel", required: false }] }], secondsAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsAriaLabel", required: false }] }], millisecondsAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "millisecondsAriaLabel", required: false }] }], hoursPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursPlaceholder", required: false }] }], minutesPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesPlaceholder", required: false }] }], secondsPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsPlaceholder", required: false }] }], millisecondsPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "millisecondsPlaceholder", required: false }] }], meridians: [{ type: i0.Input, args: [{ isSignal: true, alias: "meridians", required: false }] }], meridiansLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "meridiansLabel", required: false }] }], meridiansAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "meridiansAriaLabel", required: false }] }], showMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinutes", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], showMilliseconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMilliseconds", required: false }] }], showMeridian: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMeridian", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], isValid: [{ type: i0.Output, args: ["isValid"] }], meridianChange: [{ type: i0.Output, args: ["meridianChange"] }], inputCompleted: [{ type: i0.Output, args: ["inputCompleted"] }], inputParts: [{ type: i0.ViewChildren, args: ['inputPart', { isSignal: true }] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }] } });
 
 /**
@@ -2650,35 +2735,41 @@ class SiDatepickerComponent {
      * The date which is currently focused
      * Compare to the selected date or range the calendar requires to have one element to focus.
      */
-    focusedDate = model(...(ngDevMode ? [undefined, { debugName: "focusedDate" }] : []));
+    focusedDate = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "focusedDate" }] : /* istanbul ignore next */ []));
     /**
      * The selected date of the datepicker. Use for
      * initialization and for bidirectional binding.
      */
-    date = model(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
+    date = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
     /**
      * The selected date range of the datepicker. Use for
      * initialization and for bidirectional binding.
      */
-    dateRange = model(...(ngDevMode ? [undefined, { debugName: "dateRange" }] : []));
+    dateRange = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dateRange" }] : /* istanbul ignore next */ []));
     /**
      * Role of this calendar when a date range is displayed across two calendars.
      *
      * @internal
      */
-    dateRangeRole = input(...(ngDevMode ? [undefined, { debugName: "dateRangeRole" }] : []));
+    dateRangeRole = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dateRangeRole" }] : /* istanbul ignore next */ []));
     /**
      * Set initial focus to calendar body.
      *
      * @defaultValue false
      */
-    initialFocus = input(false, ...(ngDevMode ? [{ debugName: "initialFocus" }] : []));
+    initialFocus = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialFocus" }] : /* istanbul ignore next */ []));
     /**
      * Disabled the optional visible time picker.
      *
      * @defaultValue false
      */
-    disabledTime = model(false, ...(ngDevMode ? [{ debugName: "disabledTime" }] : []));
+    disabledTime = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledTime" }] : /* istanbul ignore next */ []));
     /**
      * Object to configure the datepicker.
      *
@@ -2687,7 +2778,8 @@ class SiDatepickerComponent {
      * {}
      * ```
      */
-    config = model({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    config = model({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     /**
      * Aria label for the previous button. Needed for a11y.
      *
@@ -2696,7 +2788,8 @@ class SiDatepickerComponent {
      * t(() => $localize`:@@SI_DATEPICKER.PREVIOUS:Previous`)
      * ```
      */
-    previousLabel = input(t(() => $localize `:@@SI_DATEPICKER.PREVIOUS:Previous`), ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    previousLabel = input(t(() => $localize `:@@SI_DATEPICKER.PREVIOUS:Previous`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []));
     /**
      * Aria label for the next button. Needed for a11y.
      *
@@ -2705,39 +2798,31 @@ class SiDatepickerComponent {
      * t(() => $localize`:@@SI_DATEPICKER.NEXT:Next`)
      * ```
      */
-    nextLabel = input(t(() => $localize `:@@SI_DATEPICKER.NEXT:Next`), ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    nextLabel = input(t(() => $localize `:@@SI_DATEPICKER.NEXT:Next`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
     /**
      * Aria label for week number column
      *
-     * @deprecated Use `calendarWeekLabel` instead.
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`)
      * ```
      */
-    calenderWeekLabel = input(...(ngDevMode ? [undefined, { debugName: "calenderWeekLabel" }] : []));
-    /**
-     * Aria label for week number column
-     *
-     * @defaultValue
-     * ```
-     * t(() => $localize`:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`)
-     * ```
-     */
-    calendarWeekLabel = input(t(() => $localize `:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`), ...(ngDevMode ? [{ debugName: "calendarWeekLabel" }] : []));
-    derivedWeekLabel = computed(() => this.calenderWeekLabel() ?? this.calendarWeekLabel(), ...(ngDevMode ? [{ debugName: "derivedWeekLabel" }] : []));
+    calendarWeekLabel = input(t(() => $localize `:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarWeekLabel" }] : /* istanbul ignore next */ []));
     /**
      * Enable/disable 12H mode in timepicker. Defaults to locale
      *
      * @defaultValue undefined
      */
-    time12h = input(undefined, { ...(ngDevMode ? { debugName: "time12h" } : {}), transform: booleanAttribute });
+    time12h = input(undefined, { ...(ngDevMode ? { debugName: "time12h" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Use this to force date range operation to select either start date or end date.
      *
      * @defaultValue 'START'
      */
-    rangeType = model('START', ...(ngDevMode ? [{ debugName: "rangeType" }] : []));
+    rangeType = model('START', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeType" }] : /* istanbul ignore next */ []));
     /**
      * Optional input to control the minimum month the datepicker can show and the user can navigate.
      * The `minMonth` can be larger than the `minDate` This option enables the usage of multiple
@@ -2745,7 +2830,8 @@ class SiDatepickerComponent {
      * shows a earlier month the the more right one.
      * @internal
      */
-    minMonth = input(...(ngDevMode ? [undefined, { debugName: "minMonth" }] : []));
+    minMonth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minMonth" }] : /* istanbul ignore next */ []));
     /**
      * Optional input to control the maximum month the datepicker can show and the user can navigate.
      * The `maxMonth` can be smaller than the `maxDate` This option enables the usage of multiple
@@ -2753,23 +2839,27 @@ class SiDatepickerComponent {
      * shows a earlier month the the more right one.
      * @internal
      */
-    maxMonth = input(...(ngDevMode ? [undefined, { debugName: "maxMonth" }] : []));
+    maxMonth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxMonth" }] : /* istanbul ignore next */ []));
     /**
      * Option to hide the time switch.
      *
      * @defaultValue false
      */
-    hideTimeToggle = input(false, ...(ngDevMode ? [{ debugName: "hideTimeToggle" }] : []));
+    hideTimeToggle = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideTimeToggle" }] : /* istanbul ignore next */ []));
     /**
      * Whether the calendar is hidden while retaining the optional timepicker.
      *
      * @internal
      */
-    hideCalendar = input(false, ...(ngDevMode ? [{ debugName: "hideCalendar" }] : []));
+    hideCalendar = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideCalendar" }] : /* istanbul ignore next */ []));
     /**
      * Optional timepicker label.
      */
-    timepickerLabel = input(...(ngDevMode ? [undefined, { debugName: "timepickerLabel" }] : []));
+    timepickerLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "timepickerLabel" }] : /* istanbul ignore next */ []));
     get startDate() {
         return this.config().enableDateRange ? this.dateRange()?.start : this.date();
     }
@@ -2792,7 +2882,8 @@ class SiDatepickerComponent {
     defaultEnableTimeText = t(() => $localize `:@@SI_DATEPICKER.ENABLED_TIME_TEXT:Consider time`);
     includeTimeLabel = computed(() => this.disabledTime()
         ? (this.config().disabledTimeText ?? this.defaultDisabledTimeText)
-        : (this.config().enabledTimeText ?? this.defaultEnableTimeText), ...(ngDevMode ? [{ debugName: "includeTimeLabel" }] : []));
+        : (this.config().enabledTimeText ?? this.defaultEnableTimeText), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "includeTimeLabel" }] : /* istanbul ignore next */ []));
     get weekStartDay() {
         return this.config().weekStartDay ?? this.localeWeekStart;
     }
@@ -2802,7 +2893,8 @@ class SiDatepickerComponent {
     /**
      * The active view
      */
-    view = signal('week', ...(ngDevMode ? [{ debugName: "view" }] : []));
+    view = signal('week', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
     /**
      * Get the current shown view.
      */
@@ -2815,11 +2907,15 @@ class SiDatepickerComponent {
             default:
                 return this.daySelection();
         }
-    }, ...(ngDevMode ? [{ debugName: "activeView" }] : []));
-    actualFocusedDate = computed(() => this.focusedDate() ?? today(), ...(ngDevMode ? [{ debugName: "actualFocusedDate" }] : []));
-    requireFocus = signal(this.initialFocus(), ...(ngDevMode ? [{ debugName: "requireFocus" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeView" }] : /* istanbul ignore next */ []));
+    actualFocusedDate = computed(() => this.focusedDate() ?? today(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actualFocusedDate" }] : /* istanbul ignore next */ []));
+    requireFocus = signal(this.initialFocus(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "requireFocus" }] : /* istanbul ignore next */ []));
     /** When the user switch from the year or month view via keyboard selection we force the focus. */
-    forceFocus = computed(() => this.requireFocus() || this.initialFocus(), ...(ngDevMode ? [{ debugName: "forceFocus" }] : []));
+    forceFocus = computed(() => this.requireFocus() || this.initialFocus(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forceFocus" }] : /* istanbul ignore next */ []));
     months = [];
     switchId = `__si-datepicker-switch-id-${idCounter++}`;
     timepickerId = `__si-datepicker-timepicker-id-${idCounter++}`;
@@ -2846,16 +2942,20 @@ class SiDatepickerComponent {
      */
     previousTime;
     /** Reference to the current day selection component. Shown when view === 'week' */
-    daySelection = viewChild(SiDaySelectionComponent, ...(ngDevMode ? [{ debugName: "daySelection" }] : []));
+    daySelection = viewChild(SiDaySelectionComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "daySelection" }] : /* istanbul ignore next */ []));
     /** Reference to the current month selection component. Shown when view === 'month' */
-    monthSelection = viewChild(SiMonthSelectionComponent, ...(ngDevMode ? [{ debugName: "monthSelection" }] : []));
+    monthSelection = viewChild(SiMonthSelectionComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthSelection" }] : /* istanbul ignore next */ []));
     /** Reference to the current year selection component. Shown when view === 'year' */
-    yearSelection = viewChild(SiYearSelectionComponent, ...(ngDevMode ? [{ debugName: "yearSelection" }] : []));
+    yearSelection = viewChild(SiYearSelectionComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearSelection" }] : /* istanbul ignore next */ []));
     /**
      * The cell which which has the mouse hover.
      * @internal
      */
-    activeHover = model(...(ngDevMode ? [undefined, { debugName: "activeHover" }] : []));
+    activeHover = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "activeHover" }] : /* istanbul ignore next */ []));
     constructor() {
         this.initCalendarLabels();
         const weekStart = getLocaleFirstDayOfWeek(this.locale);
@@ -3166,10 +3266,10 @@ class SiDatepickerComponent {
     onActiveHoverChange(event) {
         this.activeHover.set(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiDatepickerComponent, isStandalone: true, selector: "si-datepicker", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, dateRangeRole: { classPropertyName: "dateRangeRole", publicName: "dateRangeRole", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, disabledTime: { classPropertyName: "disabledTime", publicName: "disabledTime", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, calenderWeekLabel: { classPropertyName: "calenderWeekLabel", publicName: "calenderWeekLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekLabel: { classPropertyName: "calendarWeekLabel", publicName: "calendarWeekLabel", isSignal: true, isRequired: false, transformFunction: null }, time12h: { classPropertyName: "time12h", publicName: "time12h", isSignal: true, isRequired: false, transformFunction: null }, rangeType: { classPropertyName: "rangeType", publicName: "rangeType", isSignal: true, isRequired: false, transformFunction: null }, minMonth: { classPropertyName: "minMonth", publicName: "minMonth", isSignal: true, isRequired: false, transformFunction: null }, maxMonth: { classPropertyName: "maxMonth", publicName: "maxMonth", isSignal: true, isRequired: false, transformFunction: null }, hideTimeToggle: { classPropertyName: "hideTimeToggle", publicName: "hideTimeToggle", isSignal: true, isRequired: false, transformFunction: null }, hideCalendar: { classPropertyName: "hideCalendar", publicName: "hideCalendar", isSignal: true, isRequired: false, transformFunction: null }, timepickerLabel: { classPropertyName: "timepickerLabel", publicName: "timepickerLabel", isSignal: true, isRequired: false, transformFunction: null }, activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", date: "dateChange", dateRange: "dateRangeChange", disabledTime: "disabledTimeChange", config: "configChange", rangeType: "rangeTypeChange", activeHover: "activeHoverChange" }, viewQueries: [{ propertyName: "daySelection", first: true, predicate: SiDaySelectionComponent, descendants: true, isSignal: true }, { propertyName: "monthSelection", first: true, predicate: SiMonthSelectionComponent, descendants: true, isSignal: true }, { propertyName: "yearSelection", first: true, predicate: SiYearSelectionComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hideCalendar()) {\n  <div class=\"text-center pb-6 calendar\">\n    @switch (view()) {\n      @case ('year') {\n        <si-year-selection\n          [focusedDate]=\"actualFocusedDate()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          (selectedValueChange)=\"activeYearChange($event)\"\n        />\n      }\n      @case ('month') {\n        <si-month-selection\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [months]=\"months\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"activeMonthChange($event)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n      @case ('week') {\n        <si-day-selection\n          [initialFocus]=\"forceFocus()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"dateRange()?.end\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [hideWeekNumbers]=\"hideWeekNumbers\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [weekStartDay]=\"weekStartDay\"\n          [calendarWeekLabel]=\"derivedWeekLabel()\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [todayLabel]=\"config().todayText\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"selectionChange($event!)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n    }\n  </div>\n}\n@if (this.config().showTime) {\n  <div\n    class=\"timepicker-container px-9 pb-6\"\n    [class.pt-6]=\"!hideCalendar()\"\n    [class.border-top]=\"!hideCalendar()\"\n  >\n    @if (!config().mandatoryTime && !hideTimeToggle()) {\n      <div class=\"mb-5 form-check form-switch\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          role=\"switch\"\n          [id]=\"switchId\"\n          [checked]=\"!disabledTime()\"\n          (change)=\"toggleDisabledTime()\"\n        />\n        <label class=\"form-check-label\" [for]=\"switchId\">{{\n          includeTimeLabel() | translate\n        }}</label>\n      </div>\n    }\n    <div class=\"mt-auto\">\n      @if (timepickerLabel()) {\n        <label class=\"form-label\" [for]=\"timepickerId\">{{ timepickerLabel() | translate }}</label>\n      }\n      <si-timepicker\n        #timePicker\n        [id]=\"timepickerId\"\n        [formControl]=\"time\"\n        [hoursLabel]=\"config().hoursLabel ?? timePicker.hoursLabel()\"\n        [minutesLabel]=\"config().minutesLabel ?? timePicker.minutesLabel()\"\n        [secondsLabel]=\"config().secondsLabel ?? timePicker.secondsLabel()\"\n        [millisecondsLabel]=\"config().millisecondsLabel ?? timePicker.millisecondsLabel()\"\n        [hideLabels]=\"config().hideLabels ?? timePicker.hideLabels()\"\n        [hoursAriaLabel]=\"config().hoursAriaLabel ?? timePicker.hoursAriaLabel()\"\n        [minutesAriaLabel]=\"config().minutesAriaLabel ?? timePicker.minutesAriaLabel()\"\n        [secondsAriaLabel]=\"config().secondsAriaLabel ?? timePicker.secondsAriaLabel()\"\n        [millisecondsAriaLabel]=\"\n          config().millisecondsAriaLabel ?? timePicker.millisecondsAriaLabel()\n        \"\n        [hoursPlaceholder]=\"config().hoursPlaceholder ?? timePicker.hoursPlaceholder()\"\n        [minutesPlaceholder]=\"config().minutesPlaceholder ?? timePicker.minutesPlaceholder()\"\n        [secondsPlaceholder]=\"config().secondsPlaceholder ?? timePicker.secondsPlaceholder()\"\n        [millisecondsPlaceholder]=\"\n          config().millisecondsPlaceholder ?? timePicker.millisecondsPlaceholder()\n        \"\n        [meridians]=\"config().meridians ?? timePicker.meridians()\"\n        [meridiansLabel]=\"config().meridiansLabel ?? timePicker.meridiansLabel()\"\n        [meridiansAriaLabel]=\"config().meridiansAriaLabel ?? timePicker.meridiansAriaLabel()\"\n        [showMinutes]=\"config().showMinutes ?? true\"\n        [showSeconds]=\"config().showSeconds ?? false\"\n        [showMilliseconds]=\"config().showMilliseconds ?? false\"\n        [showMeridian]=\"time12h()\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .year:not(.disabled):not(.selected):hover,:host ::ng-deep .month:not(.disabled):not(.selected):hover,:host ::ng-deep .day:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover);color:var(--element-ui-0)}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep td,:host ::ng-deep th,:host ::ng-deep .day{block-size:2rem;line-height:2rem}:host ::ng-deep td,:host ::ng-deep th,:host ::ng-deep .day{inline-size:2rem}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{display:block;margin-inline:auto;position:relative;border:unset;background-color:unset;padding:0;cursor:pointer;border-radius:var(--element-button-radius)}:host{background:var(--element-base-1);border-radius:var(--element-radius-2);display:flex;flex-direction:column}:host ::ng-deep .header,:host ::ng-deep .footer{display:flex;align-items:center;min-block-size:calc(1rem + 16px)}:host ::ng-deep .header{padding-block:12px;padding-inline:32px;border-block-end:1px solid var(--element-ui-4)}:host ::ng-deep .header a{text-decoration:none;cursor:pointer}:host ::ng-deep .footer{margin-block-start:4px}:host ::ng-deep .calendar-table{min-block-size:calc(14rem + 24px)}:host ::ng-deep table{border-collapse:separate;border-spacing:0 3px;table-layout:fixed;margin-block-end:-3px}:host ::ng-deep .day.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .month{inline-size:8rem}:host ::ng-deep .month.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .year{inline-size:5.3333333333rem}:host ::ng-deep .year.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td,:host ::ng-deep th{padding:0;font-weight:400}:host ::ng-deep .week-num,:host ::ng-deep th{font-size:.75rem;color:var(--element-text-secondary);inline-size:2rem;cursor:default}:host ::ng-deep .today.selected:before{border-color:var(--element-ui-5)}:host ::ng-deep .today:before{position:absolute;content:\"\";inset:1px;border:1px solid var(--element-ui-1);border-radius:var(--element-radius-2);display:inline-block}:host ::ng-deep .disabled{color:var(--element-text-disabled);font-weight:400!important;cursor:default!important}:host ::ng-deep .range{background-color:var(--element-ui-4)}:host ::ng-deep .range:hover{background:var(--element-base-1-hover)}:host ::ng-deep .range:hover div.si-h4:hover{background:transparent}:host ::ng-deep .range-hover{background-color:var(--element-base-1-hover)}:host ::ng-deep .range-hover-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep td:is(.range-start,.range-end){background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) div.si-h4:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-lg:hover{background:transparent;color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) .today:before{border-color:var(--element-ui-5)}:host ::ng-deep td.range-start{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}:host ::ng-deep td.range-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep .calendar-button{font-weight:600;font-size:.875rem;line-height:1.1428571429;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SiYearSelectionComponent, selector: "si-year-selection", inputs: ["focusedDate"], outputs: ["focusedDateChange", "yearRangeChange"] }, { kind: "component", type: SiMonthSelectionComponent, selector: "si-month-selection", inputs: ["months", "focusedDate"], outputs: ["focusedDateChange", "activeMonthChange", "viewChange"] }, { kind: "component", type: SiDaySelectionComponent, selector: "si-day-selection", inputs: ["hideWeekNumbers", "weekStartDay", "focusedDate", "todayLabel", "calendarWeekLabel"], outputs: ["focusedDateChange", "activeMonthChange", "viewChange"] }, { kind: "component", type: SiTimepickerComponent, selector: "si-timepicker", inputs: ["id", "disabled", "hoursLabel", "minutesLabel", "secondsLabel", "millisecondsLabel", "hideLabels", "hoursAriaLabel", "minutesAriaLabel", "secondsAriaLabel", "millisecondsAriaLabel", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder", "millisecondsPlaceholder", "meridians", "meridiansLabel", "meridiansAriaLabel", "showMinutes", "showSeconds", "showMilliseconds", "showMeridian", "min", "max", "readonly", "errormessageId"], outputs: ["isValid", "meridianChange", "inputCompleted"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiDatepickerComponent, isStandalone: true, selector: "si-datepicker", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, dateRangeRole: { classPropertyName: "dateRangeRole", publicName: "dateRangeRole", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, disabledTime: { classPropertyName: "disabledTime", publicName: "disabledTime", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekLabel: { classPropertyName: "calendarWeekLabel", publicName: "calendarWeekLabel", isSignal: true, isRequired: false, transformFunction: null }, time12h: { classPropertyName: "time12h", publicName: "time12h", isSignal: true, isRequired: false, transformFunction: null }, rangeType: { classPropertyName: "rangeType", publicName: "rangeType", isSignal: true, isRequired: false, transformFunction: null }, minMonth: { classPropertyName: "minMonth", publicName: "minMonth", isSignal: true, isRequired: false, transformFunction: null }, maxMonth: { classPropertyName: "maxMonth", publicName: "maxMonth", isSignal: true, isRequired: false, transformFunction: null }, hideTimeToggle: { classPropertyName: "hideTimeToggle", publicName: "hideTimeToggle", isSignal: true, isRequired: false, transformFunction: null }, hideCalendar: { classPropertyName: "hideCalendar", publicName: "hideCalendar", isSignal: true, isRequired: false, transformFunction: null }, timepickerLabel: { classPropertyName: "timepickerLabel", publicName: "timepickerLabel", isSignal: true, isRequired: false, transformFunction: null }, activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", date: "dateChange", dateRange: "dateRangeChange", disabledTime: "disabledTimeChange", config: "configChange", rangeType: "rangeTypeChange", activeHover: "activeHoverChange" }, viewQueries: [{ propertyName: "daySelection", first: true, predicate: SiDaySelectionComponent, descendants: true, isSignal: true }, { propertyName: "monthSelection", first: true, predicate: SiMonthSelectionComponent, descendants: true, isSignal: true }, { propertyName: "yearSelection", first: true, predicate: SiYearSelectionComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hideCalendar()) {\n  <div class=\"text-center pb-6 calendar\">\n    @switch (view()) {\n      @case ('year') {\n        <si-year-selection\n          [focusedDate]=\"actualFocusedDate()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          (selectedValueChange)=\"activeYearChange($event)\"\n        />\n      }\n      @case ('month') {\n        <si-month-selection\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [months]=\"months\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"activeMonthChange($event)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n      @case ('week') {\n        <si-day-selection\n          [initialFocus]=\"forceFocus()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"dateRange()?.end\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [hideWeekNumbers]=\"hideWeekNumbers\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [weekStartDay]=\"weekStartDay\"\n          [calendarWeekLabel]=\"calendarWeekLabel()\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [todayLabel]=\"config().todayText\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"selectionChange($event!)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n    }\n  </div>\n}\n@if (this.config().showTime) {\n  <div\n    class=\"timepicker-container px-9 pb-6\"\n    [class.pt-6]=\"!hideCalendar()\"\n    [class.border-top]=\"!hideCalendar()\"\n  >\n    @if (!config().mandatoryTime && !hideTimeToggle()) {\n      <div class=\"mb-5 form-check form-switch\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          role=\"switch\"\n          [id]=\"switchId\"\n          [checked]=\"!disabledTime()\"\n          (change)=\"toggleDisabledTime()\"\n        />\n        <label class=\"form-check-label\" [for]=\"switchId\">{{\n          includeTimeLabel() | translate\n        }}</label>\n      </div>\n    }\n    <div class=\"mt-auto\">\n      @if (timepickerLabel()) {\n        <label class=\"form-label\" [for]=\"timepickerId\">{{ timepickerLabel() | translate }}</label>\n      }\n      <si-timepicker\n        #timePicker\n        [id]=\"timepickerId\"\n        [formControl]=\"time\"\n        [hoursLabel]=\"config().hoursLabel ?? timePicker.hoursLabel()\"\n        [minutesLabel]=\"config().minutesLabel ?? timePicker.minutesLabel()\"\n        [secondsLabel]=\"config().secondsLabel ?? timePicker.secondsLabel()\"\n        [millisecondsLabel]=\"config().millisecondsLabel ?? timePicker.millisecondsLabel()\"\n        [hideLabels]=\"config().hideLabels ?? timePicker.hideLabels()\"\n        [hoursAriaLabel]=\"config().hoursAriaLabel ?? timePicker.hoursAriaLabel()\"\n        [minutesAriaLabel]=\"config().minutesAriaLabel ?? timePicker.minutesAriaLabel()\"\n        [secondsAriaLabel]=\"config().secondsAriaLabel ?? timePicker.secondsAriaLabel()\"\n        [millisecondsAriaLabel]=\"\n          config().millisecondsAriaLabel ?? timePicker.millisecondsAriaLabel()\n        \"\n        [hoursPlaceholder]=\"config().hoursPlaceholder ?? timePicker.hoursPlaceholder()\"\n        [minutesPlaceholder]=\"config().minutesPlaceholder ?? timePicker.minutesPlaceholder()\"\n        [secondsPlaceholder]=\"config().secondsPlaceholder ?? timePicker.secondsPlaceholder()\"\n        [millisecondsPlaceholder]=\"\n          config().millisecondsPlaceholder ?? timePicker.millisecondsPlaceholder()\n        \"\n        [meridians]=\"config().meridians ?? timePicker.meridians()\"\n        [meridiansLabel]=\"config().meridiansLabel ?? timePicker.meridiansLabel()\"\n        [meridiansAriaLabel]=\"config().meridiansAriaLabel ?? timePicker.meridiansAriaLabel()\"\n        [showMinutes]=\"config().showMinutes ?? true\"\n        [showSeconds]=\"config().showSeconds ?? false\"\n        [showMilliseconds]=\"config().showMilliseconds ?? false\"\n        [showMeridian]=\"time12h()\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .year:not(.disabled):not(.selected):hover,:host ::ng-deep .month:not(.disabled):not(.selected):hover,:host ::ng-deep .day:not(.disabled):not(.selected):hover{background:var(--si-sys-background-hover);color:var(--si-sys-text-accent)}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep td,:host ::ng-deep th,:host ::ng-deep .day{block-size:2rem;line-height:2rem}:host ::ng-deep td,:host ::ng-deep th,:host ::ng-deep .day{inline-size:2rem}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{display:block;margin-inline:auto;position:relative;border:unset;background-color:unset;padding:0;cursor:pointer;border-radius:var(--element-button-radius)}:host{background:var(--si-sys-background-1);border-radius:var(--element-radius-2);display:flex;flex-direction:column}:host ::ng-deep .header,:host ::ng-deep .footer{display:flex;align-items:center;min-block-size:calc(1rem + 2 * var(--si-sys-sizing-spacing-y-40))}:host ::ng-deep .header{padding-block:var(--si-sys-sizing-spacing-y-50);padding-inline:var(--si-sys-sizing-spacing-x-90);border-block-end:1px solid var(--si-sys-border-4)}:host ::ng-deep .header a{text-decoration:none;cursor:pointer}:host ::ng-deep .footer{margin-block-start:var(--si-sys-sizing-spacing-y-20)}:host ::ng-deep .calendar-table{min-block-size:calc(14rem + 24px)}:host ::ng-deep table{border-collapse:separate;border-spacing:0 3px;table-layout:fixed;margin-block-end:-3px}:host ::ng-deep .day.selected{background:var(--si-sys-background-accent);color:var(--si-sys-text-on-accent)}:host ::ng-deep .month{inline-size:8rem}:host ::ng-deep .month.selected{background:var(--si-sys-background-accent);color:var(--si-sys-text-on-accent)}:host ::ng-deep .year{inline-size:5.3333333333rem}:host ::ng-deep .year.selected{background:var(--si-sys-background-accent);color:var(--si-sys-text-on-accent)}:host ::ng-deep td,:host ::ng-deep th{padding:0;font-weight:400}:host ::ng-deep .week-num,:host ::ng-deep th{font-size:var(--si-sys-typography-font-size-body-sm);color:var(--si-sys-text-secondary);inline-size:2rem;cursor:default}:host ::ng-deep .today.selected:before{border-color:var(--si-sys-border-inverse)}:host ::ng-deep .today:before{position:absolute;content:\"\";inset:1px;border:1px solid var(--si-sys-border-1);border-radius:var(--element-radius-2);display:inline-block}:host ::ng-deep .disabled{color:var(--si-sys-text-disabled);font-weight:400!important;cursor:default!important}:host ::ng-deep .range{background-color:var(--si-sys-background-active)}:host ::ng-deep .range:hover{background:var(--si-sys-background-hover)}:host ::ng-deep .range:hover div.si-h4:hover{background:transparent}:host ::ng-deep .range-hover{background-color:var(--si-sys-background-hover)}:host ::ng-deep .range-hover-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep td:is(.range-start,.range-end){background:var(--si-sys-background-accent);color:var(--si-sys-text-on-accent)}:host ::ng-deep td:is(.range-start,.range-end) div.si-h4:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-lg:hover{background:transparent;color:var(--si-sys-text-on-accent)}:host ::ng-deep td:is(.range-start,.range-end) .today:before{border-color:var(--si-sys-border-inverse)}:host ::ng-deep td.range-start{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}:host ::ng-deep td.range-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep .calendar-button{min-inline-size:0!important}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SiYearSelectionComponent, selector: "si-year-selection", inputs: ["focusedDate"], outputs: ["focusedDateChange", "yearRangeChange"] }, { kind: "component", type: SiMonthSelectionComponent, selector: "si-month-selection", inputs: ["months", "focusedDate"], outputs: ["focusedDateChange", "activeMonthChange", "viewChange"] }, { kind: "component", type: SiDaySelectionComponent, selector: "si-day-selection", inputs: ["hideWeekNumbers", "weekStartDay", "focusedDate", "todayLabel", "calendarWeekLabel"], outputs: ["focusedDateChange", "activeMonthChange", "viewChange"] }, { kind: "component", type: SiTimepickerComponent, selector: "si-timepicker", inputs: ["id", "disabled", "hoursLabel", "minutesLabel", "secondsLabel", "millisecondsLabel", "hideLabels", "hoursAriaLabel", "minutesAriaLabel", "secondsAriaLabel", "millisecondsAriaLabel", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder", "millisecondsPlaceholder", "meridians", "meridiansLabel", "meridiansAriaLabel", "showMinutes", "showSeconds", "showMilliseconds", "showMeridian", "min", "max", "readonly", "errormessageId"], outputs: ["isValid", "meridianChange", "inputCompleted"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-datepicker', imports: [
                         ReactiveFormsModule,
@@ -3178,22 +3278,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiDaySelectionComponent,
                         SiTimepickerComponent,
                         SiTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.Default, template: "@if (!hideCalendar()) {\n  <div class=\"text-center pb-6 calendar\">\n    @switch (view()) {\n      @case ('year') {\n        <si-year-selection\n          [focusedDate]=\"actualFocusedDate()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          (selectedValueChange)=\"activeYearChange($event)\"\n        />\n      }\n      @case ('month') {\n        <si-month-selection\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [months]=\"months\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"activeMonthChange($event)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n      @case ('week') {\n        <si-day-selection\n          [initialFocus]=\"forceFocus()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"dateRange()?.end\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [hideWeekNumbers]=\"hideWeekNumbers\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [weekStartDay]=\"weekStartDay\"\n          [calendarWeekLabel]=\"derivedWeekLabel()\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [todayLabel]=\"config().todayText\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"selectionChange($event!)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n    }\n  </div>\n}\n@if (this.config().showTime) {\n  <div\n    class=\"timepicker-container px-9 pb-6\"\n    [class.pt-6]=\"!hideCalendar()\"\n    [class.border-top]=\"!hideCalendar()\"\n  >\n    @if (!config().mandatoryTime && !hideTimeToggle()) {\n      <div class=\"mb-5 form-check form-switch\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          role=\"switch\"\n          [id]=\"switchId\"\n          [checked]=\"!disabledTime()\"\n          (change)=\"toggleDisabledTime()\"\n        />\n        <label class=\"form-check-label\" [for]=\"switchId\">{{\n          includeTimeLabel() | translate\n        }}</label>\n      </div>\n    }\n    <div class=\"mt-auto\">\n      @if (timepickerLabel()) {\n        <label class=\"form-label\" [for]=\"timepickerId\">{{ timepickerLabel() | translate }}</label>\n      }\n      <si-timepicker\n        #timePicker\n        [id]=\"timepickerId\"\n        [formControl]=\"time\"\n        [hoursLabel]=\"config().hoursLabel ?? timePicker.hoursLabel()\"\n        [minutesLabel]=\"config().minutesLabel ?? timePicker.minutesLabel()\"\n        [secondsLabel]=\"config().secondsLabel ?? timePicker.secondsLabel()\"\n        [millisecondsLabel]=\"config().millisecondsLabel ?? timePicker.millisecondsLabel()\"\n        [hideLabels]=\"config().hideLabels ?? timePicker.hideLabels()\"\n        [hoursAriaLabel]=\"config().hoursAriaLabel ?? timePicker.hoursAriaLabel()\"\n        [minutesAriaLabel]=\"config().minutesAriaLabel ?? timePicker.minutesAriaLabel()\"\n        [secondsAriaLabel]=\"config().secondsAriaLabel ?? timePicker.secondsAriaLabel()\"\n        [millisecondsAriaLabel]=\"\n          config().millisecondsAriaLabel ?? timePicker.millisecondsAriaLabel()\n        \"\n        [hoursPlaceholder]=\"config().hoursPlaceholder ?? timePicker.hoursPlaceholder()\"\n        [minutesPlaceholder]=\"config().minutesPlaceholder ?? timePicker.minutesPlaceholder()\"\n        [secondsPlaceholder]=\"config().secondsPlaceholder ?? timePicker.secondsPlaceholder()\"\n        [millisecondsPlaceholder]=\"\n          config().millisecondsPlaceholder ?? timePicker.millisecondsPlaceholder()\n        \"\n        [meridians]=\"config().meridians ?? timePicker.meridians()\"\n        [meridiansLabel]=\"config().meridiansLabel ?? timePicker.meridiansLabel()\"\n        [meridiansAriaLabel]=\"config().meridiansAriaLabel ?? timePicker.meridiansAriaLabel()\"\n        [showMinutes]=\"config().showMinutes ?? true\"\n        [showSeconds]=\"config().showSeconds ?? false\"\n        [showMilliseconds]=\"config().showMilliseconds ?? false\"\n        [showMeridian]=\"time12h()\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .year:not(.disabled):not(.selected):hover,:host ::ng-deep .month:not(.disabled):not(.selected):hover,:host ::ng-deep .day:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover);color:var(--element-ui-0)}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep td,:host ::ng-deep th,:host ::ng-deep .day{block-size:2rem;line-height:2rem}:host ::ng-deep td,:host ::ng-deep th,:host ::ng-deep .day{inline-size:2rem}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{display:block;margin-inline:auto;position:relative;border:unset;background-color:unset;padding:0;cursor:pointer;border-radius:var(--element-button-radius)}:host{background:var(--element-base-1);border-radius:var(--element-radius-2);display:flex;flex-direction:column}:host ::ng-deep .header,:host ::ng-deep .footer{display:flex;align-items:center;min-block-size:calc(1rem + 16px)}:host ::ng-deep .header{padding-block:12px;padding-inline:32px;border-block-end:1px solid var(--element-ui-4)}:host ::ng-deep .header a{text-decoration:none;cursor:pointer}:host ::ng-deep .footer{margin-block-start:4px}:host ::ng-deep .calendar-table{min-block-size:calc(14rem + 24px)}:host ::ng-deep table{border-collapse:separate;border-spacing:0 3px;table-layout:fixed;margin-block-end:-3px}:host ::ng-deep .day.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .month{inline-size:8rem}:host ::ng-deep .month.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .year{inline-size:5.3333333333rem}:host ::ng-deep .year.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td,:host ::ng-deep th{padding:0;font-weight:400}:host ::ng-deep .week-num,:host ::ng-deep th{font-size:.75rem;color:var(--element-text-secondary);inline-size:2rem;cursor:default}:host ::ng-deep .today.selected:before{border-color:var(--element-ui-5)}:host ::ng-deep .today:before{position:absolute;content:\"\";inset:1px;border:1px solid var(--element-ui-1);border-radius:var(--element-radius-2);display:inline-block}:host ::ng-deep .disabled{color:var(--element-text-disabled);font-weight:400!important;cursor:default!important}:host ::ng-deep .range{background-color:var(--element-ui-4)}:host ::ng-deep .range:hover{background:var(--element-base-1-hover)}:host ::ng-deep .range:hover div.si-h4:hover{background:transparent}:host ::ng-deep .range-hover{background-color:var(--element-base-1-hover)}:host ::ng-deep .range-hover-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep td:is(.range-start,.range-end){background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) div.si-h4:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-lg:hover{background:transparent;color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) .today:before{border-color:var(--element-ui-5)}:host ::ng-deep td.range-start{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}:host ::ng-deep td.range-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep .calendar-button{font-weight:600;font-size:.875rem;line-height:1.1428571429;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedDate", required: false }] }, { type: i0.Output, args: ["focusedDateChange"] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], dateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRange", required: false }] }, { type: i0.Output, args: ["dateRangeChange"] }], dateRangeRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRangeRole", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], disabledTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledTime", required: false }] }, { type: i0.Output, args: ["disabledTimeChange"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], calenderWeekLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calenderWeekLabel", required: false }] }], calendarWeekLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarWeekLabel", required: false }] }], time12h: [{ type: i0.Input, args: [{ isSignal: true, alias: "time12h", required: false }] }], rangeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeType", required: false }] }, { type: i0.Output, args: ["rangeTypeChange"] }], minMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMonth", required: false }] }], maxMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxMonth", required: false }] }], hideTimeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTimeToggle", required: false }] }], hideCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCalendar", required: false }] }], timepickerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timepickerLabel", required: false }] }], daySelection: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiDaySelectionComponent), { isSignal: true }] }], monthSelection: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiMonthSelectionComponent), { isSignal: true }] }], yearSelection: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiYearSelectionComponent), { isSignal: true }] }], activeHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeHover", required: false }] }, { type: i0.Output, args: ["activeHoverChange"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (!hideCalendar()) {\n  <div class=\"text-center pb-6 calendar\">\n    @switch (view()) {\n      @case ('year') {\n        <si-year-selection\n          [focusedDate]=\"actualFocusedDate()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          (selectedValueChange)=\"activeYearChange($event)\"\n        />\n      }\n      @case ('month') {\n        <si-month-selection\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [months]=\"months\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"activeMonthChange($event)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n      @case ('week') {\n        <si-day-selection\n          [initialFocus]=\"forceFocus()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"dateRange()?.end\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [hideWeekNumbers]=\"hideWeekNumbers\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [weekStartDay]=\"weekStartDay\"\n          [calendarWeekLabel]=\"calendarWeekLabel()\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [todayLabel]=\"config().todayText\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"selectionChange($event!)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n    }\n  </div>\n}\n@if (this.config().showTime) {\n  <div\n    class=\"timepicker-container px-9 pb-6\"\n    [class.pt-6]=\"!hideCalendar()\"\n    [class.border-top]=\"!hideCalendar()\"\n  >\n    @if (!config().mandatoryTime && !hideTimeToggle()) {\n      <div class=\"mb-5 form-check form-switch\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          role=\"switch\"\n          [id]=\"switchId\"\n          [checked]=\"!disabledTime()\"\n          (change)=\"toggleDisabledTime()\"\n        />\n        <label class=\"form-check-label\" [for]=\"switchId\">{{\n          includeTimeLabel() | translate\n        }}</label>\n      </div>\n    }\n    <div class=\"mt-auto\">\n      @if (timepickerLabel()) {\n        <label class=\"form-label\" [for]=\"timepickerId\">{{ timepickerLabel() | translate }}</label>\n      }\n      <si-timepicker\n        #timePicker\n        [id]=\"timepickerId\"\n        [formControl]=\"time\"\n        [hoursLabel]=\"config().hoursLabel ?? timePicker.hoursLabel()\"\n        [minutesLabel]=\"config().minutesLabel ?? timePicker.minutesLabel()\"\n        [secondsLabel]=\"config().secondsLabel ?? timePicker.secondsLabel()\"\n        [millisecondsLabel]=\"config().millisecondsLabel ?? timePicker.millisecondsLabel()\"\n        [hideLabels]=\"config().hideLabels ?? timePicker.hideLabels()\"\n        [hoursAriaLabel]=\"config().hoursAriaLabel ?? timePicker.hoursAriaLabel()\"\n        [minutesAriaLabel]=\"config().minutesAriaLabel ?? timePicker.minutesAriaLabel()\"\n        [secondsAriaLabel]=\"config().secondsAriaLabel ?? timePicker.secondsAriaLabel()\"\n        [millisecondsAriaLabel]=\"\n          config().millisecondsAriaLabel ?? timePicker.millisecondsAriaLabel()\n        \"\n        [hoursPlaceholder]=\"config().hoursPlaceholder ?? timePicker.hoursPlaceholder()\"\n        [minutesPlaceholder]=\"config().minutesPlaceholder ?? timePicker.minutesPlaceholder()\"\n        [secondsPlaceholder]=\"config().secondsPlaceholder ?? timePicker.secondsPlaceholder()\"\n        [millisecondsPlaceholder]=\"\n          config().millisecondsPlaceholder ?? timePicker.millisecondsPlaceholder()\n        \"\n        [meridians]=\"config().meridians ?? timePicker.meridians()\"\n        [meridiansLabel]=\"config().meridiansLabel ?? timePicker.meridiansLabel()\"\n        [meridiansAriaLabel]=\"config().meridiansAriaLabel ?? timePicker.meridiansAriaLabel()\"\n        [showMinutes]=\"config().showMinutes ?? true\"\n        [showSeconds]=\"config().showSeconds ?? false\"\n        [showMilliseconds]=\"config().showMilliseconds ?? false\"\n        [showMeridian]=\"time12h()\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .year:not(.disabled):not(.selected):hover,:host ::ng-deep .month:not(.disabled):not(.selected):hover,:host ::ng-deep .day:not(.disabled):not(.selected):hover{background:var(--si-sys-background-hover);color:var(--si-sys-text-accent)}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep td,:host ::ng-deep th,:host ::ng-deep .day{block-size:2rem;line-height:2rem}:host ::ng-deep td,:host ::ng-deep th,:host ::ng-deep .day{inline-size:2rem}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{display:block;margin-inline:auto;position:relative;border:unset;background-color:unset;padding:0;cursor:pointer;border-radius:var(--element-button-radius)}:host{background:var(--si-sys-background-1);border-radius:var(--element-radius-2);display:flex;flex-direction:column}:host ::ng-deep .header,:host ::ng-deep .footer{display:flex;align-items:center;min-block-size:calc(1rem + 2 * var(--si-sys-sizing-spacing-y-40))}:host ::ng-deep .header{padding-block:var(--si-sys-sizing-spacing-y-50);padding-inline:var(--si-sys-sizing-spacing-x-90);border-block-end:1px solid var(--si-sys-border-4)}:host ::ng-deep .header a{text-decoration:none;cursor:pointer}:host ::ng-deep .footer{margin-block-start:var(--si-sys-sizing-spacing-y-20)}:host ::ng-deep .calendar-table{min-block-size:calc(14rem + 24px)}:host ::ng-deep table{border-collapse:separate;border-spacing:0 3px;table-layout:fixed;margin-block-end:-3px}:host ::ng-deep .day.selected{background:var(--si-sys-background-accent);color:var(--si-sys-text-on-accent)}:host ::ng-deep .month{inline-size:8rem}:host ::ng-deep .month.selected{background:var(--si-sys-background-accent);color:var(--si-sys-text-on-accent)}:host ::ng-deep .year{inline-size:5.3333333333rem}:host ::ng-deep .year.selected{background:var(--si-sys-background-accent);color:var(--si-sys-text-on-accent)}:host ::ng-deep td,:host ::ng-deep th{padding:0;font-weight:400}:host ::ng-deep .week-num,:host ::ng-deep th{font-size:var(--si-sys-typography-font-size-body-sm);color:var(--si-sys-text-secondary);inline-size:2rem;cursor:default}:host ::ng-deep .today.selected:before{border-color:var(--si-sys-border-inverse)}:host ::ng-deep .today:before{position:absolute;content:\"\";inset:1px;border:1px solid var(--si-sys-border-1);border-radius:var(--element-radius-2);display:inline-block}:host ::ng-deep .disabled{color:var(--si-sys-text-disabled);font-weight:400!important;cursor:default!important}:host ::ng-deep .range{background-color:var(--si-sys-background-active)}:host ::ng-deep .range:hover{background:var(--si-sys-background-hover)}:host ::ng-deep .range:hover div.si-h4:hover{background:transparent}:host ::ng-deep .range-hover{background-color:var(--si-sys-background-hover)}:host ::ng-deep .range-hover-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep td:is(.range-start,.range-end){background:var(--si-sys-background-accent);color:var(--si-sys-text-on-accent)}:host ::ng-deep td:is(.range-start,.range-end) div.si-h4:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-lg:hover{background:transparent;color:var(--si-sys-text-on-accent)}:host ::ng-deep td:is(.range-start,.range-end) .today:before{border-color:var(--si-sys-border-inverse)}:host ::ng-deep td.range-start{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}:host ::ng-deep td.range-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep .calendar-button{min-inline-size:0!important}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedDate", required: false }] }, { type: i0.Output, args: ["focusedDateChange"] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], dateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRange", required: false }] }, { type: i0.Output, args: ["dateRangeChange"] }], dateRangeRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRangeRole", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], disabledTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledTime", required: false }] }, { type: i0.Output, args: ["disabledTimeChange"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], calendarWeekLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarWeekLabel", required: false }] }], time12h: [{ type: i0.Input, args: [{ isSignal: true, alias: "time12h", required: false }] }], rangeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeType", required: false }] }, { type: i0.Output, args: ["rangeTypeChange"] }], minMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMonth", required: false }] }], maxMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxMonth", required: false }] }], hideTimeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTimeToggle", required: false }] }], hideCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCalendar", required: false }] }], timepickerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timepickerLabel", required: false }] }], daySelection: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiDaySelectionComponent), { isSignal: true }] }], monthSelection: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiMonthSelectionComponent), { isSignal: true }] }], yearSelection: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiYearSelectionComponent), { isSignal: true }] }], activeHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeHover", required: false }] }, { type: i0.Output, args: ["activeHoverChange"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 class SiDatepickerOverlayComponent {
-    minMonth = signal(undefined, ...(ngDevMode ? [{ debugName: "minMonth" }] : []));
-    maxMonth = signal(undefined, ...(ngDevMode ? [{ debugName: "maxMonth" }] : []));
-    datepicker = viewChild.required(SiDatepickerComponent);
+    minMonth = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minMonth" }] : /* istanbul ignore next */ []));
+    maxMonth = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxMonth" }] : /* istanbul ignore next */ []));
+    datepicker = viewChild.required(SiDatepickerComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "datepicker" }] : /* istanbul ignore next */ []));
     /**
      * {@inheritDoc SiDatepickerComponent#initialFocus}
      * @defaultValue false
      */
-    initialFocus = input(false, { ...(ngDevMode ? { debugName: "initialFocus" } : {}), transform: booleanAttribute });
+    initialFocus = input(false, { ...(ngDevMode ? { debugName: "initialFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * {@inheritDoc SiDatepickerComponent#config}
      * @defaultValue
@@ -3201,24 +3304,28 @@ class SiDatepickerOverlayComponent {
      * {}
      * ```
      */
-    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    config = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     /**
      * {@inheritDoc SiDatepickerComponent#date}
      */
-    date = model(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
+    date = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
     /**
      * {@inheritDoc SiDatepickerComponent#dateRange}
      */
-    dateRange = model(...(ngDevMode ? [undefined, { debugName: "dateRange" }] : []));
+    dateRange = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dateRange" }] : /* istanbul ignore next */ []));
     /**
      * {@inheritDoc SiDatepickerComponent#rangeType}
      */
-    rangeType = model(...(ngDevMode ? [undefined, { debugName: "rangeType" }] : []));
+    rangeType = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rangeType" }] : /* istanbul ignore next */ []));
     /**
      * {@inheritDoc SiDatepickerComponent#time12h}
      * @defaultValue false
      */
-    time12h = input(false, { ...(ngDevMode ? { debugName: "time12h" } : {}), transform: booleanAttribute });
+    time12h = input(false, { ...(ngDevMode ? { debugName: "time12h" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Emits an event to notify about disabling the time from the datepicker.
      * When time is disable, we construct a pure date object in UTC 00:00:00 time.
@@ -3230,20 +3337,27 @@ class SiDatepickerOverlayComponent {
     focusTrapFactory = inject(ConfigurableFocusTrapFactory);
     focusTrap;
     previousActiveElement;
-    disableTime = signal(false, ...(ngDevMode ? [{ debugName: "disableTime" }] : []));
-    activeHover = signal(undefined, ...(ngDevMode ? [{ debugName: "activeHover" }] : []));
+    disableTime = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableTime" }] : /* istanbul ignore next */ []));
+    activeHover = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeHover" }] : /* istanbul ignore next */ []));
     isTwoMonthDateRange = computed(() => !!this.config().enableDateRange &&
-        (!!this.config().enableTwoMonthDateRange || !!this.config().showTime), ...(ngDevMode ? [{ debugName: "isTwoMonthDateRange" }] : []));
-    firstDatepickerConfig = signal({}, ...(ngDevMode ? [{ debugName: "firstDatepickerConfig" }] : []));
-    secondDatepickerConfig = signal({}, ...(ngDevMode ? [{ debugName: "secondDatepickerConfig" }] : []));
+        (!!this.config().enableTwoMonthDateRange || !!this.config().showTime), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTwoMonthDateRange" }] : /* istanbul ignore next */ []));
+    firstDatepickerConfig = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDatepickerConfig" }] : /* istanbul ignore next */ []));
+    secondDatepickerConfig = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondDatepickerConfig" }] : /* istanbul ignore next */ []));
     /**
      * Indicate that the overlay is opened in small screen.
      * A modal dialog animation display when true and a wrapped two month calendar layout is displayed.
      *
      * @defaultValue false
      */
-    isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
-    completeAnimation = signal(false, ...(ngDevMode ? [{ debugName: "completeAnimation" }] : []));
+    isMobile = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    completeAnimation = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "completeAnimation" }] : /* istanbul ignore next */ []));
     ngOnChanges(changes) {
         if (changes.config) {
             const config = this.config();
@@ -3302,8 +3416,8 @@ class SiDatepickerOverlayComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiDatepickerOverlayComponent, isStandalone: true, selector: "si-datepicker-overlay", inputs: { initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, rangeType: { classPropertyName: "rangeType", publicName: "rangeType", isSignal: true, isRequired: false, transformFunction: null }, time12h: { classPropertyName: "time12h", publicName: "time12h", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", dateRange: "dateRangeChange", rangeType: "rangeTypeChange", disabledTimeChange: "disabledTimeChange" }, host: { properties: { "class.flex-wrap": "isMobile()", "class.mobile-datepicker-overlay": "isMobile()", "class.fade": "isMobile()", "class.show": "completeAnimation()" }, classAttribute: "mt-md-1 d-flex elevation-2 rounded-2 overflow-auto align-items-stretch" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: SiDatepickerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiDatepickerOverlayComponent, isStandalone: true, selector: "si-datepicker-overlay", inputs: { initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, rangeType: { classPropertyName: "rangeType", publicName: "rangeType", isSignal: true, isRequired: false, transformFunction: null }, time12h: { classPropertyName: "time12h", publicName: "time12h", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", dateRange: "dateRangeChange", rangeType: "rangeTypeChange", disabledTimeChange: "disabledTimeChange" }, host: { properties: { "class.flex-wrap": "isMobile()", "class.mobile-datepicker-overlay": "isMobile()", "class.fade": "isMobile()", "class.show": "completeAnimation()" }, classAttribute: "mt-md-1 d-flex shadow-3 rounded-2 overflow-auto align-items-stretch" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: SiDatepickerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
     <si-datepicker
       #datepicker
       tabindex="-1"
@@ -3350,9 +3464,9 @@ class SiDatepickerOverlayComponent {
         (rangeTypeChange)="rangeType.set($event)"
       />
     }
-  `, isInline: true, styles: [":host{background:var(--element-base-1);max-block-size:max-content;max-inline-size:min-content}:host.fade{transition:transform calc(.3s * var(--element-animations-enabled, 1)) ease-out;transform:translateY(-50px)}:host.show{transform:none}.mobile-datepicker-overlay{max-inline-size:43.5ch}.first-datepicker{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.second-datepicker{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.first-datepicker-mobile{border-block-end:0;border-end-start-radius:0;border-end-end-radius:0}.second-datepicker-mobile{border-block-start:0;border-start-start-radius:0;border-start-end-radius:0}\n"], dependencies: [{ kind: "component", type: SiDatepickerComponent, selector: "si-datepicker", inputs: ["focusedDate", "date", "dateRange", "dateRangeRole", "initialFocus", "disabledTime", "config", "previousLabel", "nextLabel", "calenderWeekLabel", "calendarWeekLabel", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "ngmodule", type: A11yModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{background:var(--si-sys-background-1);max-block-size:max-content;max-inline-size:min-content}:host.fade{transition:transform calc(.3s * var(--element-animations-enabled, 1)) ease-out;transform:translateY(-50px)}:host.show{transform:none}.mobile-datepicker-overlay{max-inline-size:43.5ch}.first-datepicker{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.second-datepicker{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.first-datepicker-mobile{border-block-end:0;border-end-start-radius:0;border-end-end-radius:0}.second-datepicker-mobile{border-block-start:0;border-start-start-radius:0;border-start-end-radius:0}\n"], dependencies: [{ kind: "component", type: SiDatepickerComponent, selector: "si-datepicker", inputs: ["focusedDate", "date", "dateRange", "dateRangeRole", "initialFocus", "disabledTime", "config", "previousLabel", "nextLabel", "calendarWeekLabel", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "ngmodule", type: A11yModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-datepicker-overlay', imports: [SiDatepickerComponent, A11yModule], template: `
     <si-datepicker
@@ -3401,13 +3515,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
         (rangeTypeChange)="rangeType.set($event)"
       />
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'mt-md-1 d-flex elevation-2 rounded-2 overflow-auto align-items-stretch',
+  `, host: {
+                        class: 'mt-md-1 d-flex shadow-3 rounded-2 overflow-auto align-items-stretch',
                         '[class.flex-wrap]': 'isMobile()',
                         '[class.mobile-datepicker-overlay]': 'isMobile()',
                         '[class.fade]': 'isMobile()',
                         '[class.show]': 'completeAnimation()'
-                    }, styles: [":host{background:var(--element-base-1);max-block-size:max-content;max-inline-size:min-content}:host.fade{transition:transform calc(.3s * var(--element-animations-enabled, 1)) ease-out;transform:translateY(-50px)}:host.show{transform:none}.mobile-datepicker-overlay{max-inline-size:43.5ch}.first-datepicker{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.second-datepicker{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.first-datepicker-mobile{border-block-end:0;border-end-start-radius:0;border-end-end-radius:0}.second-datepicker-mobile{border-block-start:0;border-start-start-radius:0;border-start-end-radius:0}\n"] }]
+                    }, styles: [":host{background:var(--si-sys-background-1);max-block-size:max-content;max-inline-size:min-content}:host.fade{transition:transform calc(.3s * var(--element-animations-enabled, 1)) ease-out;transform:translateY(-50px)}:host.show{transform:none}.mobile-datepicker-overlay{max-inline-size:43.5ch}.first-datepicker{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.second-datepicker{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.first-datepicker-mobile{border-block-end:0;border-end-start-radius:0;border-end-end-radius:0}.second-datepicker-mobile{border-block-start:0;border-start-start-radius:0;border-start-end-radius:0}\n"] }]
         }], propDecorators: { datepicker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiDatepickerComponent), { isSignal: true }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], dateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRange", required: false }] }, { type: i0.Output, args: ["dateRangeChange"] }], rangeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeType", required: false }] }, { type: i0.Output, args: ["rangeTypeChange"] }], time12h: [{ type: i0.Input, args: [{ isSignal: true, alias: "time12h", required: false }] }], disabledTimeChange: [{ type: i0.Output, args: ["disabledTimeChange"] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }] } });
 
 /**
@@ -3446,13 +3560,14 @@ class SiDatepickerOverlayDirective {
             originX: 'start',
             originY: 'top'
         }
-    ], ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
     /**
      * Optional CDK scroll strategy used for the datepicker overlay.
      *
      * @defaultValue defaultConnectedOverlayScrollStrategy()
      */
-    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), { ...(ngDevMode ? { debugName: "scrollStrategy" } : {}), 
+    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), { ...(ngDevMode ? { debugName: "scrollStrategy" } : /* istanbul ignore next */ {}), 
         // eslint-disable-next-line @angular-eslint/no-input-rename
         alias: 'siDatepickerScrollStrategy' // to be aligned with the `siDatepickerClose` output
      });
@@ -3615,10 +3730,10 @@ class SiDatepickerOverlayDirective {
         observeOn(asapScheduler), map(() => CloseCause.Select)), overlayRef.backdropClick().pipe(map(() => CloseCause.Backdrop)), overlayRef.detachments().pipe(map(() => CloseCause.Detach)), overlayRef.keydownEvents().pipe(filter(event => event.key === 'Escape'), tap(event => event.stopPropagation()), // ESC handled, prevent closing modal, etc.
         map(() => CloseCause.Escape)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiDatepickerOverlayDirective, isStandalone: true, selector: "[siDatepickerOverlay]", inputs: { scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "siDatepickerScrollStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { siDatepickerClose: "siDatepickerClose" }, exportAs: ["siDatepickerOverlay"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiDatepickerOverlayDirective, isStandalone: true, selector: "[siDatepickerOverlay]", inputs: { scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "siDatepickerScrollStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { siDatepickerClose: "siDatepickerClose" }, exportAs: ["siDatepickerOverlay"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerOverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siDatepickerOverlay]',
@@ -3638,7 +3753,7 @@ class SiDatepickerDirective extends SiDateInputDirective {
      *
      * @defaultValue false
      */
-    autoClose = input(false, { ...(ngDevMode ? { debugName: "autoClose" } : {}), transform: booleanAttribute });
+    autoClose = input(false, { ...(ngDevMode ? { debugName: "autoClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * During focus on close the datepicker will not show since we recover the focus on element.
      * The focus on close is only relevant when the directive is configured without a calendar button.
@@ -3722,8 +3837,8 @@ class SiDatepickerDirective extends SiDateInputDirective {
             this.overlayToggle.closeAfterSelection();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiDatepickerDirective, isStandalone: true, selector: "[siDatepicker]", inputs: { autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown.tab": "onTab()", "focus": "focusChange()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiDatepickerDirective, isStandalone: true, selector: "[siDatepicker]", inputs: { autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown.tab": "onTab()", "focus": "focusChange()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SiDatepickerDirective,
@@ -3740,7 +3855,7 @@ class SiDatepickerDirective extends SiDateInputDirective {
             }
         ], exportAs: ["siDatepicker"], usesInheritance: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, inputs: ["siDatepickerScrollStrategy", "siDatepickerScrollStrategy"], outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siDatepicker]',
@@ -3786,17 +3901,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiDateRangeComponent {
     static idCounter = 0;
-    inputDirectives = viewChildren(SiDateInputDirective, ...(ngDevMode ? [{ debugName: "inputDirectives" }] : []));
-    startInput = viewChild.required('startInput');
-    endInput = viewChild.required('endInput');
-    button = viewChild.required('button');
+    inputDirectives = viewChildren(SiDateInputDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputDirectives" }] : /* istanbul ignore next */ []));
+    startInput = viewChild.required('startInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startInput" }] : /* istanbul ignore next */ []));
+    endInput = viewChild.required('endInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endInput" }] : /* istanbul ignore next */ []));
+    button = viewChild.required('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
     /**
      * @defaultValue
      * ```
      * `__si-date-range-${SiDateRangeComponent.idCounter++}`
      * ```
      */
-    id = input(`__si-date-range-${SiDateRangeComponent.idCounter++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`__si-date-range-${SiDateRangeComponent.idCounter++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     labelledby = inject(new HostAttributeToken('aria-labelledby'), {
         optional: true
     }) ?? `${this.id()}-label`;
@@ -3808,7 +3928,8 @@ class SiDateRangeComponent {
      * { enableDateRange: true }
      * ```
      */
-    siDatepickerConfig = model({ enableDateRange: true }, ...(ngDevMode ? [{ debugName: "siDatepickerConfig" }] : []));
+    siDatepickerConfig = model({ enableDateRange: true }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "siDatepickerConfig" }] : /* istanbul ignore next */ []));
     /**
      * Placeholder of the start date input.
      *
@@ -3817,7 +3938,8 @@ class SiDateRangeComponent {
      * t(() => $localize`:@@SI_DATEPICKER.START_DATE_PLACEHOLDER:Start date`)
      * ```
      */
-    startDatePlaceholder = input(t(() => $localize `:@@SI_DATEPICKER.START_DATE_PLACEHOLDER:Start date`), ...(ngDevMode ? [{ debugName: "startDatePlaceholder" }] : []));
+    startDatePlaceholder = input(t(() => $localize `:@@SI_DATEPICKER.START_DATE_PLACEHOLDER:Start date`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startDatePlaceholder" }] : /* istanbul ignore next */ []));
     /**
      * Placeholder of the end date input.
      *
@@ -3826,7 +3948,8 @@ class SiDateRangeComponent {
      * t(() => $localize`:@@SI_DATEPICKER.END_DATE_PLACEHOLDER:End date`)
      * ```
      */
-    endDatePlaceholder = input(t(() => $localize `:@@SI_DATEPICKER.END_DATE_PLACEHOLDER:End date`), ...(ngDevMode ? [{ debugName: "endDatePlaceholder" }] : []));
+    endDatePlaceholder = input(t(() => $localize `:@@SI_DATEPICKER.END_DATE_PLACEHOLDER:End date`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endDatePlaceholder" }] : /* istanbul ignore next */ []));
     /**
      * Aria label of the date-range calendar toggle button.
      *
@@ -3835,31 +3958,34 @@ class SiDateRangeComponent {
      * t(() => $localize`:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`)
      * ```
      */
-    ariaLabelCalendarButton = input(t(() => $localize `:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`), ...(ngDevMode ? [{ debugName: "ariaLabelCalendarButton" }] : []));
+    ariaLabelCalendarButton = input(t(() => $localize `:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelCalendarButton" }] : /* istanbul ignore next */ []));
     /**
      * Form label of the start timepicker.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_DATEPICKER.START_TIME_LABEL:from`)
+     * t(() => $localize`:@@SI_DATEPICKER.START_TIME_LABEL:From`)
      * ```
      */
-    startTimeLabel = input(t(() => $localize `:@@SI_DATEPICKER.START_TIME_LABEL:from`), ...(ngDevMode ? [{ debugName: "startTimeLabel" }] : []));
+    startTimeLabel = input(t(() => $localize `:@@SI_DATEPICKER.START_TIME_LABEL:From`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startTimeLabel" }] : /* istanbul ignore next */ []));
     /**
      * Form label of the start timepicker.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_DATEPICKER.END_TIME_LABEL:to`)
+     * t(() => $localize`:@@SI_DATEPICKER.END_TIME_LABEL:To`)
      * ```
      */
-    endTimeLabel = input(t(() => $localize `:@@SI_DATEPICKER.END_TIME_LABEL:to`), ...(ngDevMode ? [{ debugName: "endTimeLabel" }] : []));
+    endTimeLabel = input(t(() => $localize `:@@SI_DATEPICKER.END_TIME_LABEL:To`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endTimeLabel" }] : /* istanbul ignore next */ []));
     /**
      * Automatically close overlay on date selection.
      *
      * @defaultValue false
      */
-    autoClose = input(false, { ...(ngDevMode ? { debugName: "autoClose" } : {}), transform: booleanAttribute });
+    autoClose = input(false, { ...(ngDevMode ? { debugName: "autoClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Emits on the date range value changes. */
     siDatepickerRangeChange = output();
     /**
@@ -3873,18 +3999,19 @@ class SiDateRangeComponent {
      * @defaultValue false
      */
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
     /**
      * Whether the date range input is readonly.
      *
      * @defaultValue false
      */
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Set the date-range object displayed in the control.
      * The input can be used if the control is used outside Angular forms.
      */
-    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * This ID will be bound to the `aria-describedby` attribute of the date-range.
      * Use this to reference the element containing the error message(s) for the date-range.
@@ -3895,13 +4022,17 @@ class SiDateRangeComponent {
      * `${this.id()}-errormessage`
      * ```
      */
-    errormessageId = input(`${this.id()}-errormessage`, ...(ngDevMode ? [{ debugName: "errormessageId" }] : []));
+    errormessageId = input(`${this.id()}-errormessage`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errormessageId" }] : /* istanbul ignore next */ []));
     validator;
     onChange = (val) => { };
     onTouch = () => { };
+    onValidatorChange = () => { };
     icons = addIcons({ elementCalendar });
-    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    disabledNgControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : []));
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabledNgControl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : /* istanbul ignore next */ []));
     cdRef = inject(ChangeDetectorRef);
     locale = inject(LOCALE_ID).toString();
     overlayToggle = inject(SiDatepickerOverlayDirective);
@@ -3926,6 +4057,7 @@ class SiDateRangeComponent {
                 this.updateValue(this.value());
             }
         }
+        this.onValidatorChange();
         this.overlayToggle.setInputs({ config: this.siDatepickerConfig(), dateRange: this.value() });
     }
     ngAfterViewInit() {
@@ -3955,6 +4087,9 @@ class SiDateRangeComponent {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
     setDisabledState(isDisabled) {
         this.disabledNgControl.set(isDisabled);
     }
@@ -3979,6 +4114,7 @@ class SiDateRangeComponent {
     onInputChanged(dateRange) {
         this.updateValue(dateRange);
         this.onChange(this.value());
+        this.onValidatorChange();
         this.siDatepickerRangeChange.emit(this.value());
     }
     show() {
@@ -4068,8 +4204,8 @@ class SiDateRangeComponent {
             this.value.set(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiDateRangeComponent, isStandalone: true, selector: "si-date-range", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, siDatepickerConfig: { classPropertyName: "siDatepickerConfig", publicName: "siDatepickerConfig", isSignal: true, isRequired: false, transformFunction: null }, startDatePlaceholder: { classPropertyName: "startDatePlaceholder", publicName: "startDatePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endDatePlaceholder: { classPropertyName: "endDatePlaceholder", publicName: "endDatePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelCalendarButton: { classPropertyName: "ariaLabelCalendarButton", publicName: "ariaLabelCalendarButton", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { siDatepickerConfig: "siDatepickerConfigChange", siDatepickerRangeChange: "siDatepickerRangeChange", disabledTimeChange: "disabledTimeChange", value: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.disabled": "disabled()", "class.readonly": "readonly()", "attr.aria-labelledby": "labelledby" }, classAttribute: "form-control d-flex align-items-center" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: SiDateRangeComponent, isStandalone: true, selector: "si-date-range", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, siDatepickerConfig: { classPropertyName: "siDatepickerConfig", publicName: "siDatepickerConfig", isSignal: true, isRequired: false, transformFunction: null }, startDatePlaceholder: { classPropertyName: "startDatePlaceholder", publicName: "startDatePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endDatePlaceholder: { classPropertyName: "endDatePlaceholder", publicName: "endDatePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelCalendarButton: { classPropertyName: "ariaLabelCalendarButton", publicName: "ariaLabelCalendarButton", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { siDatepickerConfig: "siDatepickerConfigChange", siDatepickerRangeChange: "siDatepickerRangeChange", disabledTimeChange: "disabledTimeChange", value: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.disabled": "disabled()", "class.readonly": "readonly()", "attr.aria-labelledby": "labelledby" }, classAttribute: "form-control d-flex align-items-center" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SiDateRangeComponent,
@@ -4084,9 +4220,9 @@ class SiDateRangeComponent {
                 provide: SI_FORM_ITEM_CONTROL,
                 useExisting: SiDateRangeComponent
             }
-        ], viewQueries: [{ propertyName: "inputDirectives", predicate: SiDateInputDirective, descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, inputs: ["siDatepickerScrollStrategy", "scrollStrategy"], outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0, template: "<input\n  #startInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none\"\n  siDateInput\n  [ngModel]=\"value()?.start ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"startDatePlaceholder() | translate\"\n  [attr.aria-label]=\"startDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: $event, end: value()?.end })\"\n/>\n<span class=\"mx-3\">-</span>\n<input\n  #endInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none text-end\"\n  siDateInput\n  [ngModel]=\"value()?.end ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"endDatePlaceholder() | translate\"\n  [attr.aria-label]=\"endDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: value()?.start, end: $event })\"\n/>\n<div class=\"form-control-actions\">\n  <button\n    #button\n    type=\"button\"\n    class=\"btn btn-icon btn-tertiary btn-sm\"\n    [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"show()\"\n  >\n    <si-icon [icon]=\"icons.elementCalendar\" />\n  </button>\n</div>\n", styles: [":host{display:block;min-inline-size:237px}:host(:focus-within:has(input:focus)){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{flex-grow:1;background-color:transparent;min-inline-size:80px}input::placeholder{opacity:1;color:var(--element-text-secondary)}input:disabled,input[readonly]{background-color:var(--element-base-1);opacity:1}input:not([readonly]):focus::placeholder,input:focus:not([readonly]):focus::placeholder{color:transparent}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDateInputDirective, selector: "input[siDateInput]", inputs: ["id", "siDatepickerConfig", "disabled", "readonly", "errormessageId"], outputs: ["siDatepickerConfigChange", "siDatepickerDisabledTime", "stateChange", "dateChange"], exportAs: ["siDateInput"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+        ], viewQueries: [{ propertyName: "inputDirectives", predicate: SiDateInputDirective, descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, inputs: ["siDatepickerScrollStrategy", "scrollStrategy"], outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0, template: "<input\n  #startInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none\"\n  siDateInput\n  [ngModel]=\"value()?.start ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"startDatePlaceholder() | translate\"\n  [attr.aria-label]=\"startDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: $event, end: value()?.end })\"\n  (validationChange)=\"onValidatorChange()\"\n/>\n<span class=\"mx-3\">-</span>\n<input\n  #endInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none text-end\"\n  siDateInput\n  [ngModel]=\"value()?.end ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"endDatePlaceholder() | translate\"\n  [attr.aria-label]=\"endDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: value()?.start, end: $event })\"\n  (validationChange)=\"onValidatorChange()\"\n/>\n<div class=\"form-control-actions\">\n  <button\n    #button\n    type=\"button\"\n    class=\"btn btn-icon btn-tertiary btn-sm\"\n    [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"show()\"\n  >\n    <si-icon [icon]=\"icons.elementCalendar\" />\n  </button>\n</div>\n", styles: [":host{display:block;min-inline-size:237px}:host(:focus-within:has(input:focus)){outline:var(--element-button-focus-width) solid var(--si-sys-effects-focus);outline-offset:var(--element-button-focus-overlay-width)}input{flex-grow:1;background-color:transparent;min-inline-size:80px}input::placeholder{opacity:1;color:var(--si-sys-text-secondary)}input:disabled,input[readonly]{background-color:var(--si-sys-background-1);opacity:1}input:not([readonly]):focus::placeholder,input:focus:not([readonly]):focus::placeholder{color:transparent}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--si-sys-border-3);color:var(--si-sys-text-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDateInputDirective, selector: "input[siDateInput]", inputs: ["id", "siDatepickerConfig", "disabled", "readonly", "errormessageId"], outputs: ["siDatepickerConfigChange", "siDatepickerDisabledTime", "stateChange", "validationChange", "dateChange"], exportAs: ["siDateInput"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-date-range', imports: [FormsModule, SiDateInputDirective, SiIconComponent, SiTranslatePipe, A11yModule], providers: [
                         {
@@ -4103,7 +4239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: SI_FORM_ITEM_CONTROL,
                             useExisting: SiDateRangeComponent
                         }
-                    ], changeDetection: ChangeDetectionStrategy.Default, host: {
+                    ], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         class: 'form-control d-flex align-items-center',
                         role: 'group',
                         '[class.disabled]': 'disabled()',
@@ -4115,7 +4251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             inputs: ['siDatepickerScrollStrategy: scrollStrategy'],
                             outputs: ['siDatepickerClose']
                         }
-                    ], template: "<input\n  #startInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none\"\n  siDateInput\n  [ngModel]=\"value()?.start ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"startDatePlaceholder() | translate\"\n  [attr.aria-label]=\"startDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: $event, end: value()?.end })\"\n/>\n<span class=\"mx-3\">-</span>\n<input\n  #endInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none text-end\"\n  siDateInput\n  [ngModel]=\"value()?.end ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"endDatePlaceholder() | translate\"\n  [attr.aria-label]=\"endDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: value()?.start, end: $event })\"\n/>\n<div class=\"form-control-actions\">\n  <button\n    #button\n    type=\"button\"\n    class=\"btn btn-icon btn-tertiary btn-sm\"\n    [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"show()\"\n  >\n    <si-icon [icon]=\"icons.elementCalendar\" />\n  </button>\n</div>\n", styles: [":host{display:block;min-inline-size:237px}:host(:focus-within:has(input:focus)){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{flex-grow:1;background-color:transparent;min-inline-size:80px}input::placeholder{opacity:1;color:var(--element-text-secondary)}input:disabled,input[readonly]{background-color:var(--element-base-1);opacity:1}input:not([readonly]):focus::placeholder,input:focus:not([readonly]):focus::placeholder{color:transparent}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}\n"] }]
+                    ], template: "<input\n  #startInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none\"\n  siDateInput\n  [ngModel]=\"value()?.start ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"startDatePlaceholder() | translate\"\n  [attr.aria-label]=\"startDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: $event, end: value()?.end })\"\n  (validationChange)=\"onValidatorChange()\"\n/>\n<span class=\"mx-3\">-</span>\n<input\n  #endInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none text-end\"\n  siDateInput\n  [ngModel]=\"value()?.end ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"endDatePlaceholder() | translate\"\n  [attr.aria-label]=\"endDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: value()?.start, end: $event })\"\n  (validationChange)=\"onValidatorChange()\"\n/>\n<div class=\"form-control-actions\">\n  <button\n    #button\n    type=\"button\"\n    class=\"btn btn-icon btn-tertiary btn-sm\"\n    [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"show()\"\n  >\n    <si-icon [icon]=\"icons.elementCalendar\" />\n  </button>\n</div>\n", styles: [":host{display:block;min-inline-size:237px}:host(:focus-within:has(input:focus)){outline:var(--element-button-focus-width) solid var(--si-sys-effects-focus);outline-offset:var(--element-button-focus-overlay-width)}input{flex-grow:1;background-color:transparent;min-inline-size:80px}input::placeholder{opacity:1;color:var(--si-sys-text-secondary)}input:disabled,input[readonly]{background-color:var(--si-sys-background-1);opacity:1}input:not([readonly]):focus::placeholder,input:focus:not([readonly]):focus::placeholder{color:transparent}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--si-sys-border-3);color:var(--si-sys-text-disabled)}\n"] }]
         }], propDecorators: { inputDirectives: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiDateInputDirective), { isSignal: true }] }], startInput: [{ type: i0.ViewChild, args: ['startInput', { isSignal: true }] }], endInput: [{ type: i0.ViewChild, args: ['endInput', { isSignal: true }] }], button: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], siDatepickerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "siDatepickerConfig", required: false }] }, { type: i0.Output, args: ["siDatepickerConfigChange"] }], startDatePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDatePlaceholder", required: false }] }], endDatePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDatePlaceholder", required: false }] }], ariaLabelCalendarButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelCalendarButton", required: false }] }], startTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTimeLabel", required: false }] }], endTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endTimeLabel", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], siDatepickerRangeChange: [{ type: i0.Output, args: ["siDatepickerRangeChange"] }], disabledTimeChange: [{ type: i0.Output, args: ["disabledTimeChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }], onFocusOut: [{
                 type: HostListener,
                 args: ['focusout', ['$event']]
@@ -4149,13 +4285,19 @@ class SiCalendarButtonComponent {
      * t(() => $localize`:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`)
      * ```
      */
-    ariaLabel = input(t(() => $localize `:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`), ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    button = viewChild.required('calendarButton');
+    ariaLabel = input(t(() => $localize `:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    button = viewChild.required('calendarButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
     /** Datepicker input directive instance used to watch for state changes and required to open the calendar. */
-    datepicker = contentChild.required(SiDatepickerDirective);
-    datepickerOverlay = contentChild.required(SiDatepickerOverlayDirective);
-    ngControl = contentChild(NgControl, ...(ngDevMode ? [{ debugName: "ngControl" }] : []));
-    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    datepicker = contentChild.required(SiDatepickerDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "datepicker" }] : /* istanbul ignore next */ []));
+    datepickerOverlay = contentChild.required(SiDatepickerOverlayDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "datepickerOverlay" }] : /* istanbul ignore next */ []));
+    ngControl = contentChild(NgControl, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementCalendar });
     destroyerRef = inject(DestroyRef);
     focusMonitor = inject(FocusMonitor);
@@ -4183,8 +4325,8 @@ class SiCalendarButtonComponent {
         const datepicker = this.datepicker();
         this.disabled.set(datepicker.disabled() || datepicker.readonly());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCalendarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiCalendarButtonComponent, isStandalone: true, selector: "si-calendar-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-inline-block position-relative form-control-wrapper" }, queries: [{ propertyName: "datepicker", first: true, predicate: SiDatepickerDirective, descendants: true, isSignal: true }, { propertyName: "datepickerOverlay", first: true, predicate: SiDatepickerOverlayDirective, descendants: true, isSignal: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["calendarButton"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCalendarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: SiCalendarButtonComponent, isStandalone: true, selector: "si-calendar-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-inline-block position-relative form-control-wrapper" }, queries: [{ propertyName: "datepicker", first: true, predicate: SiDatepickerDirective, descendants: true, isSignal: true }, { propertyName: "datepickerOverlay", first: true, predicate: SiDatepickerOverlayDirective, descendants: true, isSignal: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["calendarButton"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />
     <div class="form-control-actions">
       <button
         #calendarButton
@@ -4197,9 +4339,9 @@ class SiCalendarButtonComponent {
       >
         <si-icon [icon]="icons.elementCalendar" />
       </button>
-    </div>`, isInline: true, styles: [":host{--si-action-icon-offset: calc(1.25rem + 6px) }\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </div>`, isInline: true, styles: [":host{--si-action-icon-offset: calc( var(--si-sys-sizing-icon-md) + var(--si-sys-sizing-spacing-y-10) * 3 )}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCalendarButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCalendarButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-calendar-button', imports: [SiIconComponent, SiTranslatePipe], template: `<ng-content />
     <div class="form-control-actions">
@@ -4214,9 +4356,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
       >
         <si-icon [icon]="icons.elementCalendar" />
       </button>
-    </div>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+    </div>`, host: {
                         class: 'd-inline-block position-relative form-control-wrapper'
-                    }, styles: [":host{--si-action-icon-offset: calc(1.25rem + 6px) }\n"] }]
+                    }, styles: [":host{--si-action-icon-offset: calc( var(--si-sys-sizing-icon-md) + var(--si-sys-sizing-spacing-y-10) * 3 )}\n"] }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], button: [{ type: i0.ViewChild, args: ['calendarButton', { isSignal: true }] }], datepicker: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiDatepickerDirective), { isSignal: true }] }], datepickerOverlay: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiDatepickerOverlayDirective), { isSignal: true }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }] } });
 
 /**
@@ -4224,8 +4366,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiDatepickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerModule, imports: [SiCalendarButtonComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerModule, imports: [SiCalendarButtonComponent,
             SiDateInputDirective,
             SiDatepickerComponent,
             SiDatepickerDirective,
@@ -4236,12 +4378,12 @@ class SiDatepickerModule {
             SiDatepickerDirective,
             SiDateRangeComponent,
             SiTimepickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerModule, imports: [SiCalendarButtonComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerModule, imports: [SiCalendarButtonComponent,
             SiDatepickerComponent,
             SiDateRangeComponent,
             SiTimepickerComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [