@siemens/element-ng 49.14.0 → 49.16.0

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

@@ -1,6 +1,6 @@
 import { getLocaleDayPeriods, FormStyle, TranslationWidth, getLocaleId, getLocaleDateTimeFormat, FormatWidth, getLocaleTimeFormat, getLocaleDateFormat, formatDate, DatePipe, NgTemplateOutlet, getLocaleFirstDayOfWeek, WeekDay } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, booleanAttribute, computed, signal, inject, LOCALE_ID, HostListener, Directive, ElementRef, viewChildren, ChangeDetectionStrategy, Component, viewChild, HostAttributeToken, effect, ChangeDetectorRef, SimpleChange, DOCUMENT, DestroyRef, contentChild, NgModule } from '@angular/core';
+import { input, model, output, booleanAttribute, computed, signal, inject, LOCALE_ID, Directive, ElementRef, viewChildren, ChangeDetectionStrategy, Component, viewChild, HostListener, HostAttributeToken, effect, ChangeDetectorRef, SimpleChange, DOCUMENT, DestroyRef, contentChild, NgModule } from '@angular/core';
 import * 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';
@@ -8,7 +8,7 @@ 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, positionBottomCenter, positionBottomStart, positionBottomEnd, positionTopCenter, positionTopStart, positionTopEnd } from '@siemens/element-ng/common';
+import { isRTL, defaultConnectedOverlayScrollStrategy, positionBottomCenter, positionBottomStart, positionBottomEnd, positionTopCenter, positionTopStart, positionTopEnd } from '@siemens/element-ng/common';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { Subject, merge, asapScheduler, filter as filter$1 } from 'rxjs';
 import { takeUntil, skip, observeOn, map, filter, tap } from 'rxjs/operators';
