@frame-ui-ng/components 0.1.0-beta.0 → 0.3.0-beta.0

package/fesm2022/frame-ui-ng-components-date-picker.mjs

@@ -1,7 +1,7 @@
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, signal, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { input, booleanAttribute, output, viewChild, signal, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { FrCalendar } from '@frame-ui-ng/components/calendar';
 import { FrControlValueAccessor, provideDsValueAccessor } from '@frame-ui-ng/components/forms';
 
@@ -63,6 +63,7 @@ class FrDatePicker extends FrControlValueAccessor {
     valueChange = output();
     openChange = output();
     monthChange = output();
+    calendar = viewChild(FrCalendar, ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
     positions = POSITIONS;
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     overlaySide = signal('bottom', ...(ngDevMode ? [{ debugName: "overlaySide" }] : /* istanbul ignore next */ []));
@@ -163,6 +164,9 @@ class FrDatePicker extends FrControlValueAccessor {
     handlePositionChange(event) {
         this.overlaySide.set(event.connectionPair.overlayY === 'bottom' ? 'top' : 'bottom');
     }
+    focusCalendar() {
+        this.calendar()?.focusActiveDate();
+    }
     overlayPanelClasses() {
         return ['frame-date-picker-overlay', `frame-date-picker-overlay--${this.overlaySide()}`];
     }
@@ -178,118 +182,119 @@ class FrDatePicker extends FrControlValueAccessor {
         this.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrDatePicker, isStandalone: true, selector: "frame-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthIcon: { classPropertyName: "previousMonthIcon", publicName: "previousMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, nextMonthIcon: { classPropertyName: "nextMonthIcon", publicName: "nextMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange", monthChange: "monthChange" }, host: { properties: { "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-mode": "mode()", "attr.dir": "dir()" }, classAttribute: "frame-date-picker" }, providers: [provideDsValueAccessor(FrDatePicker)], exportAs: ["frDatePicker"], usesInheritance: true, ngImport: i0, template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
-      @if (editable()) {
-        <span class="frame-date-picker__input-wrap">
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
-          <input
-            class="frame-date-picker__input"
-            type="text"
-            [disabled]="disabled()"
-            [readOnly]="readonlyInput()"
-            [placeholder]="placeholder()"
-            [value]="inputValue()"
-            [attr.aria-expanded]="isOpen()"
-            [attr.aria-invalid]="invalid() ? 'true' : null"
-            aria-haspopup="dialog"
-            (focus)="open()"
-            (click)="open()"
-            (input)="handleInput($any($event.target).value)"
-            (change)="commitInput($any($event.target).value)"
-            (keydown)="handleTriggerKeydown($event)"
-            (blur)="markAsTouched()"
-          />
-        </span>
-      } @else {
-        <button
-          class="frame-date-picker__trigger"
-          type="button"
-          [disabled]="disabled()"
-          [attr.aria-expanded]="isOpen()"
-          [attr.aria-invalid]="invalid() ? 'true' : null"
-          aria-haspopup="dialog"
-          (click)="toggle()"
-          (keydown)="handleTriggerKeydown($event)"
-        >
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
-          <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
-            {{ displayValue() || placeholder() }}
-          </span>
-        </button>
-      }
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayPush]="true"
-      [cdkConnectedOverlayViewportMargin]="12"
-      (overlayOutsideClick)="close()"
-      (detach)="close()"
-      (positionChange)="handlePositionChange($event)"
-    >
-      <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
-        @if (presets().length) {
-          <div class="frame-date-picker__presets" aria-label="Date presets">
-            @for (preset of presets(); track preset.label) {
-              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
-                {{ preset.label }}
-              </button>
-            }
-          </div>
-        }
-
-        <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
-
-        <frame-calendar
-          [mode]="mode()"
-          [captionLayout]="captionLayout()"
-          [numberOfMonths]="numberOfMonths()"
-          [firstDayOfWeek]="firstDayOfWeek()"
-          [locale]="locale()"
-          [timeZone]="timeZone()"
-          [dir]="dir()"
-          [fromYear]="fromYear()"
-          [toYear]="toYear()"
-          [showOutsideDays]="showOutsideDays()"
-          [showWeekNumber]="showWeekNumber()"
-          [disabled]="disabled()"
-          [disabledDates]="disabledDates()"
-          [dateLabels]="dateLabels()"
-          [disabledMatcher]="disabledMatcher()"
-          [cellTemplate]="cellTemplate()"
-          [previousMonthTemplate]="previousMonthTemplate()"
-          [nextMonthTemplate]="nextMonthTemplate()"
-          [previousMonthIcon]="previousMonthIcon()"
-          [nextMonthIcon]="nextMonthIcon()"
-          [previousMonthLabel]="previousMonthLabel()"
-          [nextMonthLabel]="nextMonthLabel()"
-          [month]="month()"
-          [selected]="calendarValue()"
-          (selectedChange)="selectCalendarValue($any($event))"
-          (monthChange)="monthChange.emit($event)"
-        />
-
-        @if (showTime() && mode() === 'single') {
-          <label class="frame-date-picker__time">
-            <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
-            <input
-              class="frame-date-picker__time-input"
-              type="time"
-              [disabled]="disabled() || !singleDate()"
-              [value]="timeValue()"
-              (change)="setTime($any($event.target).value)"
-            />
-          </label>
-        }
-
-        <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
-      </div>
-    </ng-template>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrDatePicker, isStandalone: true, selector: "frame-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthIcon: { classPropertyName: "previousMonthIcon", publicName: "previousMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, nextMonthIcon: { classPropertyName: "nextMonthIcon", publicName: "nextMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange", monthChange: "monthChange" }, host: { properties: { "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-mode": "mode()", "attr.dir": "dir()" }, classAttribute: "frame-date-picker" }, providers: [provideDsValueAccessor(FrDatePicker)], viewQueries: [{ propertyName: "calendar", first: true, predicate: FrCalendar, descendants: true, isSignal: true }], exportAs: ["frDatePicker"], usesInheritance: true, ngImport: i0, template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
+      @if (editable()) {
+        <span class="frame-date-picker__input-wrap">
+          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <input
+            class="frame-date-picker__input"
+            type="text"
+            [disabled]="disabled()"
+            [readOnly]="readonlyInput()"
+            [placeholder]="placeholder()"
+            [value]="inputValue()"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-invalid]="invalid() ? 'true' : null"
+            aria-haspopup="dialog"
+            (focus)="open()"
+            (click)="open()"
+            (input)="handleInput($any($event.target).value)"
+            (change)="commitInput($any($event.target).value)"
+            (keydown)="handleTriggerKeydown($event)"
+            (blur)="markAsTouched()"
+          />
+        </span>
+      } @else {
+        <button
+          class="frame-date-picker__trigger"
+          type="button"
+          [disabled]="disabled()"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-invalid]="invalid() ? 'true' : null"
+          aria-haspopup="dialog"
+          (click)="toggle()"
+          (keydown)="handleTriggerKeydown($event)"
+        >
+          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
+            {{ displayValue() || placeholder() }}
+          </span>
+        </button>
+      }
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayViewportMargin]="12"
+      (overlayOutsideClick)="close()"
+      (attach)="focusCalendar()"
+      (detach)="close()"
+      (positionChange)="handlePositionChange($event)"
+    >
+      <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
+        @if (presets().length) {
+          <div class="frame-date-picker__presets" aria-label="Date presets">
+            @for (preset of presets(); track preset.label) {
+              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
+                {{ preset.label }}
+              </button>
+            }
+          </div>
+        }
+
+        <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
+
+        <frame-calendar
+          [mode]="mode()"
+          [captionLayout]="captionLayout()"
+          [numberOfMonths]="numberOfMonths()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [locale]="locale()"
+          [timeZone]="timeZone()"
+          [dir]="dir()"
+          [fromYear]="fromYear()"
+          [toYear]="toYear()"
+          [showOutsideDays]="showOutsideDays()"
+          [showWeekNumber]="showWeekNumber()"
+          [disabled]="disabled()"
+          [disabledDates]="disabledDates()"
+          [dateLabels]="dateLabels()"
+          [disabledMatcher]="disabledMatcher()"
+          [cellTemplate]="cellTemplate()"
+          [previousMonthTemplate]="previousMonthTemplate()"
+          [nextMonthTemplate]="nextMonthTemplate()"
+          [previousMonthIcon]="previousMonthIcon()"
+          [nextMonthIcon]="nextMonthIcon()"
+          [previousMonthLabel]="previousMonthLabel()"
+          [nextMonthLabel]="nextMonthLabel()"
+          [month]="month()"
+          [selected]="calendarValue()"
+          (selectedChange)="selectCalendarValue($any($event))"
+          (monthChange)="monthChange.emit($event)"
+        />
+
+        @if (showTime() && mode() === 'single') {
+          <label class="frame-date-picker__time">
+            <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
+            <input
+              class="frame-date-picker__time-input"
+              type="time"
+              [disabled]="disabled() || !singleDate()"
+              [value]="timeValue()"
+              (change)="setTime($any($event.target).value)"
+            />
+          </label>
+        }
+
+        <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
+      </div>
+    </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FrCalendar, selector: "frame-calendar", inputs: ["mode", "captionLayout", "numberOfMonths", "firstDayOfWeek", "locale", "timeZone", "dir", "fromYear", "toYear", "showOutsideDays", "showWeekNumber", "disabled", "disabledDates", "dateLabels", "disabledMatcher", "cellTemplate", "previousMonthTemplate", "nextMonthTemplate", "previousMonthIcon", "nextMonthIcon", "previousMonthLabel", "nextMonthLabel", "month", "selected"], outputs: ["selectedChange", "monthChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDatePicker, decorators: [{
@@ -308,121 +313,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-mode]': 'mode()',
                         '[attr.dir]': 'dir()',
                     },
