@siemens/element-ng 48.1.0 → 48.2.0

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

@@ -1,18 +1,18 @@
 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, 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 { input, model, output, booleanAttribute, computed, signal, inject, LOCALE_ID, HostListener, Directive, ElementRef, viewChildren, Component, ChangeDetectionStrategy, viewChild, HostAttributeToken, effect, ChangeDetectorRef, SimpleChange, DOCUMENT, DestroyRef, contentChild, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormBuilder, ReactiveFormsModule, FormControl, FormsModule, NgControl } from '@angular/forms';
 import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
 import { MediaMatcher, BreakpointObserver } from '@angular/cdk/layout';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
-import { isRTL, getOverlayPositions, positionBottomCenter, positionBottomStart, positionBottomEnd, positionTopCenter, positionTopStart, positionTopEnd } from '@siemens/element-ng/common';
+import { isRTL, positionBottomCenter, positionBottomStart, positionBottomEnd, positionTopCenter, positionTopStart, positionTopEnd } from '@siemens/element-ng/common';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { Subject, merge } from 'rxjs';
 import { takeUntil, skip, map, filter, tap } from 'rxjs/operators';
-import * as i2 from '@angular/cdk/a11y';
+import * as i1 from '@angular/cdk/a11y';
 import { A11yModule, FocusMonitor, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 import { addIcons, elementRight2, elementLeft2, SiIconComponent, elementCalendar } from '@siemens/element-ng/icon';
@@ -678,6 +678,13 @@ const minDate = (first, second) => {
 const maxDate = (first, second) => {
     return !!first && !!second ? (first > second ? first : second) : (first ?? second);
 };
+/**
+ * Indicate whether the time use the 12-hour format
+ */
+const is12HourFormat = (locale, config) => {
+    const dateFormat = getDatepickerFormat(locale, config, true);
+    return dateFormat?.includes('a') ?? false;
+};
 
 /**
  * Returns date / datetime format to be used for rendering a date object as text
@@ -1953,10 +1960,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+const dateWithTime = (base, time) => createDate(base, time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds());
 class SiTimepickerComponent {
     static idCounter = 0;
-    /** @internal */
-    forceInvalid = signal(false);
+    locale = inject(LOCALE_ID).toString();
+    formBuilder = inject(FormBuilder);
     /**
      * @defaultValue
      * ```
@@ -2101,10 +2109,9 @@ class SiTimepickerComponent {
             {
                 ariaLabel: this.hoursAriaLabel(),
                 label: this.hoursLabel(),
-                max: this.isPM() ? 12 : 24,
+                max: this.isPM() ? 12 : 23,
                 maxLength: 2,
                 name: 'hours',
-                pattern: '2[0-4]|[01]?[0-9]',
                 placeholder: this.hoursPlaceholder()
             }
         ];
@@ -2112,10 +2119,9 @@ class SiTimepickerComponent {
             config.push({
                 ariaLabel: this.minutesAriaLabel(),
                 label: this.minutesLabel(),
-                max: 60,
+                max: 59,
                 maxLength: 2,
                 name: 'minutes',
-                pattern: '[0-5]?[0-9]',
                 placeholder: this.minutesPlaceholder()
             });
         }
@@ -2123,10 +2129,9 @@ class SiTimepickerComponent {
             config.push({
                 ariaLabel: this.secondsAriaLabel(),
                 label: this.secondsLabel(),
-                max: 60,
+                max: 59,
                 maxLength: 2,
                 name: 'seconds',
-                pattern: '[0-5]?[0-9]',
                 placeholder: this.secondsPlaceholder()
             });
         }
@@ -2134,10 +2139,9 @@ class SiTimepickerComponent {
             config.push({
                 ariaLabel: this.millisecondsAriaLabel(),
                 label: this.millisecondsLabel(),
-                max: 1000,
+                max: 999,
                 maxLength: 3,
                 name: 'milliseconds',
-                pattern: '[0-9]{1,3}',
                 placeholder: this.millisecondsPlaceholder(),
                 separator: '.'
             });
@@ -2145,35 +2149,24 @@ class SiTimepickerComponent {
         return config;
     });
     /* Input fields state */
-    unitValues = signal({
-        hours: '',
-        minutes: '',
-        seconds: '',
-        milliseconds: ''
+    timeControls = this.formBuilder.group({
+        hours: this.formBuilder.nonNullable.control('', [this.validateTime('hours')]),
+        minutes: this.formBuilder.nonNullable.control('', [this.validateTime('minutes')]),
+        seconds: this.formBuilder.nonNullable.control('', [this.validateTime('seconds')]),
+        milliseconds: this.formBuilder.nonNullable.control('', [this.validateTime('milliseconds')])
     });
-    /** Validation state of the input fields */
-    unitValidation = computed(() => {
-        const units = this.units();
-        const values = this.unitValues();
-        // Only validate if the input fields contain a value.
-        const empty = Object.values(values).every(v => v.length === 0);
-        const valid = empty || this.isValidLimit(this.max(), this.min());
-        const validation = {
-            hours: valid,
-            minutes: valid,
-            seconds: valid,
-            milliseconds: valid
-        };
-        if (!empty && valid) {
-            for (const config of units) {
-                validation[config.name] =
-                    values[config.name].length > 0 && !isNaN(this.toNumber(values[config.name], config.max));
+    /** Indicate whether one of the input fields has an invalid value. */
+    hasInvalidUnit() {
+        const values = this.timeControls.value;
+        for (const config of this.units()) {
+            const unit = values[config.name];
+            if (isNaN(this.toNumber(unit, config.max))) {
+                return true;
             }
         }
-        return validation;
-    });
+        return false;
+    }
     disabledNgControl = signal(false);
-    locale = inject(LOCALE_ID).toString();
     /**
      * Holds the time as date object that is presented by this control.
      */
@@ -2181,6 +2174,23 @@ class SiTimepickerComponent {
     periodDefaults;
     constructor() {
         this.periodDefaults = getLocaleDayPeriods(this.locale, FormStyle.Format, TranslationWidth.Short).slice();
+        effect(() => {
+            if (this.disabled()) {
+                this.timeControls.disable({ emitEvent: false, onlySelf: true });
+            }
+            else {
+                this.timeControls.enable({ emitEvent: false, onlySelf: true });
+            }
+        });
+        Object.values(this.timeControls.controls).forEach(control => {
+            control.valueChanges.subscribe(value => {
+                // Enforce digits only
+                const cleaned = value.replace(/\D/g, '');
+                if (cleaned !== value) {
+                    control?.setValue(cleaned, { emitEvent: false });
+                }
+            });
+        });
     }
     writeValue(obj) {
         if (this.isValidDate(obj)) {
@@ -2203,16 +2213,19 @@ class SiTimepickerComponent {
     setDisabledState(isDisabled) {
         this.disabledNgControl.set(isDisabled);
     }
-    /**
-     * Handle input event to remove non-numeric characters.
-     */
-    handleInput(event) {
-        const inputEl = event.target;
-        const current = inputEl.value;
-        const cleaned = current.replace(/\D/g, '');
-        if (current !== cleaned) {
-            inputEl.value = cleaned;
-        }
+    /** @internal */
+    validate(control) {
+        const childErrors = this.units()
+            .map(u => this.timeControls.controls[u.name].errors)
+            .reduce((prevObj, field) => ({ ...prevObj, ...field }), {});
+        if (childErrors && Object.keys(childErrors).length) {
+            return childErrors;
+        }
+        const errors = {
+            ...this.validateMin(control),
+            ...this.validateMax(control)
+        };
+        return Object.keys(errors).length ? errors : null;
     }
     /**
      * Handle Enter, Arrow up/down and Space key press events.
@@ -2243,15 +2256,12 @@ class SiTimepickerComponent {
     }
     toHtmlInputElement = (target) => target;
     updateField(name, value) {
-        const prev = this.unitValues()[name];
-        const config = this.units().find(u => u.name === name);
-        if (prev !== value) {
-            this.unitValues.update(v => ({ ...v, [name]: value.padStart(config.maxLength, '0') }));
-            this.updateTime();
-        }
+        this.timeControls.get(name)?.setValue(value, { emitEvent: false });
+        this.updateTime();
+        this.onTouched();
     }
     toggleMeridian() {
-        const time = this.changeTime(this.time, { hour: 12 });
+        const time = this.changeTime(this.time, { hours: 12 });
         this.setTime(time);
     }
     /**
@@ -2259,7 +2269,7 @@ class SiTimepickerComponent {
      * accordingly, if they UI input values are valid.
      */
     updateTime() {
-        if (!this.unitValidation()) {
+        if (this.hasInvalidUnit()) {
             this.isValid.emit(false);
             this.onChange(null);
             return;
@@ -2287,12 +2297,12 @@ class SiTimepickerComponent {
      */
     updateUI(value) {
         if (!value || !this.isValidDate(value)) {
-            this.unitValues.set({
+            this.timeControls.setValue({
                 hours: '',
                 minutes: '',
                 seconds: '',
                 milliseconds: ''
-            });
+            }, { emitEvent: false });
             this.meridian.set('am');
             this.meridianChange.emit(this.meridian());
         }
@@ -2311,12 +2321,12 @@ class SiTimepickerComponent {
                     hours = 12;
                 }
             }
-            this.unitValues.set({
+            this.timeControls.setValue({
                 hours: hours.toString().padStart(2, '0'),
                 minutes: time.getMinutes().toString().padStart(2, '0'),
                 seconds: time.getUTCSeconds().toString().padStart(2, '0'),
                 milliseconds: time.getUTCMilliseconds().toString().padStart(3, '0')
-            });
+            }, { emitEvent: false });
         }
     }
     isValidDate(value) {
@@ -2338,11 +2348,12 @@ class SiTimepickerComponent {
         return value;
     }
     createDateUpdate(date) {
-        const value = this.unitValues();
-        let hour = this.toNumber(value.hours, this.isPM() ? 12 : 24);
-        const minute = this.toNumber(value.minutes, 60);
-        const seconds = this.toNumber(value.seconds, 60) || 0;
-        const milliseconds = this.toNumber(value.milliseconds, 1000) || 0;
+        const units = this.units();
+        const value = this.timeControls.value;
+        let hour = this.toNumber(value.hours, units.find(u => u.name === 'hours')?.max);
+        const minute = this.toNumber(value.minutes, units.find(u => u.name === 'minutes')?.max);
+        const seconds = this.toNumber(value.seconds, units.find(u => u.name === 'seconds')?.max) || 0;
+        const milliseconds = this.toNumber(value.milliseconds, units.find(u => u.name === 'milliseconds')?.max) || 0;
         if (this.isPM() && hour !== 12) {
             hour += 12;
         }
@@ -2373,42 +2384,12 @@ class SiTimepickerComponent {
         }
         return value;
     }
-    isValidLimit(max, min) {
-        const refDate = new Date();
-        const newDate = this.createDateUpdate(refDate);
-        if (!newDate) {
-            return false;
-        }
-        let refMax;
-        if (max) {
-            refMax = new Date(refDate);
-            refMax.setHours(max.getHours());
-            refMax.setMinutes(max.getMinutes());
-            refMax.setSeconds(max.getSeconds());
-            refMax.setMilliseconds(max.getMilliseconds());
-        }
-        let refMin;
-        if (min) {
-            refMin = new Date(refDate);
-            refMin.setHours(min.getHours());
-            refMin.setMinutes(min.getMinutes());
-            refMin.setSeconds(min.getSeconds());
-            refMin.setMilliseconds(min.getMilliseconds());
-        }
-        if (refMax && newDate > refMax) {
-            return false;
-        }
-        else if (refMin && newDate < refMin) {
-            return false;
-        }
-        return true;
-    }
     changeTimeComponent(key, up) {
         const change = up ? 1 : -1;
         const date = this.createDateUpdate(new Date());
         switch (key) {
             case 'hours': {
-                const newTime = this.changeTime(date, { hour: change });
+                const newTime = this.changeTime(date, { hours: change });
                 let hour = newTime.getHours();
                 if (this.use12HourClock()) {
                     hour = hour % 12;
@@ -2423,7 +2404,7 @@ class SiTimepickerComponent {
                 break;
             }
             case 'minutes': {
-                const newTime = this.changeTime(date, { minute: change });
+                const newTime = this.changeTime(date, { minutes: change });
                 this.updateField('minutes', newTime.getMinutes().toString());
                 break;
             }
@@ -2452,11 +2433,11 @@ class SiTimepickerComponent {
         let minutes = value.getMinutes();
         let seconds = value.getSeconds();
         let milliseconds = value.getMilliseconds();
-        if (diff.hour) {
-            hour = hour + this.toNumber(diff.hour);
+        if (diff.hours) {
+            hour = hour + this.toNumber(diff.hours);
         }
-        if (diff.minute) {
-            minutes = minutes + this.toNumber(diff.minute);
+        if (diff.minutes) {
+            minutes = minutes + this.toNumber(diff.minutes);
         }
         if (diff.seconds) {
             seconds = seconds + this.toNumber(diff.seconds);
@@ -2491,6 +2472,38 @@ class SiTimepickerComponent {
             this.onTouched();
         }
     }
+    validateMin(control) {
+        const current = control.value;
+        let min = this.min();
+        if (control.value instanceof Date && min) {
+            min = dateWithTime(current, min);
+            if (current < min) {
+                return { minTime: { actual: current, min: min } };
+            }
+        }
+        return null;
+    }
+    validateMax(control) {
+        const error = {};
+        const current = control.value;
+        let max = this.max();
+        if (control.value instanceof Date && max) {
+            max = dateWithTime(current, max);
+            if (current > max) {
+                error.maxTime = { actual: current, max: max };
+            }
+        }
+        return Object.keys(error).length ? error : null;
+    }
+    validateTime(name) {
+        return (c) => {
+            const max = this.units().find(u => u.name === name)?.max;
+            if (max !== undefined && c.value && parseInt(c.value, 10) > max) {
+                return { [name]: { max } };
+            }
+            return null;
+        };
+    }
     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 }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isValid: "isValid", meridianChange: "meridianChange", inputCompleted: "inputCompleted" }, host: { attributes: { "role": "group" }, properties: { "class.readonly": "readonly()", "attr.aria-labelledby": "labelledby" }, classAttribute: "form-custom-control" }, providers: [
             {
@@ -2498,20 +2511,30 @@ class SiTimepickerComponent {
                 useExisting: SiTimepickerComponent,
                 multi: true
             },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: SiTimepickerComponent,
+                multi: true
+            },
             {
                 provide: SI_FORM_ITEM_CONTROL,
                 useExisting: SiTimepickerComponent
             }
-        ], viewQueries: [{ propertyName: "inputParts", predicate: ["inputPart"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [class.is-invalid]=\"!unitValidation()[config.name] || this.forceInvalid()\"\n        [disabled]=\"disabled()\"\n        [name]=\"config.name\"\n        [pattern]=\"config.pattern\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        [value]=\"unitValues()[config.name]\"\n        (change)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (input)=\"handleInput($event)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}.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 });
+        ], viewQueries: [{ propertyName: "inputParts", predicate: ["inputPart"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [formControl]=\"timeControls.controls[config.name]\"\n        [name]=\"config.name\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}:host.ng-touched.ng-invalid:not(:has(.ng-touched.ng-invalid)) .form-control{--border-color: var(--element-status-danger)}.min-width{inline-size:100%;max-inline-size:45px;min-inline-size:35px}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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: [
+            args: [{ selector: 'si-timepicker', imports: [A11yModule, NgTemplateOutlet, ReactiveFormsModule, SiTranslatePipe], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: SiTimepickerComponent,
                             multi: true
                         },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: SiTimepickerComponent,
+                            multi: true
+                        },
                         {
                             provide: SI_FORM_ITEM_CONTROL,
                             useExisting: SiTimepickerComponent
@@ -2521,7 +2544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         class: 'form-custom-control',
                         '[class.readonly]': 'readonly()',
                         '[attr.aria-labelledby]': 'labelledby'
-                    }, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [class.is-invalid]=\"!unitValidation()[config.name] || this.forceInvalid()\"\n        [disabled]=\"disabled()\"\n        [name]=\"config.name\"\n        [pattern]=\"config.pattern\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        [value]=\"unitValues()[config.name]\"\n        (change)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (input)=\"handleInput($event)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}.min-width{inline-size:100%;max-inline-size:45px;min-inline-size:35px}\n"] }]
+                    }, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [formControl]=\"timeControls.controls[config.name]\"\n        [name]=\"config.name\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}:host.ng-touched.ng-invalid:not(:has(.ng-touched.ng-invalid)) .form-control{--border-color: var(--element-status-danger)}.min-width{inline-size:100%;max-inline-size:45px;min-inline-size:35px}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -2715,13 +2738,15 @@ class SiDatepickerComponent {
      * in separate objects to not change the date when flipping time.
      * After change, a new date object is created with an adapted time.
      */
-    time;
+    time = new FormControl(undefined, {
+        validators: [control => this.validateTime(control)],
+        nonNullable: true
+    });
     /**
      * Used to hold the last time when setting the time to disabled.
      * Value will be reset on enabling the time again.
      */
     previousTime;
-    timePicker = viewChild(SiTimepickerComponent);
     /** Reference to the current day selection component. Shown when view === 'week' */
     daySelection = viewChild(SiDaySelectionComponent);
     /** Reference to the current month selection component. Shown when view === 'month' */
@@ -2742,6 +2767,15 @@ class SiDatepickerComponent {
                 : weekStart === WeekDay.Saturday
                     ? 'saturday'
                     : 'monday';
+        effect(() => {
+            if (this.disabledTime()) {
+                this.time.disable({ emitEvent: false });
+            }
+            else {
+                this.time.enable({ emitEvent: false });
+            }
+        });
+        this.time.valueChanges.subscribe((newTime) => this.timeSelected(newTime));
     }
     ngOnChanges(changes) {
         const config = this.config();
@@ -2753,10 +2787,10 @@ class SiDatepickerComponent {
             if (date) {
                 if (changes.date.isFirstChange()) {
                     this.previousTime = new Date(date);
-                    this.time = date;
+                    this.time.setValue(date, { emitEvent: false });
                 }
-                if (this.time?.getTime() !== date?.getTime()) {
-                    this.time = date;
+                if (this.time.value?.getTime() !== date?.getTime()) {
+                    this.time.setValue(date, { emitEvent: false });
                 }
                 this.focusedDate.set(date);
             }
@@ -2800,7 +2834,7 @@ class SiDatepickerComponent {
                 const newDate = dateRangeRole === 'START' ? dateRange?.start : dateRange?.end;
                 if (newDate && changes.dateRange.isFirstChange()) {
                     this.previousTime = new Date(newDate);
-                    this.time = newDate;
+                    this.time.setValue(newDate, { emitEvent: false });
                 }
             }
         }
@@ -2872,9 +2906,6 @@ class SiDatepickerComponent {
             // eslint-disable-next-line @angular-eslint/no-lifecycle-call
             this.ngOnChanges({ date: new SimpleChange(undefined, date, true) });
         }
-        if (config.enableTimeValidation && this.timePicker() && (config.minDate || config.maxDate)) {
-            this.validateTime(newDate);
-        }
         this.cdRef.markForCheck();
     }
     /**
@@ -2901,25 +2932,20 @@ class SiDatepickerComponent {
         return true;
     }
     timeSelected(newTime) {
-        if (!newTime) {
-            return;
-        }
-        // Break event cycle
-        if (this.time?.getTime() === newTime.getTime()) {
-            this.validateTime(newTime);
+        if (newTime == null || newTime === this.time.value) {
             return;
         }
-        this.previousTime = this.time;
-        this.time = newTime;
+        this.previousTime = this.time.value;
+        this.time.setValue(newTime, { emitEvent: false });
         const oldDate = this.getRelevantDate() ?? new Date();
         let newDate;
         if (this.disabledTime()) {
             // if time is disabled, ensure that 00:00:00 is displayed in any timezone
             newDate = createDate(oldDate);
-            this.time = newDate;
+            this.time.setValue(newDate, { emitEvent: false });
         }
         else {
-            newDate = createDate(oldDate, this.time.getHours(), this.time.getMinutes(), this.time.getSeconds(), this.time.getMilliseconds());
+            newDate = createDate(oldDate, newTime.getHours(), newTime.getMinutes(), newTime.getSeconds(), newTime.getMilliseconds());
         }
         if (!this.config().enableDateRange) {
             this.setDate(newDate);
@@ -2954,27 +2980,26 @@ class SiDatepickerComponent {
             }
         }
     }
-    validateTime(date) {
-        // wait for a cycle to initialize timepicker
-        setTimeout(() => {
-            const config = this.config();
-            const timePicker = this.timePicker();
-            if (!this.disabledTime() &&
-                ((config.minDate && date < config.minDate) || (config.maxDate && date > config.maxDate))) {
-                timePicker.forceInvalid.set(true);
+    validateTime(control) {
+        const config = this.config();
+        const errors = {};
+        if (!this.disabledTime() && config.enableTimeValidation && control.value) {
+            if (config.minDate && control.value < config.minDate) {
+                errors.minDate = { requiredDate: config.minDate, actual: control.value };
             }
-            else {
-                timePicker.forceInvalid.set(false);
+            else if (config.maxDate && control.value > config.maxDate) {
+                errors.maxDate = { requiredDate: config.maxDate, actual: control.value };
             }
-            this.cdRef.markForCheck();
-        });
+        }
+        return Object.keys(errors).length ? errors : null;
     }
     /**
      * Handle selection in the day view.
      * @param selection - selected date.
      */
     selectionChange(selection) {
-        const newDate = createDate(selection, this.time?.getHours(), this.time?.getMinutes(), this.time?.getSeconds(), this.time?.getMilliseconds());
+        const time = this.time.value;
+        const newDate = createDate(selection, time?.getHours(), time?.getMinutes(), time?.getSeconds(), time?.getMilliseconds());
         if (this.config().enableDateRange) {
             const rangeType = this.rangeType();
             let newDateRange = !rangeType || rangeType === 'START'
@@ -3043,18 +3068,18 @@ class SiDatepickerComponent {
         this.activeHover.set(event);
     }
     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-h4:hover{background:transparent}:host ::ng-deep .range-hover{background-color:var(--element-base-1-hover)}:host ::ng-deep .range-hover-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep td:is(.range-start,.range-end){background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) div.si-h4:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-lg:hover{background:transparent;color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) .today:before{border-color:var(--element-ui-5)}:host ::ng-deep td.range-start{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}:host ::ng-deep td.range-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep .calendar-button{font-weight:600;font-size:.875rem;line-height:1.1428571429;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .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", "errormessageId"], 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 ɵ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: "daySelection", first: true, predicate: SiDaySelectionComponent, descendants: true, isSignal: true }, { propertyName: "monthSelection", first: true, predicate: SiMonthSelectionComponent, descendants: true, isSignal: true }, { propertyName: "yearSelection", first: true, predicate: SiYearSelectionComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hideCalendar()) {\n  <div class=\"text-center pb-6 calendar\">\n    @switch (view()) {\n      @case ('year') {\n        <si-year-selection\n          [focusedDate]=\"actualFocusedDate()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          (selectedValueChange)=\"activeYearChange($event)\"\n        />\n      }\n      @case ('month') {\n        <si-month-selection\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [months]=\"months\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"activeMonthChange($event)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n      @case ('week') {\n        <si-day-selection\n          [initialFocus]=\"forceFocus()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"dateRange()?.end\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [hideWeekNumbers]=\"hideWeekNumbers\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [weekStartDay]=\"weekStartDay\"\n          [calendarWeekLabel]=\"derivedWeekLabel()\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [todayLabel]=\"config().todayText\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"selectionChange($event!)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n    }\n  </div>\n}\n@if (this.config().showTime) {\n  <div\n    class=\"timepicker-container px-9 pb-6\"\n    [class.pt-6]=\"!hideCalendar()\"\n    [class.border-top]=\"!hideCalendar()\"\n  >\n    @if (!config().mandatoryTime && !hideTimeToggle()) {\n      <div class=\"mb-5 form-check form-switch\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          role=\"switch\"\n          [id]=\"switchId\"\n          [checked]=\"!disabledTime()\"\n          (change)=\"toggleDisabledTime()\"\n        />\n        <label class=\"form-check-label\" [for]=\"switchId\">{{\n          includeTimeLabel() | translate\n        }}</label>\n      </div>\n    }\n    <div class=\"mt-auto\">\n      @if (timepickerLabel()) {\n        <label class=\"form-label\" [for]=\"timepickerId\">{{ timepickerLabel() | translate }}</label>\n      }\n      <si-timepicker\n        #timePicker\n        [id]=\"timepickerId\"\n        [formControl]=\"time\"\n        [hoursLabel]=\"config().hoursLabel ?? timePicker.hoursLabel()\"\n        [minutesLabel]=\"config().minutesLabel ?? timePicker.minutesLabel()\"\n        [secondsLabel]=\"config().secondsLabel ?? timePicker.secondsLabel()\"\n        [millisecondsLabel]=\"config().millisecondsLabel ?? timePicker.millisecondsLabel()\"\n        [hideLabels]=\"config().hideLabels ?? timePicker.hideLabels()\"\n        [hoursAriaLabel]=\"config().hoursAriaLabel ?? timePicker.hoursAriaLabel()\"\n        [minutesAriaLabel]=\"config().minutesAriaLabel ?? timePicker.minutesAriaLabel()\"\n        [secondsAriaLabel]=\"config().secondsAriaLabel ?? timePicker.secondsAriaLabel()\"\n        [millisecondsAriaLabel]=\"\n          config().millisecondsAriaLabel ?? timePicker.millisecondsAriaLabel()\n        \"\n        [hoursPlaceholder]=\"config().hoursPlaceholder ?? timePicker.hoursPlaceholder()\"\n        [minutesPlaceholder]=\"config().minutesPlaceholder ?? timePicker.minutesPlaceholder()\"\n        [secondsPlaceholder]=\"config().secondsPlaceholder ?? timePicker.secondsPlaceholder()\"\n        [millisecondsPlaceholder]=\"\n          config().millisecondsPlaceholder ?? timePicker.millisecondsPlaceholder()\n        \"\n        [meridians]=\"config().meridians ?? timePicker.meridians()\"\n        [meridiansLabel]=\"config().meridiansLabel ?? timePicker.meridiansLabel()\"\n        [meridiansAriaLabel]=\"config().meridiansAriaLabel ?? timePicker.meridiansAriaLabel()\"\n        [showMinutes]=\"config().showMinutes ?? true\"\n        [showSeconds]=\"config().showSeconds ?? false\"\n        [showMilliseconds]=\"config().showMilliseconds ?? false\"\n        [showMeridian]=\"time12h()\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .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-h4:hover{background:transparent}:host ::ng-deep .range-hover{background-color:var(--element-base-1-hover)}:host ::ng-deep .range-hover-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep td:is(.range-start,.range-end){background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) div.si-h4:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-lg:hover{background:transparent;color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) .today:before{border-color:var(--element-ui-5)}:host ::ng-deep td.range-start{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}:host ::ng-deep td.range-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep .calendar-button{font-weight:600;font-size:.875rem;line-height:1.1428571429;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .calendar{block-size:28em}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SiYearSelectionComponent, selector: "si-year-selection", inputs: ["focusedDate"], outputs: ["focusedDateChange", "yearRangeChange"] }, { kind: "component", type: SiMonthSelectionComponent, selector: "si-month-selection", inputs: ["months", "focusedDate"], outputs: ["focusedDateChange", "activeMonthChange", "viewChange"] }, { kind: "component", type: SiDaySelectionComponent, selector: "si-day-selection", inputs: ["hideWeekNumbers", "weekStartDay", "focusedDate", "todayLabel", "calendarWeekLabel"], outputs: ["focusedDateChange", "activeMonthChange", "viewChange"] }, { kind: "component", type: SiTimepickerComponent, selector: "si-timepicker", inputs: ["id", "disabled", "hoursLabel", "minutesLabel", "secondsLabel", "millisecondsLabel", "hideLabels", "hoursAriaLabel", "minutesAriaLabel", "secondsAriaLabel", "millisecondsAriaLabel", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder", "millisecondsPlaceholder", "meridians", "meridiansLabel", "meridiansAriaLabel", "showMinutes", "showSeconds", "showMilliseconds", "showMeridian", "min", "max", "readonly", "errormessageId"], outputs: ["isValid", "meridianChange", "inputCompleted"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-datepicker', imports: [
+                        ReactiveFormsModule,
                         SiYearSelectionComponent,
                         SiMonthSelectionComponent,
                         SiDaySelectionComponent,
                         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          [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-h4:hover{background:transparent}:host ::ng-deep .range-hover{background-color:var(--element-base-1-hover)}:host ::ng-deep .range-hover-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep td:is(.range-start,.range-end){background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) div.si-h4:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-lg:hover{background:transparent;color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) .today:before{border-color:var(--element-ui-5)}:host ::ng-deep td.range-start{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}:host ::ng-deep td.range-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep .calendar-button{font-weight:600;font-size:.875rem;line-height:1.1428571429;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .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        [formControl]=\"time\"\n        [hoursLabel]=\"config().hoursLabel ?? timePicker.hoursLabel()\"\n        [minutesLabel]=\"config().minutesLabel ?? timePicker.minutesLabel()\"\n        [secondsLabel]=\"config().secondsLabel ?? timePicker.secondsLabel()\"\n        [millisecondsLabel]=\"config().millisecondsLabel ?? timePicker.millisecondsLabel()\"\n        [hideLabels]=\"config().hideLabels ?? timePicker.hideLabels()\"\n        [hoursAriaLabel]=\"config().hoursAriaLabel ?? timePicker.hoursAriaLabel()\"\n        [minutesAriaLabel]=\"config().minutesAriaLabel ?? timePicker.minutesAriaLabel()\"\n        [secondsAriaLabel]=\"config().secondsAriaLabel ?? timePicker.secondsAriaLabel()\"\n        [millisecondsAriaLabel]=\"\n          config().millisecondsAriaLabel ?? timePicker.millisecondsAriaLabel()\n        \"\n        [hoursPlaceholder]=\"config().hoursPlaceholder ?? timePicker.hoursPlaceholder()\"\n        [minutesPlaceholder]=\"config().minutesPlaceholder ?? timePicker.minutesPlaceholder()\"\n        [secondsPlaceholder]=\"config().secondsPlaceholder ?? timePicker.secondsPlaceholder()\"\n        [millisecondsPlaceholder]=\"\n          config().millisecondsPlaceholder ?? timePicker.millisecondsPlaceholder()\n        \"\n        [meridians]=\"config().meridians ?? timePicker.meridians()\"\n        [meridiansLabel]=\"config().meridiansLabel ?? timePicker.meridiansLabel()\"\n        [meridiansAriaLabel]=\"config().meridiansAriaLabel ?? timePicker.meridiansAriaLabel()\"\n        [showMinutes]=\"config().showMinutes ?? true\"\n        [showSeconds]=\"config().showSeconds ?? false\"\n        [showMilliseconds]=\"config().showMilliseconds ?? false\"\n        [showMeridian]=\"time12h()\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .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-h4:hover{background:transparent}:host ::ng-deep .range-hover{background-color:var(--element-base-1-hover)}:host ::ng-deep .range-hover-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep td:is(.range-start,.range-end){background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) div.si-h4:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-lg:hover{background:transparent;color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) .today:before{border-color:var(--element-ui-5)}:host ::ng-deep td.range-start{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}:host ::ng-deep td.range-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep .calendar-button{font-weight:600;font-size:.875rem;line-height:1.1428571429;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .calendar{block-size:28em}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -3454,12 +3479,11 @@ class SiDatepickerOverlayDirective {
         });
     }
     createDesktopOverlay() {
-        const popoverPositions = getOverlayPositions(this.triggerElementRef, this.placement(), false);
         this.overlayRef = this.overlay.create({
             positionStrategy: this.overlay
                 .position()
                 .flexibleConnectedTo(this.triggerElementRef)
-                .withPositions(popoverPositions)
+                .withPositions(this.placement())
                 .withPush(true)
                 .withGrowAfterOpen(true)
                 .withFlexibleDimensions(true)
@@ -3551,7 +3575,7 @@ class SiDatepickerDirective extends SiDateInputDirective {
         this.subscribeDateChanges(this.overlayToggle.showOverlay(initialFocus, {
             config: this.siDatepickerConfig(),
             date: this.date,
-            time12h: this.getTime12h()
+            time12h: is12HourFormat(this.locale, this.siDatepickerConfig() ?? {})
         }));
     }
     /**
@@ -3565,10 +3589,6 @@ class SiDatepickerDirective extends SiDateInputDirective {
             this.show();
         }
     }
-    getTime12h() {
-        const dateFormat = getDatepickerFormat(this.locale, this.siDatepickerConfig(), true);
-        return dateFormat?.includes('a');
-    }
     subscribeDateChanges(overlay) {
         this.overlaySubscriptions?.forEach(s => s.unsubscribe());
         overlay?.instance.date.subscribe(d => this.onDateChanged(d));
@@ -3770,6 +3790,7 @@ class SiDateRangeComponent {
     disabled = computed(() => this.disabledInput() || this.disabledNgControl());
     disabledNgControl = signal(false);
     cdRef = inject(ChangeDetectorRef);
+    locale = inject(LOCALE_ID).toString();
     overlayToggle = inject(SiDatepickerOverlayDirective);
     elementRef = inject(ElementRef);
     defaultPlacement = [
@@ -3853,7 +3874,8 @@ class SiDateRangeComponent {
         }
         this.subscribeRangeChanges(this.overlayToggle.showOverlay(true, {
             config: this.siDatepickerConfig(),
-            dateRange: this.value()
+            dateRange: this.value(),
+            time12h: is12HourFormat(this.locale, this.siDatepickerConfig())
         }));
     }
     subscribeRangeChanges(overlay) {
@@ -3950,7 +3972,7 @@ class SiDateRangeComponent {
                 provide: SI_FORM_ITEM_CONTROL,
                 useExisting: SiDateRangeComponent
             }
-        ], viewQueries: [{ propertyName: "inputDirectives", predicate: SiDateInputDirective, descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0, template: "<input\n  #startInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none\"\n  siDateInput\n  [ngModel]=\"value()?.start ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"startDatePlaceholder() | translate\"\n  [attr.aria-label]=\"startDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: $event, end: value()?.end })\"\n/>\n<span class=\"mx-3\">-</span>\n<input\n  #endInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none text-end\"\n  siDateInput\n  [ngModel]=\"value()?.end ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"endDatePlaceholder() | translate\"\n  [attr.aria-label]=\"endDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: value()?.start, end: $event })\"\n/>\n<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 [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: SiIconComponent, selector: "si-icon", 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 [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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDateInputDirective, selector: "input[siDateInput]", inputs: ["id", "siDatepickerConfig", "disabled", "readonly", "errormessageId"], outputs: ["siDatepickerConfigChange", "siDatepickerDisabledTime", "stateChange", "dateChange"], exportAs: ["siDateInput"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: A11yModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDateRangeComponent, decorators: [{
             type: Component,
@@ -4143,5 +4165,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CloseCause, SiCalendarButtonComponent, SiDateInputDirective, SiDateRangeComponent, SiDatepickerComponent, SiDatepickerDirective, SiDatepickerModule, SiDatepickerOverlayComponent, SiDatepickerOverlayDirective, SiTimepickerComponent, WEEK_START_OFFSET, addDays, addDaysInRange, addMonthsInRange, addYearsInRange, changeDay, compareDate, compareMonth, compareYear, createDate, daysInMonth, getDateSameOrBetween, getDateWithoutTime, getDatepickerFormat, getDayStrings, getDaysOfWeek, getFirstDateInMonth, getFirstDateInYear, getFirstDayInMonth, getLastDateInMonth, getLocaleMonthNames, getMaxDate, getMinDate, getNamedFormat, getStringforDate, getWeekDayOffset, getWeekEndDate, getWeekOfYear, getWeekStartDate, isAfter, isAfterMonth, isAfterYear, isAnotherMonth, isAnotherMonthOrYear, isAnotherYear, isBetween, isBetweenMonth, isBetweenYears, isSameDate, isSameMonth, isSameOrBefore, isSameOrBeforeMonth, isSameOrBeforeYear, isSameOrBetween, isSameOrBetweenMonth, isSameOrBetweenYears, isSameYear, isValid, maxDate, minDate, nextMonth, parseDate, previousMonth, today };
+export { CloseCause, SiCalendarButtonComponent, SiDateInputDirective, SiDateRangeComponent, SiDatepickerComponent, SiDatepickerDirective, SiDatepickerModule, SiDatepickerOverlayComponent, SiDatepickerOverlayDirective, SiTimepickerComponent, WEEK_START_OFFSET, addDays, addDaysInRange, addMonthsInRange, addYearsInRange, changeDay, compareDate, compareMonth, compareYear, createDate, daysInMonth, getDateSameOrBetween, getDateWithoutTime, getDatepickerFormat, getDayStrings, getDaysOfWeek, getFirstDateInMonth, getFirstDateInYear, getFirstDayInMonth, getLastDateInMonth, getLocaleMonthNames, getMaxDate, getMinDate, getNamedFormat, getStringforDate, getWeekDayOffset, getWeekEndDate, getWeekOfYear, getWeekStartDate, is12HourFormat, isAfter, isAfterMonth, isAfterYear, isAnotherMonth, isAnotherMonthOrYear, isAnotherYear, isBetween, isBetweenMonth, isBetweenYears, isSameDate, isSameMonth, isSameOrBefore, isSameOrBeforeMonth, isSameOrBeforeYear, isSameOrBetween, isSameOrBetweenMonth, isSameOrBetweenYears, isSameYear, isValid, maxDate, minDate, nextMonth, parseDate, previousMonth, today };
 //# sourceMappingURL=siemens-element-ng-datepicker.mjs.map