@siemens/element-ng 47.8.0 → 48.0.0-next.1

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

@@ -1,6 +1,6 @@
-import { getLocaleDayPeriods, FormStyle, TranslationWidth, getLocaleId, getLocaleDateTimeFormat, FormatWidth, getLocaleTimeFormat, getLocaleDateFormat, formatDate, NgClass, DatePipe, NgTemplateOutlet, getLocaleFirstDayOfWeek, WeekDay, DOCUMENT } from '@angular/common';
+import { getLocaleDayPeriods, FormStyle, TranslationWidth, getLocaleId, getLocaleDateTimeFormat, FormatWidth, getLocaleTimeFormat, getLocaleDateFormat, formatDate, NgClass, 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, ChangeDetectorRef, SimpleChange, DestroyRef, contentChild, NgModule } from '@angular/core';
+import { input, model, output, booleanAttribute, computed, signal, inject, LOCALE_ID, HostListener, Directive, ElementRef, viewChildren, Component, ChangeDetectionStrategy, viewChild, HostAttributeToken, ChangeDetectorRef, SimpleChange, DOCUMENT, DestroyRef, contentChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgControl } from '@angular/forms';
 import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
@@ -14,7 +14,7 @@ import { Subject, merge } from 'rxjs';
 import { takeUntil, skip, map, filter, tap } from 'rxjs/operators';
 import * as i2 from '@angular/cdk/a11y';
 import { A11yModule, FocusMonitor, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
-import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 import { addIcons, elementRight2, elementLeft2, SiIconNextComponent, elementCalendar } from '@siemens/element-ng/icon';
 
 /**
@@ -745,12 +745,6 @@ class SiDateInputDirective {
      * ```
      */
     siDatepickerConfig = model({});
-    /**
-     * @deprecated Property has no effect and will be removed without a replacement.
-     *
-     * @defaultValue 200
-     */
-    dateInputDebounceTime = input(200);
     /**
      * 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.
@@ -870,7 +864,8 @@ class SiDateInputDirective {
      * Handles `input` events on the input element.
      * @param value - current input value.
      */
-    onInput(value) {
+    onInput(event) {
+        const value = event.target.value;
         const parsedDate = parseDate(value, this.getFormat(), this.locale);
         // Is same date
         const hasChanged = !(parsedDate === this.date);
@@ -943,8 +938,8 @@ class SiDateInputDirective {
             ? null
             : { maxDate: { max, actual: controlValue } };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiDateInputDirective, isStandalone: true, selector: "[siDateInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, siDatepickerConfig: { classPropertyName: "siDatepickerConfig", publicName: "siDatepickerConfig", isSignal: true, isRequired: false, transformFunction: null }, dateInputDebounceTime: { classPropertyName: "dateInputDebounceTime", publicName: "dateInputDebounceTime", 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.target.value)", "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: "20.0.6", ngImport: i0, type: SiDateInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SiDateInputDirective,
@@ -961,10 +956,10 @@ class SiDateInputDirective {
             }
         ], exportAs: ["siDateInput"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDateInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[siDateInput]',
+                    selector: 'input[siDateInput]',
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -993,7 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }], propDecorators: { onInput: [{
                 type: HostListener,
-                args: ['input', ['$event.target.value']]
+                args: ['input', ['$event']]
             }], onBlur: [{
                 type: HostListener,
                 args: ['blur', ['$event']]
@@ -1008,10 +1003,10 @@ class SiCalendarDateCellDirective {
     compareAdapter = input.required();
     /** @defaultValue inject(ElementRef) */
     ref = inject(ElementRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarDateCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", 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" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCalendarDateCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", 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" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarDateCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCalendarDateCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siCalendarDateCell]',
@@ -1238,10 +1233,10 @@ class SiCalendarBodyComponent {
             this.focusedDate.set(cell.valueRaw);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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\" [ngClass]=\"rowLabelCssClasses()\">\n        {{ rowLabels()?.at(rowIndex) ?? '' }}\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.range-hover]=\"\n          previewRange() && selection().previewRangeHover(col, activeHover(), startDate())\n        \"\n        [class.range-hover-end]=\"\n          previewRange() && selection().previewRangeHoverEnd(col, activeHover(), startDate())\n        \"\n        [class.range]=\"selection().inRange(col, startDate(), endDate())\"\n        [class.range-start]=\"selection().isRangeSelected(col, startDate())\"\n        [class.range-end]=\"selection().isRangeSelected(col, endDate())\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [ngClass]=\"cellCss(col)\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: SiCalendarDateCellDirective, selector: "[siCalendarDateCell]", inputs: ["cell", "compareAdapter"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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\" [ngClass]=\"rowLabelCssClasses()\">\n        {{ rowLabels()?.at(rowIndex) ?? '' }}\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.range-hover]=\"\n          previewRange() && selection().previewRangeHover(col, activeHover(), startDate())\n        \"\n        [class.range-hover-end]=\"\n          previewRange() && selection().previewRangeHoverEnd(col, activeHover(), startDate())\n        \"\n        [class.range]=\"selection().inRange(col, startDate(), endDate())\"\n        [class.range-start]=\"selection().isRangeSelected(col, startDate())\"\n        [class.range-end]=\"selection().isRangeSelected(col, endDate())\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [ngClass]=\"cellCss(col)\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: SiCalendarDateCellDirective, selector: "[siCalendarDateCell]", inputs: ["cell", "compareAdapter"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCalendarBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: '[si-calendar-body]', imports: [NgClass, A11yModule, SiCalendarDateCellDirective], host: {
                         class: 'si-calendar-body'
@@ -1267,8 +1262,8 @@ class SiCalendarDirectionButtonComponent {
     onClick() {
         this.clicked.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarDirectionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", 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
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCalendarDirectionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", 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
     role="button"
     type="button"
     class="btn btn-circle btn-sm btn-tertiary"
@@ -1280,7 +1275,7 @@ class SiCalendarDirectionButtonComponent {
     <si-icon-next class="icon flip-rtl" [icon]="icon()" />
   </button>`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarDirectionButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCalendarDirectionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-calendar-direction-button',
@@ -1376,10 +1371,10 @@ class SiInitialFocusComponent {
     onActiveHoverChange(event) {
         this.activeHover.set(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiInitialFocusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiInitialFocusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", 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: "19.0.6", ngImport: i0, type: SiInitialFocusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiInitialFocusComponent, decorators: [{
             type: Component,
             args: [{
                     template: ''
@@ -1415,7 +1410,7 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
     /** Today button text */
     todayLabel = input();
     /** Aria label for calendar week column */
-    calenderWeekLabel = input();
+    calendarWeekLabel = input();
     /** 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 */
@@ -1562,12 +1557,12 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
     emitViewChange(view) {
         this.viewChange.emit(view);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDaySelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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 }, calenderWeekLabel: { classPropertyName: "calenderWeekLabel", publicName: "calenderWeekLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange" }, 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-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\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-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\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<table class=\"px-9 mt-6\" 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\">{{ calenderWeekLabel() | 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 class=\"footer pt-2 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    {{ todayLabel() ?? 'Today' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { 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: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDaySelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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" }, 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-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\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-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\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<table class=\"px-9 mt-6\" 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 class=\"footer pt-2 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    {{ todayLabel() ?? 'Today' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { 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: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDaySelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDaySelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-day-selection', imports: [DatePipe, SiCalendarBodyComponent, SiCalendarDirectionButtonComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, 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-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\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-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\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<table class=\"px-9 mt-6\" 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\">{{ calenderWeekLabel() | 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 class=\"footer pt-2 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    {{ todayLabel() ?? 'Today' | translate }}\n  </button>\n</div>\n" }]
+            args: [{ selector: 'si-day-selection', imports: [DatePipe, SiCalendarBodyComponent, SiCalendarDirectionButtonComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, 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-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\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-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\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<table class=\"px-9 mt-6\" 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 class=\"footer pt-2 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    {{ todayLabel() ?? 'Today' | translate }}\n  </button>\n</div>\n" }]
         }] });
 
 /**
@@ -1733,10 +1728,10 @@ class SiMonthSelectionComponent extends SiInitialFocusComponent {
         }
         this.monthCells.push(row);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiMonthSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", 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)" } }, 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    tabindex=\"0\"\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<table class=\"px-9 mt-6\" 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", 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: "20.0.6", ngImport: i0, type: SiMonthSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", 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)" } }, 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    tabindex=\"0\"\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<table class=\"px-9 mt-6\" 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", 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiMonthSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMonthSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-month-selection', imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, 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    tabindex=\"0\"\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<table class=\"px-9 mt-6\" 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" }]
         }], propDecorators: { triggerEsc: [{
@@ -1942,10 +1937,10 @@ class SiYearSelectionComponent extends SiInitialFocusComponent {
             this.initView();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiYearSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", 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)" } }, 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-title-1 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<table class=\"px-9 mt-6\" 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", 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: "20.0.6", ngImport: i0, type: SiYearSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", 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)" } }, 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-title-1 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<table class=\"px-9 mt-6\" 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", 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiYearSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiYearSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-year-selection', imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, 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-title-1 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<table class=\"px-9 mt-6\" 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" }]
         }], propDecorators: { triggerEsc: [{
@@ -2008,31 +2003,31 @@ class SiTimepickerComponent {
     /**
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.HOURS:Hours`
+     * t(() => $localize`:@@SI_DATEPICKER.HOURS:Hours`)
      * ```
      */
-    hoursAriaLabel = input($localize `:@@SI_DATEPICKER.HOURS:Hours`);
+    hoursAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.HOURS:Hours`));
     /**
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.MINUTES:Minutes`
+     * t(() => $localize`:@@SI_DATEPICKER.MINUTES:Minutes`)
      * ```
      */
-    minutesAriaLabel = input($localize `:@@SI_DATEPICKER.MINUTES:Minutes`);
+    minutesAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.MINUTES:Minutes`));
     /**
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.SECONDS:Seconds`
+     * t(() => $localize`:@@SI_DATEPICKER.SECONDS:Seconds`)
      * ```
      */
-    secondsAriaLabel = input($localize `:@@SI_DATEPICKER.SECONDS:Seconds`);
+    secondsAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.SECONDS:Seconds`));
     /**
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`
+     * t(() => $localize`:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`)
      * ```
      */
-    millisecondsAriaLabel = input($localize `:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`);
+    millisecondsAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`));
     /**
      * @defaultValue 'hh'
      */
@@ -2057,10 +2052,10 @@ class SiTimepickerComponent {
     /**
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.PERIOD:Period`
+     * t(() => $localize`:@@SI_DATEPICKER.PERIOD:Period`)
      * ```
      */
-    meridiansAriaLabel = input($localize `:@@SI_DATEPICKER.PERIOD:Period`);
+    meridiansAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.PERIOD:Period`));
     /** @defaultValue true */
     showMinutes = input(true, { transform: booleanAttribute });
     /** @defaultValue false */
@@ -2527,7 +2522,7 @@ class SiTimepickerComponent {
             return;
         }
         const targets = this.inputParts();
-        const position = targets?.findIndex(t => t.nativeElement === target);
+        const position = targets?.findIndex(ref => ref.nativeElement === target);
         if (position === undefined || position === -1) {
             return;
         }
@@ -2543,8 +2538,8 @@ class SiTimepickerComponent {
             this.onTouched();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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 } }, 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: "20.0.6", ngImport: i0, type: SiTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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 } }, 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,
@@ -2556,7 +2551,7 @@ class 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  <label class=\"min-width\">\n    @if (!hideLabels()) {\n      <span class=\"form-label\">{{ (hoursLabel() | translate) || '&nbsp;' }}</span>\n    }\n    <input\n      #inputPart\n      type=\"text\"\n      inputmode=\"numeric\"\n      pattern=\"2[0-4]|[01]?[0-9]\"\n      class=\"form-control hide-feedback-icon\"\n      name=\"hours\"\n      maxlength=\"2\"\n      autocomplete=\"off\"\n      [attr.aria-label]=\"hoursAriaLabel() | translate\"\n      [attr.aria-describedby]=\"errormessageId\"\n      [class.is-invalid]=\"invalidHours\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [placeholder]=\"hoursPlaceholder()\"\n      [value]=\"hours\"\n      (change)=\"updateHours(toHtmlInputElement($event.target).value)\"\n      (blur)=\"updateHours(toHtmlInputElement($event.target).value)\"\n      (keydown)=\"handleKeyPressEvent($event)\"\n    />\n  </label>\n\n  @if (showMinutes()) {\n    <ng-container *ngTemplateOutlet=\"separator\" />\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (minutesLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        type=\"text\"\n        inputmode=\"numeric\"\n        pattern=\"[0-5]?[0-9]\"\n        class=\"form-control hide-feedback-icon\"\n        name=\"minutes\"\n        maxlength=\"2\"\n        autocomplete=\"off\"\n        [attr.aria-label]=\"minutesAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.is-invalid]=\"invalidMinutes\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"minutesPlaceholder()\"\n        [value]=\"minutes\"\n        (change)=\"updateMinutes(toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateMinutes(toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n\n  @if (showSeconds()) {\n    <ng-container *ngTemplateOutlet=\"separator\" />\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (secondsLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        type=\"text\"\n        inputmode=\"numeric\"\n        pattern=\"[0-5]?[0-9]\"\n        class=\"form-control hide-feedback-icon\"\n        name=\"seconds\"\n        maxlength=\"2\"\n        autocomplete=\"off\"\n        [attr.aria-label]=\"secondsAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.is-invalid]=\"invalidSeconds\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"secondsPlaceholder()\"\n        [value]=\"seconds\"\n        (change)=\"updateSeconds(toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateSeconds(toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n\n  @if (showMilliseconds()) {\n    <ng-container *ngTemplateOutlet=\"separator; context: { separator: '.' }\" />\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (millisecondsLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        type=\"text\"\n        inputmode=\"numeric\"\n        pattern=\"[0-9]{1,3}\"\n        class=\"form-control hide-feedback-icon\"\n        name=\"milliseconds\"\n        maxlength=\"3\"\n        autocomplete=\"off\"\n        [attr.aria-label]=\"millisecondsAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.is-invalid]=\"invalidMilliseconds\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"millisecondsPlaceholder()\"\n        [value]=\"milliseconds\"\n        (change)=\"updateMilliseconds(toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateMilliseconds(toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\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}.min-width{inline-size:100%;max-inline-size:45px;min-inline-size:35px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-timepicker', imports: [NgTemplateOutlet, FormsModule, SiTranslatePipe, A11yModule], providers: [
                         {
@@ -2626,28 +2621,39 @@ class SiDatepickerComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.PREVIOUS:Previous`
+     * t(() => $localize`:@@SI_DATEPICKER.PREVIOUS:Previous`)
      * ```
      */
-    previousLabel = input($localize `:@@SI_DATEPICKER.PREVIOUS:Previous`);
+    previousLabel = input(t(() => $localize `:@@SI_DATEPICKER.PREVIOUS:Previous`));
     /**
      * Aria label for the next button. Needed for a11y.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.NEXT:Next`
+     * t(() => $localize`:@@SI_DATEPICKER.NEXT:Next`)
+     * ```
+     */
+    nextLabel = input(t(() => $localize `:@@SI_DATEPICKER.NEXT:Next`));
+    /**
+     * Aria label for week number column
+     *
+     * @deprecated Use `calendarWeekLabel` instead.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`)
      * ```
      */
-    nextLabel = input($localize `:@@SI_DATEPICKER.NEXT:Next`);
+    calenderWeekLabel = input();
     /**
      * Aria label for week number column
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`
+     * t(() => $localize`:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`)
      * ```
      */
-    calenderWeekLabel = input($localize `:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`);
+    calendarWeekLabel = input(t(() => $localize `:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`));
+    derivedWeekLabel = computed(() => this.calenderWeekLabel() ?? this.calendarWeekLabel());
     /**
      * Enable/disable 12H mode in timepicker. Defaults to locale
      *
@@ -2708,8 +2714,8 @@ class SiDatepickerComponent {
                 ? this.dateRange()?.end
                 : this.dateRange()?.start;
     }
-    defaultDisabledTimeText = $localize `:@@SI_DATEPICKER.DISABLED_TIME_TEXT:Ignore time`;
-    defaultEnableTimeText = $localize `:@@SI_DATEPICKER.ENABLED_TIME_TEXT:Consider time`;
+    defaultDisabledTimeText = t(() => $localize `:@@SI_DATEPICKER.DISABLED_TIME_TEXT:Ignore time`);
+    defaultEnableTimeText = t(() => $localize `:@@SI_DATEPICKER.ENABLED_TIME_TEXT:Consider time`);
     includeTimeLabel = computed(() => this.disabledTime()
         ? (this.config().disabledTimeText ?? this.defaultDisabledTimeText)
         : (this.config().enabledTimeText ?? this.defaultEnableTimeText));
@@ -3085,10 +3091,10 @@ class SiDatepickerComponent {
     onActiveHoverChange(event) {
         this.activeHover.set(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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 }, 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: "timePicker", first: true, predicate: SiTimepickerComponent, descendants: true, isSignal: true }, { 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          [calenderWeekLabel]=\"calenderWeekLabel()\"\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        [ngModel]=\"time\"\n        [disabled]=\"disabledTime()\"\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        (ngModelChange)=\"timeSelected($event)\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .selection .month:not(.disabled):hover,:host ::ng-deep .selection .year:not(.disabled):hover,: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 .day{block-size:32px;line-height:32px;inline-size:100%}:host ::ng-deep .day{inline-size:32px}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{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;inline-size:348px}:host ::ng-deep .header,:host ::ng-deep .footer{display:flex;align-items:center}:host ::ng-deep .header{padding-block-start:12px;padding-block-end:16px;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;text-align:center}:host ::ng-deep table{inline-size:100%;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.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .year.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td[role=gridcell]{text-align:center}:host ::ng-deep th{font-weight:400;text-align:center;block-size:32px}:host ::ng-deep .week-num,:host ::ng-deep th{font-size:.75rem;color:var(--element-text-secondary);inline-size:32px;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 .selection .month,:host ::ng-deep .selection .year{block-size:30px;line-height:30px;cursor:pointer}:host ::ng-deep .selection .month{inline-size:50%}:host ::ng-deep .selection .year{inline-size:33.3%}: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-title-1: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-title-1:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-1: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:700;font-size:.875rem;line-height:1.143;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .calendar{block-size:28em}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"], dependencies: [{ 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", "calenderWeekLabel"], 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"], outputs: ["isValid", "meridianChange", "inputCompleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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: "timePicker", first: true, predicate: SiTimepickerComponent, descendants: true, isSignal: true }, { 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        [ngModel]=\"time\"\n        [disabled]=\"disabledTime()\"\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        (ngModelChange)=\"timeSelected($event)\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .selection .month:not(.disabled):hover,:host ::ng-deep .selection .year:not(.disabled):hover,: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 .day{block-size:32px;line-height:32px;inline-size:100%}:host ::ng-deep .day{inline-size:32px}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{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;inline-size:348px}:host ::ng-deep .header,:host ::ng-deep .footer{display:flex;align-items:center}:host ::ng-deep .header{padding-block-start:12px;padding-block-end:16px;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;text-align:center}:host ::ng-deep table{inline-size:100%;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.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .year.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td[role=gridcell]{text-align:center}:host ::ng-deep th{font-weight:400;text-align:center;block-size:32px}:host ::ng-deep .week-num,:host ::ng-deep th{font-size:.75rem;color:var(--element-text-secondary);inline-size:32px;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 .selection .month,:host ::ng-deep .selection .year{block-size:30px;line-height:30px;cursor:pointer}:host ::ng-deep .selection .month{inline-size:50%}:host ::ng-deep .selection .year{inline-size:33.3%}: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-title-1: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-title-1:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-1: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:700;font-size:.875rem;line-height:1.143;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .calendar{block-size:28em}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"], dependencies: [{ 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"], outputs: ["isValid", "meridianChange", "inputCompleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-datepicker', imports: [
                         SiYearSelectionComponent,
@@ -3097,7 +3103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         SiTimepickerComponent,
                         FormsModule,
                         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          [calenderWeekLabel]=\"calenderWeekLabel()\"\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        [ngModel]=\"time\"\n        [disabled]=\"disabledTime()\"\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        (ngModelChange)=\"timeSelected($event)\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .selection .month:not(.disabled):hover,:host ::ng-deep .selection .year:not(.disabled):hover,: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 .day{block-size:32px;line-height:32px;inline-size:100%}:host ::ng-deep .day{inline-size:32px}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{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;inline-size:348px}:host ::ng-deep .header,:host ::ng-deep .footer{display:flex;align-items:center}:host ::ng-deep .header{padding-block-start:12px;padding-block-end:16px;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;text-align:center}:host ::ng-deep table{inline-size:100%;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.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .year.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td[role=gridcell]{text-align:center}:host ::ng-deep th{font-weight:400;text-align:center;block-size:32px}:host ::ng-deep .week-num,:host ::ng-deep th{font-size:.75rem;color:var(--element-text-secondary);inline-size:32px;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 .selection .month,:host ::ng-deep .selection .year{block-size:30px;line-height:30px;cursor:pointer}:host ::ng-deep .selection .month{inline-size:50%}:host ::ng-deep .selection .year{inline-size:33.3%}: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-title-1: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-title-1:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-1: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:700;font-size:.875rem;line-height:1.143;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .calendar{block-size:28em}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"] }]
+                    ], 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        [ngModel]=\"time\"\n        [disabled]=\"disabledTime()\"\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        (ngModelChange)=\"timeSelected($event)\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .selection .month:not(.disabled):hover,:host ::ng-deep .selection .year:not(.disabled):hover,: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 .day{block-size:32px;line-height:32px;inline-size:100%}:host ::ng-deep .day{inline-size:32px}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{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;inline-size:348px}:host ::ng-deep .header,:host ::ng-deep .footer{display:flex;align-items:center}:host ::ng-deep .header{padding-block-start:12px;padding-block-end:16px;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;text-align:center}:host ::ng-deep table{inline-size:100%;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.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .year.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td[role=gridcell]{text-align:center}:host ::ng-deep th{font-weight:400;text-align:center;block-size:32px}:host ::ng-deep .week-num,:host ::ng-deep th{font-size:.75rem;color:var(--element-text-secondary);inline-size:32px;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 .selection .month,:host ::ng-deep .selection .year{block-size:30px;line-height:30px;cursor:pointer}:host ::ng-deep .selection .month{inline-size:50%}:host ::ng-deep .selection .year{inline-size:33.3%}: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-title-1: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-title-1:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-1: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:700;font-size:.875rem;line-height:1.143;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .calendar{block-size:28em}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -3143,12 +3149,6 @@ class SiDatepickerOverlayComponent {
      * When time is disable, we construct a pure date object in UTC 00:00:00 time.
      */
     disabledTimeChange = output();
-    /**
-     * @deprecated Property provides internal information that should not be used.
-     *
-     * @defaultValue false
-     */
-    isFocused = false;
     document = inject(DOCUMENT);
     elementRef = inject(ElementRef);
     focusMonitor = inject(FocusMonitor);
@@ -3194,12 +3194,6 @@ class SiDatepickerOverlayComponent {
             setTimeout(() => this.completeAnimation.set(true), 150);
         }
     }
-    ngAfterViewInit() {
-        // Monitor focus events
-        this.focusMonitor
-            .monitor(this.elementRef, true)
-            .subscribe(origin => (this.isFocused = origin !== undefined));
-    }
     ngOnDestroy() {
         this.focusMonitor.stopMonitoring(this.elementRef);
         this.focusTrap.destroy();
@@ -3233,8 +3227,8 @@ class SiDatepickerOverlayComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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: "20.0.6", ngImport: i0, type: SiDatepickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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: `
     <si-datepicker
       #datepicker
       tabindex="-1"
@@ -3281,9 +3275,9 @@ class SiDatepickerOverlayComponent {
         (rangeTypeChange)="rangeType.set($event)"
       />
     }
-  `, isInline: true, styles: [":host{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:348px}.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", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "ngmodule", type: A11yModule }], changeDetection: i0.ChangeDetectionStrategy.Default });
+  `, isInline: true, styles: [":host{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:348px}.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.Default });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-datepicker-overlay', imports: [SiDatepickerComponent, A11yModule], template: `
     <si-datepicker
