@siemens/element-ng 49.10.0 → 49.12.0

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, HostListener, Directive, ElementRef, viewChildren, Component, ChangeDetectionStrategy, viewChild, HostAttributeToken, effect, ChangeDetectorRef, SimpleChange, DOCUMENT, DestroyRef, contentChild, NgModule } from '@angular/core';
+import { input, model, output, booleanAttribute, computed, signal, inject, LOCALE_ID, HostListener, Directive, ElementRef, viewChildren, ChangeDetectionStrategy, Component, viewChild, HostAttributeToken, effect, ChangeDetectorRef, SimpleChange, 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';
@@ -689,7 +689,7 @@ const maxDate = (first, second) => {
  * Indicate whether the time use the 12-hour format
  */
 const is12HourFormat = (locale, config) => {
-    const dateFormat = getDatepickerFormat(locale, config, true);
+    const dateFormat = getDatepickerFormat(locale, { ...config, disabledTime: false }, true);
     return dateFormat?.includes('a') ?? false;
 };
 
@@ -1291,11 +1291,11 @@ class SiCalendarBodyComponent {
         }
     }
     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"] }] });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCalendarBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[si-calendar-body]', imports: [A11yModule, SiCalendarDateCellDirective], host: {
+            args: [{ selector: '[si-calendar-body]', imports: [A11yModule, SiCalendarDateCellDirective], changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
@@ -1404,12 +1404,13 @@ class SiInitialFocusComponent {
         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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiInitialFocusComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ''
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], 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 }] }] } });
 
@@ -3114,7 +3115,7 @@ class SiDatepickerComponent {
         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" }] });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerComponent, decorators: [{
             type: Component,
@@ -3125,7 +3126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiDaySelectionComponent,
                         SiTimepickerComponent,
                         SiTranslatePipe
-                    ], 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"] }]
+                    ], 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"] }] } });
 
 /**
@@ -4019,7 +4020,7 @@ 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, 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" }] });
+        ], 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, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeComponent, decorators: [{
             type: Component,
@@ -4038,7 +4039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: SI_FORM_ITEM_CONTROL,
                             useExisting: SiDateRangeComponent
                         }
-                    ], host: {
+                    ], changeDetection: ChangeDetectionStrategy.Default, host: {
                         class: 'form-control d-flex align-items-center',
                         role: 'group',
                         '[class.disabled]': 'disabled()',