-                    template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
-      @if (editable()) {
-        <span class="frame-date-picker__input-wrap">
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
-          <input
-            class="frame-date-picker__input"
-            type="text"
-            [disabled]="disabled()"
-            [readOnly]="readonlyInput()"
-            [placeholder]="placeholder()"
-            [value]="inputValue()"
-            [attr.aria-expanded]="isOpen()"
-            [attr.aria-invalid]="invalid() ? 'true' : null"
-            aria-haspopup="dialog"
-            (focus)="open()"
-            (click)="open()"
-            (input)="handleInput($any($event.target).value)"
-            (change)="commitInput($any($event.target).value)"
-            (keydown)="handleTriggerKeydown($event)"
-            (blur)="markAsTouched()"
-          />
-        </span>
-      } @else {
-        <button
-          class="frame-date-picker__trigger"
-          type="button"
-          [disabled]="disabled()"
-          [attr.aria-expanded]="isOpen()"
-          [attr.aria-invalid]="invalid() ? 'true' : null"
-          aria-haspopup="dialog"
-          (click)="toggle()"
-          (keydown)="handleTriggerKeydown($event)"
-        >
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
-          <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
-            {{ displayValue() || placeholder() }}
-          </span>
-        </button>
-      }
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayPush]="true"
-      [cdkConnectedOverlayViewportMargin]="12"
-      (overlayOutsideClick)="close()"
-      (detach)="close()"
-      (positionChange)="handlePositionChange($event)"
-    >
-      <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
-        @if (presets().length) {
-          <div class="frame-date-picker__presets" aria-label="Date presets">
-            @for (preset of presets(); track preset.label) {
-              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
-                {{ preset.label }}
-              </button>
-            }
-          </div>
-        }
-
-        <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
-
-        <frame-calendar
-          [mode]="mode()"
-          [captionLayout]="captionLayout()"
-          [numberOfMonths]="numberOfMonths()"
-          [firstDayOfWeek]="firstDayOfWeek()"
-          [locale]="locale()"
-          [timeZone]="timeZone()"
-          [dir]="dir()"
-          [fromYear]="fromYear()"
-          [toYear]="toYear()"
-          [showOutsideDays]="showOutsideDays()"
-          [showWeekNumber]="showWeekNumber()"
-          [disabled]="disabled()"
-          [disabledDates]="disabledDates()"
-          [dateLabels]="dateLabels()"
-          [disabledMatcher]="disabledMatcher()"
-          [cellTemplate]="cellTemplate()"
-          [previousMonthTemplate]="previousMonthTemplate()"
-          [nextMonthTemplate]="nextMonthTemplate()"
-          [previousMonthIcon]="previousMonthIcon()"
-          [nextMonthIcon]="nextMonthIcon()"
-          [previousMonthLabel]="previousMonthLabel()"
-          [nextMonthLabel]="nextMonthLabel()"
-          [month]="month()"
-          [selected]="calendarValue()"
-          (selectedChange)="selectCalendarValue($any($event))"
-          (monthChange)="monthChange.emit($event)"
-        />
-
-        @if (showTime() && mode() === 'single') {
-          <label class="frame-date-picker__time">
-            <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
-            <input
-              class="frame-date-picker__time-input"
-              type="time"
-              [disabled]="disabled() || !singleDate()"
-              [value]="timeValue()"
-              (change)="setTime($any($event.target).value)"
-            />
-          </label>
-        }
-
-        <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
-      </div>
-    </ng-template>
+                    template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
+      @if (editable()) {
+        <span class="frame-date-picker__input-wrap">
+          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <input
+            class="frame-date-picker__input"
+            type="text"
+            [disabled]="disabled()"
+            [readOnly]="readonlyInput()"
+            [placeholder]="placeholder()"
+            [value]="inputValue()"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-invalid]="invalid() ? 'true' : null"
+            aria-haspopup="dialog"
+            (focus)="open()"
+            (click)="open()"
+            (input)="handleInput($any($event.target).value)"
+            (change)="commitInput($any($event.target).value)"
+            (keydown)="handleTriggerKeydown($event)"
+            (blur)="markAsTouched()"
+          />
+        </span>
+      } @else {
+        <button
+          class="frame-date-picker__trigger"
+          type="button"
+          [disabled]="disabled()"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-invalid]="invalid() ? 'true' : null"
+          aria-haspopup="dialog"
+          (click)="toggle()"
+          (keydown)="handleTriggerKeydown($event)"
+        >
+          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
+            {{ displayValue() || placeholder() }}
+          </span>
+        </button>
+      }
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayViewportMargin]="12"
+      (overlayOutsideClick)="close()"
+      (attach)="focusCalendar()"
+      (detach)="close()"
+      (positionChange)="handlePositionChange($event)"
+    >
+      <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
+        @if (presets().length) {
+          <div class="frame-date-picker__presets" aria-label="Date presets">
+            @for (preset of presets(); track preset.label) {
+              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
+                {{ preset.label }}
+              </button>
+            }
+          </div>
+        }
+
+        <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
+
+        <frame-calendar
+          [mode]="mode()"
+          [captionLayout]="captionLayout()"
+          [numberOfMonths]="numberOfMonths()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [locale]="locale()"
+          [timeZone]="timeZone()"
+          [dir]="dir()"
+          [fromYear]="fromYear()"
+          [toYear]="toYear()"
+          [showOutsideDays]="showOutsideDays()"
+          [showWeekNumber]="showWeekNumber()"
+          [disabled]="disabled()"
+          [disabledDates]="disabledDates()"
+          [dateLabels]="dateLabels()"
+          [disabledMatcher]="disabledMatcher()"
+          [cellTemplate]="cellTemplate()"
+          [previousMonthTemplate]="previousMonthTemplate()"
+          [nextMonthTemplate]="nextMonthTemplate()"
+          [previousMonthIcon]="previousMonthIcon()"
+          [nextMonthIcon]="nextMonthIcon()"
+          [previousMonthLabel]="previousMonthLabel()"
+          [nextMonthLabel]="nextMonthLabel()"
+          [month]="month()"
+          [selected]="calendarValue()"
+          (selectedChange)="selectCalendarValue($any($event))"
+          (monthChange)="monthChange.emit($event)"
+        />
+
+        @if (showTime() && mode() === 'single') {
+          <label class="frame-date-picker__time">
+            <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
+            <input
+              class="frame-date-picker__time-input"
+              type="time"
+              [disabled]="disabled() || !singleDate()"
+              [value]="timeValue()"
+              (change)="setTime($any($event.target).value)"
+            />
+          </label>
+        }
+
+        <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
+      </div>
+    </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], fromYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromYear", required: false }] }], toYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "toYear", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumber", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabels", required: false }] }], disabledMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatcher", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], previousMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthTemplate", required: false }] }], nextMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthTemplate", required: false }] }], previousMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthIcon", required: false }] }], nextMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthIcon", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], parser: [{ type: i0.Input, args: [{ isSignal: true, alias: "parser", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], fromYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromYear", required: false }] }], toYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "toYear", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumber", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabels", required: false }] }], disabledMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatcher", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], previousMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthTemplate", required: false }] }], nextMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthTemplate", required: false }] }], previousMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthIcon", required: false }] }], nextMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthIcon", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], parser: [{ type: i0.Input, args: [{ isSignal: true, alias: "parser", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FrCalendar), { isSignal: true }] }] } });
 function normalizeValue(value, mode) {
     if (!value) {
         return mode === 'range' ? { from: null, to: null } : null;