@@ -3402,22 +3396,6 @@ class SiDatepickerOverlayDirective {
         this.overlayRef?.dispose();
         this.datepickerRef = undefined;
     }
-    /**
-     * Toggle open/close overlay.
-     * @param focus - move focus to the datepicker.
-     * @param inputs - for datepicker.
-     * @returns create datepicker overlay instance or undefined
-     *
-     * @deprecated Use {@link showOverlay} or {@link closeOverlay} instead.
-     */
-    toggleOverlay(focus, inputs) {
-        if (!this.datepickerRef) {
-            return this.showDatepicker().setInputs(inputs).focus(focus).datepickerRef;
-        }
-        else {
-            return this.closeOverlay();
-        }
-    }
     /**
      * Show datepicker overlay.
      * @param focus - move focus to the datepicker.
@@ -3450,10 +3428,6 @@ class SiDatepickerOverlayDirective {
         }
         return this;
     }
-    /** @deprecated Property provides internal information that should not be used. */
-    isFocused() {
-        return this.datepickerRef?.instance.isFocused ?? false;
-    }
     /**
      * Indicate the datepicker is visible.
      * @returns is visible.
@@ -3553,10 +3527,10 @@ class SiDatepickerOverlayDirective {
         return merge(this.autoCloseSelection.pipe(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: "19.0.6", ngImport: i0, type: SiDatepickerOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiDatepickerOverlayDirective, isStandalone: true, selector: "[siDatepickerOverlay]", outputs: { siDatepickerClose: "siDatepickerClose" }, exportAs: ["siDatepickerOverlay"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SiDatepickerOverlayDirective, isStandalone: true, selector: "[siDatepickerOverlay]", outputs: { siDatepickerClose: "siDatepickerClose" }, exportAs: ["siDatepickerOverlay"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerOverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siDatepickerOverlay]',
@@ -3577,12 +3551,6 @@ class SiDatepickerDirective extends SiDateInputDirective {
      * @defaultValue false
      */
     autoClose = input(false, { transform: booleanAttribute });