@@ -882,6 +882,10 @@ class SiDateInputDirective {
     onInput(event) {
         const value = event.target.value;
         const parsedDate = parseDate(value, this.getFormat(), this.locale);
+        // Keep dateString in sync with the raw DOM value so that a subsequent
+        // writeValue() with the same formatted string still triggers the host
+        // [value] binding and overwrites any manually entered text.
+        this.dateString.set(value);
         // Is same date
         const hasChanged = !(parsedDate === this.date);
         if (hasChanged) {
@@ -1009,24 +1013,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[attr.readonly]': 'readonly() || null',
                         '[class.readonly]': 'readonly()',
                         '[attr.aria-describedby]': 'errormessageId()',
-                        '[value]': 'dateString()'
+                        '[value]': 'dateString()',
+                        '(input)': 'onInput($event)',
+                        '(blur)': 'onBlur($event)'
                     },
                     exportAs: 'siDateInput'
                 }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], siDatepickerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "siDatepickerConfig", required: false }] }, { type: i0.Output, args: ["siDatepickerConfigChange"] }], siDatepickerDisabledTime: [{ type: i0.Output, args: ["siDatepickerDisabledTime"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], onInput: [{
-                type: HostListener,
-                args: ['input', ['$event']]
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur', ['$event']]
-            }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], siDatepickerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "siDatepickerConfig", required: false }] }, { type: i0.Output, args: ["siDatepickerConfigChange"] }], siDatepickerDisabledTime: [{ type: i0.Output, args: ["siDatepickerDisabledTime"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 class SiCalendarDateCellDirective {
+    /** Calendar cell data used to render its state and accessible label. */
     cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
+    /** Date comparison strategy used by the containing calendar view. */
     compareAdapter = input.required(...(ngDevMode ? [{ debugName: "compareAdapter" }] : []));
     /** @defaultValue inject(ElementRef) */
     ref = inject(ElementRef);
@@ -1305,13 +1307,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiCalendarDirectionButtonComponent {
+    /** Accessible label for the button. */
     ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    /** @defaultValue false */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
-    direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
     /**
-     * Emit on button click.
+     * Whether the button is disabled.
+     *
+     * @defaultValue false
      */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /** Direction in which the button navigates. */
+    direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+    /** Emits when the button is clicked. */
     clicked = output();
     icon = computed(() => this.direction() === 'left' ? this.icons.elementLeft2 : this.icons.elementRight2, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     buttonClass = computed(() => this.direction() === 'left' ? 'previous-button' : 'next-button', ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
@@ -2016,18 +2022,26 @@ class SiTimepickerComponent {
     // eslint-disable-next-line @angular-eslint/no-input-rename
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
     /**
+     * Visible label for the hours input.
+     *
      * @defaultValue 'hh'
      */
     hoursLabel = input('hh', ...(ngDevMode ? [{ debugName: "hoursLabel" }] : []));
     /**
+     * Visible label for the minutes input.
+     *
      * @defaultValue 'mm'
      */
     minutesLabel = input('mm', ...(ngDevMode ? [{ debugName: "minutesLabel" }] : []));
     /**
+     * Visible label for the seconds input.
+     *
      * @defaultValue 'ss'
      */
     secondsLabel = input('ss', ...(ngDevMode ? [{ debugName: "secondsLabel" }] : []));
     /**
+     * Visible label for the milliseconds input.
+     *
      * @defaultValue 'ms'
      */
     millisecondsLabel = input('ms', ...(ngDevMode ? [{ debugName: "millisecondsLabel" }] : []));
@@ -2065,23 +2079,34 @@ class SiTimepickerComponent {
      */
     millisecondsAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`), ...(ngDevMode ? [{ debugName: "millisecondsAriaLabel" }] : []));
     /**
+     * Placeholder for the hours input.
+     *
      * @defaultValue 'hh'
      */
     hoursPlaceholder = input('hh', ...(ngDevMode ? [{ debugName: "hoursPlaceholder" }] : []));
     /**
+     * Placeholder for the minutes input.
+     *
      * @defaultValue 'mm'
      */
     minutesPlaceholder = input('mm', ...(ngDevMode ? [{ debugName: "minutesPlaceholder" }] : []));
     /**
+     * Placeholder for the seconds input.
+     *
      * @defaultValue 'ss'
      */
     secondsPlaceholder = input('ss', ...(ngDevMode ? [{ debugName: "secondsPlaceholder" }] : []));
     /**
+     * Placeholder for the milliseconds input.
+     *
      * @defaultValue 'ms'
      */
     millisecondsPlaceholder = input('ms', ...(ngDevMode ? [{ debugName: "millisecondsPlaceholder" }] : []));
+    /** Custom labels for the AM and PM options. */
     meridians = input(...(ngDevMode ? [undefined, { debugName: "meridians" }] : []));
     /**
+     * Visible label for the AM/PM selector.
+     *
      * @defaultValue 'am/pm'
      */
     meridiansLabel = input('am/pm', ...(ngDevMode ? [{ debugName: "meridiansLabel" }] : []));
@@ -2092,11 +2117,23 @@ class SiTimepickerComponent {
      * ```
      */
     meridiansAriaLabel = input(t(() => $localize `:@@SI_DATEPICKER.PERIOD:Period`), ...(ngDevMode ? [{ debugName: "meridiansAriaLabel" }] : []));
-    /** @defaultValue true */
+    /**
+     * Whether the minutes input is displayed.
+     *
+     * @defaultValue true
+     */
     showMinutes = input(true, { ...(ngDevMode ? { debugName: "showMinutes" } : {}), transform: booleanAttribute });
-    /** @defaultValue false */
+    /**
+     * Whether the seconds input is displayed.
+     *
+     * @defaultValue false
+     */
     showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : {}), transform: booleanAttribute });
-    /** @defaultValue false */
+    /**
+     * Whether the milliseconds input is displayed.
+     *
+     * @defaultValue false
+     */
     showMilliseconds = input(false, { ...(ngDevMode ? { debugName: "showMilliseconds" } : {}), transform: booleanAttribute });
     /**
      * Show time in 12-hour period including the select to toggle between AM/PM.
@@ -2110,10 +2147,17 @@ class SiTimepickerComponent {
      * A maximum time limit. The date part of the date object will be ignored.
      */
     max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
-    /** @defaultValue false */
+    /**
+     * Whether the time inputs are read-only.
+     *
+     * @defaultValue false
+     */
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    /** Emits whether the entered time components form a valid time. */
     isValid = output();
+    /** Emits the selected meridian when it changes. */
     meridianChange = output();
+    /** Emits when the user presses Enter in the final time input. */
     inputCompleted = output();
     inputParts = viewChildren('inputPart', ...(ngDevMode ? [{ debugName: "inputParts" }] : []));
     /**
@@ -2617,7 +2661,11 @@ class SiDatepickerComponent {
      * initialization and for bidirectional binding.
      */
     dateRange = model(...(ngDevMode ? [undefined, { debugName: "dateRange" }] : []));
-    /** @internal */
+    /**
+     * Role of this calendar when a date range is displayed across two calendars.
+     *
+     * @internal
+     */
     dateRangeRole = input(...(ngDevMode ? [undefined, { debugName: "dateRangeRole" }] : []));
     /**
      * Set initial focus to calendar body.
@@ -2712,7 +2760,11 @@ class SiDatepickerComponent {
      * @defaultValue false
      */
     hideTimeToggle = input(false, ...(ngDevMode ? [{ debugName: "hideTimeToggle" }] : []));
-    /** @internal */
+    /**
+     * Whether the calendar is hidden while retaining the optional timepicker.
+     *
+     * @internal
+     */
     hideCalendar = input(false, ...(ngDevMode ? [{ debugName: "hideCalendar" }] : []));
     /**
      * Optional timepicker label.
@@ -3395,6 +3447,15 @@ class SiDatepickerOverlayDirective {
             originY: 'top'
         }
     ], ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    /**
+     * Optional CDK scroll strategy used for the datepicker overlay.
+     *
+     * @defaultValue defaultConnectedOverlayScrollStrategy()
+     */
+    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), { ...(ngDevMode ? { debugName: "scrollStrategy" } : {}), 
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        alias: 'siDatepickerScrollStrategy' // to be aligned with the `siDatepickerClose` output
+     });
     /**
      * Output event on closing datepicker e.g. by clicking backdrop or escape key.
      */
@@ -3522,6 +3583,7 @@ class SiDatepickerOverlayDirective {
             positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
             direction: isRTL() ? 'rtl' : 'ltr',
             hasBackdrop: true,
+            scrollStrategy: this.scrollStrategy(),
             backdropClass: 'modal-backdrop'
         });
     }
@@ -3537,6 +3599,7 @@ class SiDatepickerOverlayDirective {
                 .withViewportMargin(4),
             direction: isRTL() ? 'rtl' : 'ltr',
             hasBackdrop: true,
+            scrollStrategy: this.scrollStrategy(),
             backdropClass: 'cdk-overlay-transparent-backdrop'
         });
     }