-    /**
-     * @deprecated Property has no effect and will be removed without replacement.
-     *
-     * @defaultValue inject(ElementRef)
-     */
-    triggeringInput = input(inject(ElementRef));
     /**
      * 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.
@@ -3671,8 +3639,8 @@ class SiDatepickerDirective extends SiDateInputDirective {
             setTimeout(() => this.overlayToggle.closeAfterSelection());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiDatepickerDirective, isStandalone: true, selector: "[siDatepicker]", inputs: { autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, triggeringInput: { classPropertyName: "triggeringInput", publicName: "triggeringInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown.tab": "onTab()", "focus": "focusChange()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", 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,
@@ -3689,7 +3657,7 @@ class SiDatepickerDirective extends SiDateInputDirective {
             }
         ], exportAs: ["siDatepicker"], usesInheritance: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siDatepicker]',
@@ -3719,7 +3687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }], propDecorators: { onClick: [{
                 type: HostListener,
-                args: ['click', ['$event']]
+                args: ['click']
             }], onTab: [{
                 type: HostListener,
                 args: ['keydown.tab']
@@ -3762,52 +3730,46 @@ class SiDateRangeComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.START_DATE_PLACEHOLDER:Start date`
+     * t(() => $localize`:@@SI_DATEPICKER.START_DATE_PLACEHOLDER:Start date`)
      * ```
      */
-    startDatePlaceholder = input($localize `:@@SI_DATEPICKER.START_DATE_PLACEHOLDER:Start date`);
+    startDatePlaceholder = input(t(() => $localize `:@@SI_DATEPICKER.START_DATE_PLACEHOLDER:Start date`));
     /**
      * Placeholder of the end date input.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.END_DATE_PLACEHOLDER:End date`
+     * t(() => $localize`:@@SI_DATEPICKER.END_DATE_PLACEHOLDER:End date`)
      * ```
      */
-    endDatePlaceholder = input($localize `:@@SI_DATEPICKER.END_DATE_PLACEHOLDER:End date`);
+    endDatePlaceholder = input(t(() => $localize `:@@SI_DATEPICKER.END_DATE_PLACEHOLDER:End date`));
     /**
      * Aria label of the date-range calendar toggle button.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`
+     * t(() => $localize`:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`)
      * ```
      */
-    ariaLabelCalendarButton = input($localize `:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`);
+    ariaLabelCalendarButton = input(t(() => $localize `:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`));
     /**
      * Form label of the start timepicker.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.START_TIME_LABEL:from`
+     * t(() => $localize`:@@SI_DATEPICKER.START_TIME_LABEL:from`)
      * ```
      */
-    startTimeLabel = input($localize `:@@SI_DATEPICKER.START_TIME_LABEL:from`);
+    startTimeLabel = input(t(() => $localize `:@@SI_DATEPICKER.START_TIME_LABEL:from`));
     /**
      * Form label of the start timepicker.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.END_TIME_LABEL:to`
+     * t(() => $localize`:@@SI_DATEPICKER.END_TIME_LABEL:to`)
      * ```
      */