@@ -3553,7 +3616,7 @@ class SiDatepickerOverlayDirective {
         map(() => CloseCause.Escape)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiDatepickerOverlayDirective, isStandalone: true, selector: "[siDatepickerOverlay]", outputs: { siDatepickerClose: "siDatepickerClose" }, exportAs: ["siDatepickerOverlay"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiDatepickerOverlayDirective, isStandalone: true, selector: "[siDatepickerOverlay]", inputs: { scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "siDatepickerScrollStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { siDatepickerClose: "siDatepickerClose" }, exportAs: ["siDatepickerOverlay"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerOverlayDirective, decorators: [{
             type: Directive,
@@ -3561,7 +3624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     selector: '[siDatepickerOverlay]',
                     exportAs: 'siDatepickerOverlay'
                 }]
-        }], propDecorators: { siDatepickerClose: [{ type: i0.Output, args: ["siDatepickerClose"] }] } });
+        }], propDecorators: { scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "siDatepickerScrollStrategy", required: false }] }], siDatepickerClose: [{ type: i0.Output, args: ["siDatepickerClose"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -3675,7 +3738,7 @@ class SiDatepickerDirective extends SiDateInputDirective {
                 provide: SI_FORM_ITEM_CONTROL,
                 useExisting: SiDatepickerDirective
             }
-        ], exportAs: ["siDatepicker"], usesInheritance: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0 });
+        ], exportAs: ["siDatepicker"], usesInheritance: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, inputs: ["siDatepickerScrollStrategy", "siDatepickerScrollStrategy"], outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatepickerDirective, decorators: [{
             type: Directive,
@@ -3700,6 +3763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     hostDirectives: [
                         {
                             directive: SiDatepickerOverlayDirective,
+                            inputs: ['siDatepickerScrollStrategy'],
                             outputs: ['siDatepickerClose']
                         }
                     ],
@@ -4020,7 +4084,7 @@ class SiDateRangeComponent {
                 provide: SI_FORM_ITEM_CONTROL,
                 useExisting: SiDateRangeComponent
             }
-        ], viewQueries: [{ propertyName: "inputDirectives", predicate: SiDateInputDirective, descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0, template: "<input\n  #startInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none\"\n  siDateInput\n  [ngModel]=\"value()?.start ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"startDatePlaceholder() | translate\"\n  [attr.aria-label]=\"startDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: $event, end: value()?.end })\"\n/>\n<span class=\"mx-3\">-</span>\n<input\n  #endInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none text-end\"\n  siDateInput\n  [ngModel]=\"value()?.end ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"endDatePlaceholder() | translate\"\n  [attr.aria-label]=\"endDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: value()?.start, end: $event })\"\n/>\n<div class=\"form-control-actions\">\n  <button\n    #button\n    type=\"button\"\n    class=\"btn btn-icon btn-tertiary btn-sm\"\n    [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"show()\"\n  >\n    <si-icon [icon]=\"icons.elementCalendar\" />\n  </button>\n</div>\n", styles: [":host{display:block;min-inline-size:237px}:host(:focus-within:has(input:focus)){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{flex-grow:1;background-color:transparent;min-inline-size:80px}input::placeholder{opacity:1;color:var(--element-text-secondary)}input:disabled,input[readonly]{background-color:var(--element-base-1);opacity:1}input:not([readonly]):focus::placeholder,input:focus:not([readonly]):focus::placeholder{color:transparent}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDateInputDirective, selector: "input[siDateInput]", inputs: ["id", "siDatepickerConfig", "disabled", "readonly", "errormessageId"], outputs: ["siDatepickerConfigChange", "siDatepickerDisabledTime", "stateChange", "dateChange"], exportAs: ["siDateInput"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+        ], viewQueries: [{ propertyName: "inputDirectives", predicate: SiDateInputDirective, descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, inputs: ["siDatepickerScrollStrategy", "scrollStrategy"], outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0, template: "<input\n  #startInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none\"\n  siDateInput\n  [ngModel]=\"value()?.start ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"startDatePlaceholder() | translate\"\n  [attr.aria-label]=\"startDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: $event, end: value()?.end })\"\n/>\n<span class=\"mx-3\">-</span>\n<input\n  #endInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none text-end\"\n  siDateInput\n  [ngModel]=\"value()?.end ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"endDatePlaceholder() | translate\"\n  [attr.aria-label]=\"endDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: value()?.start, end: $event })\"\n/>\n<div class=\"form-control-actions\">\n  <button\n    #button\n    type=\"button\"\n    class=\"btn btn-icon btn-tertiary btn-sm\"\n    [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"show()\"\n  >\n    <si-icon [icon]=\"icons.elementCalendar\" />\n  </button>\n</div>\n", styles: [":host{display:block;min-inline-size:237px}:host(:focus-within:has(input:focus)){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{flex-grow:1;background-color:transparent;min-inline-size:80px}input::placeholder{opacity:1;color:var(--element-text-secondary)}input:disabled,input[readonly]{background-color:var(--element-base-1);opacity:1}input:not([readonly]):focus::placeholder,input:focus:not([readonly]):focus::placeholder{color:transparent}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDateInputDirective, selector: "input[siDateInput]", inputs: ["id", "siDatepickerConfig", "disabled", "readonly", "errormessageId"], outputs: ["siDatepickerConfigChange", "siDatepickerDisabledTime", "stateChange", "dateChange"], exportAs: ["siDateInput"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeComponent, decorators: [{
             type: Component,
@@ -4048,6 +4112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     }, hostDirectives: [
                         {
                             directive: SiDatepickerOverlayDirective,
+                            inputs: ['siDatepickerScrollStrategy: scrollStrategy'],
                             outputs: ['siDatepickerClose']
                         }
                     ], template: "<input\n  #startInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none\"\n  siDateInput\n  [ngModel]=\"value()?.start ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"startDatePlaceholder() | translate\"\n  [attr.aria-label]=\"startDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: $event, end: value()?.end })\"\n/>\n<span class=\"mx-3\">-</span>\n<input\n  #endInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none text-end\"\n  siDateInput\n  [ngModel]=\"value()?.end ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"endDatePlaceholder() | translate\"\n  [attr.aria-label]=\"endDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: value()?.start, end: $event })\"\n/>\n<div class=\"form-control-actions\">\n  <button\n    #button\n    type=\"button\"\n    class=\"btn btn-icon btn-tertiary btn-sm\"\n    [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"show()\"\n  >\n    <si-icon [icon]=\"icons.elementCalendar\" />\n  </button>\n</div>\n", styles: [":host{display:block;min-inline-size:237px}:host(:focus-within:has(input:focus)){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{flex-grow:1;background-color:transparent;min-inline-size:80px}input::placeholder{opacity:1;color:var(--element-text-secondary)}input:disabled,input[readonly]{background-color:var(--element-base-1);opacity:1}input:not([readonly]):focus::placeholder,input:focus:not([readonly]):focus::placeholder{color:transparent}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}\n"] }]