-    endTimeLabel = input($localize `:@@SI_DATEPICKER.END_TIME_LABEL:to`);
-    /**
-     * @deprecated Property has no effect and will be removed without a replacement.
-     *
-     * @defaultValue 200
-     */
-    debounceTime = input(200);
+    endTimeLabel = input(t(() => $localize `:@@SI_DATEPICKER.END_TIME_LABEL:to`));
     /**
      * Automatically close overlay on date selection.
      *
@@ -4012,8 +3974,8 @@ class SiDateRangeComponent {
             this.value.set(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", 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 }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", 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 } }, 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 pe-2" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", 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 } }, 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 pe-2" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SiDateRangeComponent,
@@ -4028,9 +3990,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, 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<button\n  #button\n  type=\"button\"\n  class=\"btn btn-circle btn-tertiary btn-xs\"\n  [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n  [disabled]=\"disabled() || readonly()\"\n  (click)=\"show()\"\n>\n  <si-icon-next [icon]=\"icons.elementCalendar\" />\n</button>\n", styles: [":host{display:block;min-inline-size:237px;--si-action-icon-offset: 22px}:host(:focus-within){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:disabled::placeholder{color:transparent}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)}.btn-circle{margin-inline-start:var(--si-feedback-icon-offset, 4px)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDateInputDirective, selector: "[siDateInput]", inputs: ["id", "siDatepickerConfig", "dateInputDebounceTime", "disabled", "readonly", "errormessageId"], outputs: ["siDatepickerConfigChange", "siDatepickerDisabledTime", "stateChange", "dateChange"], exportAs: ["siDateInput"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: A11yModule }] });
+        ], 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<button\n  #button\n  type=\"button\"\n  class=\"btn btn-circle btn-tertiary btn-xs\"\n  [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n  [disabled]=\"disabled() || readonly()\"\n  (click)=\"show()\"\n>\n  <si-icon-next [icon]=\"icons.elementCalendar\" />\n</button>\n", styles: [":host{display:block;min-inline-size:237px;--si-action-icon-offset: 22px}:host(:focus-within){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:disabled::placeholder{color:transparent}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)}.btn-circle{margin-inline-start:var(--si-feedback-icon-offset, 4px)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: A11yModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-date-range', imports: [FormsModule, SiDateInputDirective, SiIconNextComponent, SiTranslatePipe, A11yModule], providers: [
                         {
@@ -4089,10 +4051,10 @@ class SiCalendarButtonComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`
+     * t(() => $localize`:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`)
      * ```
      */
-    ariaLabel = input($localize `:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`);
+    ariaLabel = input(t(() => $localize `:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`));
     button = viewChild.required('calendarButton');
     /** Datepicker input directive instance used to watch for state changes and required to open the calendar. */
     datepicker = contentChild.required(SiDatepickerDirective);
@@ -4134,8 +4096,8 @@ class SiCalendarButtonComponent {
         const datepicker = this.datepicker();
         this.disabled.set(datepicker.disabled() || datepicker.readonly());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: SiCalendarButtonComponent, isStandalone: true, selector: "si-calendar-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ng-invalid": "showValidationMessages()", "class.ng-touched": "showValidationMessages()" }, 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: "20.0.6", ngImport: i0, type: SiCalendarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: SiCalendarButtonComponent, isStandalone: true, selector: "si-calendar-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ng-invalid": "showValidationMessages()", "class.ng-touched": "showValidationMessages()" }, 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 />
     <button
       #calendarButton
       name="open-calendar"
@@ -4148,7 +4110,7 @@ class SiCalendarButtonComponent {
       <si-icon-next [icon]="icons.elementCalendar" />
     </button>`, isInline: true, styles: [":host{--si-action-icon-offset: 24px}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCalendarButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-calendar-button', imports: [SiIconNextComponent, SiTranslatePipe], template: `<ng-content />
     <button
@@ -4173,8 +4135,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiDatepickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerModule, imports: [SiCalendarButtonComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerModule, imports: [SiCalendarButtonComponent,
             SiDateInputDirective,
             SiDatepickerComponent,
             SiDatepickerDirective,
@@ -4185,12 +4147,12 @@ class SiDatepickerModule {
             SiDatepickerDirective,
             SiDateRangeComponent,
             SiTimepickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerModule, imports: [SiCalendarButtonComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerModule, imports: [SiCalendarButtonComponent,
             SiDatepickerComponent,
             SiDateRangeComponent,
             SiTimepickerComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [