@raintonic/formaui 0.3.1 → 0.9.0

package/fesm2022/raintonic-formaui-components-date-picker.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, ChangeDetectorRef, signal, input, output, computed, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgZone, effect, ViewChild } from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, signal, input, output, computed, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, effect, ViewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgForm, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { DOCUMENT } from '@angular/common';
-import { Subject, Subscription, fromEvent } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
-import { FuiIntlBase, DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
-import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { Subject } from 'rxjs';
+import * as i1 from '@raintonic/formaui/cdk/form-field';
+import { FuiPopupOverlayDirective, FuiFormControlSyncDirective, injectNgControl } from '@raintonic/formaui/cdk/form-field';
+import { FuiIntlBase, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
+import { FuiInputDirective } from '@raintonic/formaui/components/input';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
 
 class FuiCalendarIntl extends FuiIntlBase {
@@ -241,6 +240,91 @@ function isBetween(date, start, end) {
     const max = Math.max(s, e);
     return d >= min && d <= max;
 }
+/**
+ * Built-in date range presets covering the common "this/last week | month | year" shortcuts.
+ * Each preset evaluates lazily so values stay correct even if the panel is left open over time.
+ *
+ * Defaults to Monday as the first day of the week. Pass `{ firstDayOfWeek: 0 }` for Sunday.
+ */
+function buildDefaultDateRangePresets(options = {}) {
+    const firstDayOfWeek = options.firstDayOfWeek ?? 1;
+    const l = {
+        thisWeek: 'This week',
+        lastWeek: 'Last week',
+        thisMonth: 'This month',
+        lastMonth: 'Last month',
+        thisYear: 'This year',
+        lastYear: 'Last year',
+        ...options.labels,
+    };
+    const startOfWeek = (d) => {
+        const day = d.getDay();
+        const diff = (day - firstDayOfWeek + 7) % 7;
+        const start = new Date(d);
+        start.setDate(d.getDate() - diff);
+        return normalizeDate(start);
+    };
+    const addDays = (d, n) => {
+        const copy = new Date(d);
+        copy.setDate(copy.getDate() + n);
+        return normalizeDate(copy);
+    };
+    return [
+        {
+            label: l.thisWeek,
+            value: () => {
+                const today = normalizeDate(new Date());
+                const start = startOfWeek(today);
+                return { start, end: addDays(start, 6) };
+            },
+        },
+        {
+            label: l.lastWeek,
+            value: () => {
+                const today = normalizeDate(new Date());
+                const startThis = startOfWeek(today);
+                const start = addDays(startThis, -7);
+                return { start, end: addDays(start, 6) };
+            },
+        },
+        {
+            label: l.thisMonth,
+            value: () => {
+                const today = new Date();
+                const start = normalizeDate(new Date(today.getFullYear(), today.getMonth(), 1));
+                const end = normalizeDate(new Date(today.getFullYear(), today.getMonth() + 1, 0));
+                return { start, end };
+            },
+        },
+        {
+            label: l.lastMonth,
+            value: () => {
+                const today = new Date();
+                const start = normalizeDate(new Date(today.getFullYear(), today.getMonth() - 1, 1));
+                const end = normalizeDate(new Date(today.getFullYear(), today.getMonth(), 0));
+                return { start, end };
+            },
+        },
+        {
+            label: l.thisYear,
+            value: () => {
+                const today = new Date();
+                const start = normalizeDate(new Date(today.getFullYear(), 0, 1));
+                const end = normalizeDate(new Date(today.getFullYear(), 11, 31));
+                return { start, end };
+            },
+        },
+        {
+            label: l.lastYear,
+            value: () => {
+                const today = new Date();
+                const start = normalizeDate(new Date(today.getFullYear() - 1, 0, 1));
+                const end = normalizeDate(new Date(today.getFullYear() - 1, 11, 31));
+                return { start, end };
+            },
+        },
+    ];
+}
 
 /**
  * @component FuiCalendarComponent
@@ -709,7 +793,7 @@ class FuiCalendarComponent {
         this._elementRef.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiCalendarComponent, isStandalone: true, selector: "fui-calendar", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", 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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", dateHovered: "dateHovered", monthChanged: "monthChanged" }, host: { attributes: { "tabindex": "0", "role": "application" }, properties: { "attr.aria-label": "intl.rootAriaLabel" }, classAttribute: "fui-calendar" }, ngImport: i0, template: "<!-- Calendar Header -->\r\n<div class=\"fui-calendar__header\">\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onPrev()\" [attr.aria-label]=\"prevButtonLabel()\">\r\n    <fui-icon name=\"caret-left\" size=\"sm\" />\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-calendar__header-label\"\r\n    (click)=\"onHeaderLabelClick()\"\r\n    [attr.aria-label]=\"headerButtonLabel()\"\r\n  >\r\n    @switch (currentView()) {\r\n      @case ('days') {\r\n        {{ monthYearLabel() }}\r\n      }\r\n      @case ('months') {\r\n        {{ yearLabel() }}\r\n      }\r\n      @case ('years') {\r\n        {{ decadeLabel() }}\r\n      }\r\n    }\r\n  </button>\r\n\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onNext()\" [attr.aria-label]=\"nextButtonLabel()\">\r\n    <fui-icon name=\"caret-right\" size=\"sm\" />\r\n  </button>\r\n</div>\r\n\r\n<!-- Day View -->\r\n@if (currentView() === 'days') {\r\n  <table class=\"fui-calendar__grid\" role=\"grid\" [attr.aria-label]=\"monthYearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    <thead>\r\n      <tr>\r\n        @for (header of weekDayHeaders(); track header) {\r\n          <th class=\"fui-calendar__weekday\" scope=\"col\">{{ header }}</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (week of weeks(); track trackByWeek($index, week)) {\r\n        <tr>\r\n          @for (day of week; track trackByDay($index, day)) {\r\n            <td\r\n              class=\"fui-calendar__cell\"\r\n              [class.--today]=\"day.isToday\"\r\n              [class.--selected]=\"day.isSelected\"\r\n              [class.--outside]=\"!day.isCurrentMonth\"\r\n              [class.--disabled]=\"day.isDisabled\"\r\n              [class.--range-start]=\"day.isRangeStart\"\r\n              [class.--range-end]=\"day.isRangeEnd\"\r\n              [class.--in-range]=\"day.isInRange\"\r\n              [class.--range-preview]=\"day.isRangePreview\"\r\n              role=\"gridcell\"\r\n              [attr.aria-selected]=\"day.isSelected\"\r\n              [attr.aria-disabled]=\"day.isDisabled\"\r\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\r\n              [attr.tabindex]=\"day.isCurrentMonth && !day.isDisabled ? 0 : -1\"\r\n              (click)=\"onDayClick(day)\"\r\n              (mouseenter)=\"onDayMouseEnter(day)\"\r\n              (mouseleave)=\"onDayMouseLeave()\"\r\n            >\r\n              <span class=\"fui-calendar__day\">{{ day.day }}</span>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n\r\n<!-- Month View -->\r\n@if (currentView() === 'months') {\r\n  <div class=\"fui-calendar__months\" role=\"grid\" [attr.aria-label]=\"yearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of monthsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__months-row\" role=\"row\">\r\n        @for (month of row; track trackByMonth($index, month)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__month-cell\"\r\n            [class.--current]=\"month.isCurrentMonth\"\r\n            [class.--selected]=\"month.isSelected\"\r\n            [class.--disabled]=\"month.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"month.isSelected\"\r\n            [attr.aria-disabled]=\"month.isDisabled\"\r\n            [disabled]=\"month.isDisabled\"\r\n            (click)=\"onMonthClick(month)\"\r\n          >\r\n            {{ month.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Year View -->\r\n@if (currentView() === 'years') {\r\n  <div class=\"fui-calendar__years\" role=\"grid\" [attr.aria-label]=\"decadeLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of yearsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__years-row\" role=\"row\">\r\n        @for (year of row; track trackByYear($index, year)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__year-cell\"\r\n            [class.--current]=\"year.isCurrentYear\"\r\n            [class.--selected]=\"year.isSelected\"\r\n            [class.--disabled]=\"year.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"year.isSelected\"\r\n            [attr.aria-disabled]=\"year.isDisabled\"\r\n            [disabled]=\"year.isDisabled\"\r\n            (click)=\"onYearClick(year)\"\r\n          >\r\n            {{ year.year }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Live region for screen readers -->\r\n<div class=\"fui-calendar__announcer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @switch (currentView()) {\r\n    @case ('days') {\r\n      {{ monthYearLabel() }}\r\n    }\r\n    @case ('months') {\r\n      {{ yearLabel() }}\r\n    }\r\n    @case ('years') {\r\n      {{ decadeLabel() }}\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-calendar{display:block;width:280px;-webkit-user-select:none;user-select:none}.fui-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-02) var(--fui-spacing-03)}.fui-calendar__nav-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__nav-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__nav-btn:hover{background-color:var(--fui-surface-02);color:var(--fui-text-primary)}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__header-label{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__header-label{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-primary);padding:var(--fui-spacing-01) var(--fui-spacing-02);border-radius:var(--fui-border-radius-sm);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__header-label:hover{background-color:var(--fui-surface-02)}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__grid{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;padding:0 var(--fui-spacing-02)}.fui-calendar__weekday{font-size:var(--fui-font-size-01);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-secondary);text-align:center;padding-bottom:var(--fui-spacing-01);height:2rem;vertical-align:middle}.fui-calendar__cell{text-align:center;padding:1px;cursor:pointer;position:relative;outline:none}.fui-calendar__cell:focus-visible .fui-calendar__day{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__cell.--disabled{cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day:hover{background-color:transparent}.fui-calendar__cell.--outside .fui-calendar__day{color:var(--fui-text-disabled);opacity:.4}.fui-calendar__cell.--today .fui-calendar__day{position:relative;font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--today .fui-calendar__day:after{content:\"\";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:var(--fui-primary)}.fui-calendar__cell.--selected .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--selected .fui-calendar__day:after{display:none}.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--range-start{background:linear-gradient(to right,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-end{background:linear-gradient(to left,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-start.--range-end{background:transparent}.fui-calendar__cell.--in-range{background-color:var(--fui-primary-10)}.fui-calendar__cell.--in-range .fui-calendar__day{color:var(--fui-primary);font-weight:var(--fui-font-weight-medium)}.fui-calendar__cell.--range-preview{background-color:var(--fui-primary-10);opacity:.5}.fui-calendar__cell.--range-preview .fui-calendar__day{color:var(--fui-primary)}.fui-calendar__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;font-size:var(--fui-font-size-01);color:var(--fui-text-primary);margin:0 auto;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__day:hover{background-color:var(--fui-surface-02)}.fui-calendar__months,.fui-calendar__years{padding:var(--fui-spacing-03)}.fui-calendar__months-row,.fui-calendar__years-row{display:flex;justify-content:space-around;margin-bottom:var(--fui-spacing-02)}.fui-calendar__months-row:last-child,.fui-calendar__years-row:last-child{margin-bottom:0}.fui-calendar__month-cell,.fui-calendar__year-cell{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__month-cell,.fui-calendar__year-cell{display:flex;align-items:center;justify-content:center;width:5rem;height:2.5rem;border-radius:var(--fui-border-radius-md);font-size:var(--fui-font-size-01);color:var(--fui-text-primary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__month-cell:hover:not(:disabled),.fui-calendar__year-cell:hover:not(:disabled){background-color:var(--fui-surface-02)}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__month-cell.--current,.fui-calendar__year-cell.--current{font-weight:var(--fui-font-weight-semibold);color:var(--fui-primary)}.fui-calendar__month-cell.--selected,.fui-calendar__year-cell.--selected{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__month-cell.--disabled,.fui-calendar__year-cell.--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__announcer{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(prefers-contrast:high){.fui-calendar__cell.--selected .fui-calendar__day,.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{outline:2px solid}}@media(prefers-reduced-motion:reduce){.fui-calendar__day,.fui-calendar__nav-btn,.fui-calendar__header-label,.fui-calendar__month-cell,.fui-calendar__year-cell{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiCalendarComponent, isStandalone: true, selector: "fui-calendar", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", 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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", dateHovered: "dateHovered", monthChanged: "monthChanged" }, host: { attributes: { "tabindex": "0", "role": "application" }, properties: { "attr.aria-label": "intl.rootAriaLabel" }, classAttribute: "fui-calendar" }, ngImport: i0, template: "<!-- Calendar Header -->\r\n<div class=\"fui-calendar__header\">\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onPrev()\" [attr.aria-label]=\"prevButtonLabel()\">\r\n    <fui-icon name=\"caret-left\" size=\"sm\" />\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-calendar__header-label\"\r\n    (click)=\"onHeaderLabelClick()\"\r\n    [attr.aria-label]=\"headerButtonLabel()\"\r\n  >\r\n    @switch (currentView()) {\r\n      @case ('days') {\r\n        {{ monthYearLabel() }}\r\n      }\r\n      @case ('months') {\r\n        {{ yearLabel() }}\r\n      }\r\n      @case ('years') {\r\n        {{ decadeLabel() }}\r\n      }\r\n    }\r\n  </button>\r\n\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onNext()\" [attr.aria-label]=\"nextButtonLabel()\">\r\n    <fui-icon name=\"caret-right\" size=\"sm\" />\r\n  </button>\r\n</div>\r\n\r\n<!-- Day View -->\r\n@if (currentView() === 'days') {\r\n  <table class=\"fui-calendar__grid\" role=\"grid\" [attr.aria-label]=\"monthYearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    <thead>\r\n      <tr>\r\n        @for (header of weekDayHeaders(); track $index) {\r\n          <th class=\"fui-calendar__weekday\" scope=\"col\">{{ header }}</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (week of weeks(); track trackByWeek($index, week)) {\r\n        <tr>\r\n          @for (day of week; track trackByDay($index, day)) {\r\n            <td\r\n              class=\"fui-calendar__cell\"\r\n              [class.--today]=\"day.isToday\"\r\n              [class.--selected]=\"day.isSelected\"\r\n              [class.--outside]=\"!day.isCurrentMonth\"\r\n              [class.--disabled]=\"day.isDisabled\"\r\n              [class.--range-start]=\"day.isRangeStart\"\r\n              [class.--range-end]=\"day.isRangeEnd\"\r\n              [class.--in-range]=\"day.isInRange\"\r\n              [class.--range-preview]=\"day.isRangePreview\"\r\n              role=\"gridcell\"\r\n              [attr.aria-selected]=\"day.isSelected\"\r\n              [attr.aria-disabled]=\"day.isDisabled\"\r\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\r\n              [attr.tabindex]=\"day.isCurrentMonth && !day.isDisabled ? 0 : -1\"\r\n              (click)=\"onDayClick(day)\"\r\n              (mouseenter)=\"onDayMouseEnter(day)\"\r\n              (mouseleave)=\"onDayMouseLeave()\"\r\n            >\r\n              <span class=\"fui-calendar__day\">{{ day.day }}</span>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n\r\n<!-- Month View -->\r\n@if (currentView() === 'months') {\r\n  <div class=\"fui-calendar__months\" role=\"grid\" [attr.aria-label]=\"yearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of monthsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__months-row\" role=\"row\">\r\n        @for (month of row; track trackByMonth($index, month)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__month-cell\"\r\n            [class.--current]=\"month.isCurrentMonth\"\r\n            [class.--selected]=\"month.isSelected\"\r\n            [class.--disabled]=\"month.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"month.isSelected\"\r\n            [attr.aria-disabled]=\"month.isDisabled\"\r\n            [disabled]=\"month.isDisabled\"\r\n            (click)=\"onMonthClick(month)\"\r\n          >\r\n            {{ month.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Year View -->\r\n@if (currentView() === 'years') {\r\n  <div class=\"fui-calendar__years\" role=\"grid\" [attr.aria-label]=\"decadeLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of yearsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__years-row\" role=\"row\">\r\n        @for (year of row; track trackByYear($index, year)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__year-cell\"\r\n            [class.--current]=\"year.isCurrentYear\"\r\n            [class.--selected]=\"year.isSelected\"\r\n            [class.--disabled]=\"year.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"year.isSelected\"\r\n            [attr.aria-disabled]=\"year.isDisabled\"\r\n            [disabled]=\"year.isDisabled\"\r\n            (click)=\"onYearClick(year)\"\r\n          >\r\n            {{ year.year }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Live region for screen readers -->\r\n<div class=\"fui-calendar__announcer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @switch (currentView()) {\r\n    @case ('days') {\r\n      {{ monthYearLabel() }}\r\n    }\r\n    @case ('months') {\r\n      {{ yearLabel() }}\r\n    }\r\n    @case ('years') {\r\n      {{ decadeLabel() }}\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-calendar{display:block;width:280px;-webkit-user-select:none;user-select:none}.fui-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-2) var(--fui-spacing-4)}.fui-calendar__nav-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__nav-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-calendar__nav-btn:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-calendar__header-label{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__header-label{font-size:var(--fui-text-base);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary);padding:var(--fui-spacing-1) var(--fui-spacing-2);border-radius:var(--fui-radius-sm);transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-calendar__header-label:hover{background-color:var(--fui-bg-subtle)}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-calendar__grid{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;padding:0 var(--fui-spacing-2)}.fui-calendar__weekday{font-size:var(--fui-text-sm);font-weight:var(--fui-weight-semibold);color:var(--fui-text-secondary);text-align:center;padding-bottom:var(--fui-spacing-1);height:2rem;vertical-align:middle}.fui-calendar__cell{text-align:center;padding:1px 0;cursor:pointer;position:relative;outline:none}.fui-calendar__cell:focus-visible .fui-calendar__day{outline:2px solid var(--fui-primary-10)}.fui-calendar__cell.--disabled{cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day:hover{background-color:transparent}.fui-calendar__cell.--outside .fui-calendar__day{color:var(--fui-text-disabled);opacity:.4}.fui-calendar__cell.--today .fui-calendar__day{position:relative;font-weight:var(--fui-weight-semibold)}.fui-calendar__cell.--today .fui-calendar__day:after{content:\"\";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:var(--fui-primary-bg)}.fui-calendar__cell.--selected .fui-calendar__day{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill);font-weight:var(--fui-weight-semibold)}.fui-calendar__cell.--selected .fui-calendar__day:after{display:none}.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill);font-weight:var(--fui-weight-semibold)}.fui-calendar__cell.--range-start{background:linear-gradient(to right,transparent 50%,var(--fui-primary-bg-disabled) 50%)}.fui-calendar__cell.--range-end{background:linear-gradient(to left,transparent 50%,var(--fui-primary-bg-disabled) 50%)}.fui-calendar__cell.--range-start.--range-end{background:transparent}.fui-calendar__cell.--in-range{background-color:var(--fui-primary-bg-disabled)}.fui-calendar__cell.--in-range .fui-calendar__day{color:var(--fui-brand-fg);font-weight:var(--fui-weight-medium)}.fui-calendar__cell.--range-preview{background-color:var(--fui-primary-bg-disabled);opacity:.5}.fui-calendar__cell.--range-preview .fui-calendar__day{color:var(--fui-brand-fg)}.fui-calendar__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;font-size:var(--fui-text-sm);color:var(--fui-text-primary);margin:0 auto;transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-calendar__day:hover{background-color:var(--fui-bg-subtle)}.fui-calendar__months,.fui-calendar__years{padding:var(--fui-spacing-4)}.fui-calendar__months-row,.fui-calendar__years-row{display:flex;justify-content:space-around;margin-bottom:var(--fui-spacing-2)}.fui-calendar__months-row:last-child,.fui-calendar__years-row:last-child{margin-bottom:0}.fui-calendar__month-cell,.fui-calendar__year-cell{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__month-cell,.fui-calendar__year-cell{display:flex;align-items:center;justify-content:center;width:5rem;height:2.5rem;border-radius:var(--fui-radius-md);font-size:var(--fui-text-sm);color:var(--fui-text-primary);transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-calendar__month-cell:hover:not(:disabled),.fui-calendar__year-cell:hover:not(:disabled){background-color:var(--fui-bg-subtle)}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-calendar__month-cell.--current,.fui-calendar__year-cell.--current{font-weight:var(--fui-weight-semibold);color:var(--fui-brand-fg)}.fui-calendar__month-cell.--selected,.fui-calendar__year-cell.--selected{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill);font-weight:var(--fui-weight-semibold)}.fui-calendar__month-cell.--disabled,.fui-calendar__year-cell.--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__announcer{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(prefers-contrast:high){.fui-calendar__cell.--selected .fui-calendar__day,.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{outline:2px solid}}@media(prefers-reduced-motion:reduce){.fui-calendar__day,.fui-calendar__nav-btn,.fui-calendar__header-label,.fui-calendar__month-cell,.fui-calendar__year-cell{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCalendarComponent, decorators: [{
             type: Component,
@@ -718,13 +802,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         tabindex: '0',
                         role: 'application',
                         '[attr.aria-label]': 'intl.rootAriaLabel',
-                    }, template: "<!-- Calendar Header -->\r\n<div class=\"fui-calendar__header\">\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onPrev()\" [attr.aria-label]=\"prevButtonLabel()\">\r\n    <fui-icon name=\"caret-left\" size=\"sm\" />\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-calendar__header-label\"\r\n    (click)=\"onHeaderLabelClick()\"\r\n    [attr.aria-label]=\"headerButtonLabel()\"\r\n  >\r\n    @switch (currentView()) {\r\n      @case ('days') {\r\n        {{ monthYearLabel() }}\r\n      }\r\n      @case ('months') {\r\n        {{ yearLabel() }}\r\n      }\r\n      @case ('years') {\r\n        {{ decadeLabel() }}\r\n      }\r\n    }\r\n  </button>\r\n\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onNext()\" [attr.aria-label]=\"nextButtonLabel()\">\r\n    <fui-icon name=\"caret-right\" size=\"sm\" />\r\n  </button>\r\n</div>\r\n\r\n<!-- Day View -->\r\n@if (currentView() === 'days') {\r\n  <table class=\"fui-calendar__grid\" role=\"grid\" [attr.aria-label]=\"monthYearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    <thead>\r\n      <tr>\r\n        @for (header of weekDayHeaders(); track header) {\r\n          <th class=\"fui-calendar__weekday\" scope=\"col\">{{ header }}</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (week of weeks(); track trackByWeek($index, week)) {\r\n        <tr>\r\n          @for (day of week; track trackByDay($index, day)) {\r\n            <td\r\n              class=\"fui-calendar__cell\"\r\n              [class.--today]=\"day.isToday\"\r\n              [class.--selected]=\"day.isSelected\"\r\n              [class.--outside]=\"!day.isCurrentMonth\"\r\n              [class.--disabled]=\"day.isDisabled\"\r\n              [class.--range-start]=\"day.isRangeStart\"\r\n              [class.--range-end]=\"day.isRangeEnd\"\r\n              [class.--in-range]=\"day.isInRange\"\r\n              [class.--range-preview]=\"day.isRangePreview\"\r\n              role=\"gridcell\"\r\n              [attr.aria-selected]=\"day.isSelected\"\r\n              [attr.aria-disabled]=\"day.isDisabled\"\r\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\r\n              [attr.tabindex]=\"day.isCurrentMonth && !day.isDisabled ? 0 : -1\"\r\n              (click)=\"onDayClick(day)\"\r\n              (mouseenter)=\"onDayMouseEnter(day)\"\r\n              (mouseleave)=\"onDayMouseLeave()\"\r\n            >\r\n              <span class=\"fui-calendar__day\">{{ day.day }}</span>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n\r\n<!-- Month View -->\r\n@if (currentView() === 'months') {\r\n  <div class=\"fui-calendar__months\" role=\"grid\" [attr.aria-label]=\"yearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of monthsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__months-row\" role=\"row\">\r\n        @for (month of row; track trackByMonth($index, month)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__month-cell\"\r\n            [class.--current]=\"month.isCurrentMonth\"\r\n            [class.--selected]=\"month.isSelected\"\r\n            [class.--disabled]=\"month.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"month.isSelected\"\r\n            [attr.aria-disabled]=\"month.isDisabled\"\r\n            [disabled]=\"month.isDisabled\"\r\n            (click)=\"onMonthClick(month)\"\r\n          >\r\n            {{ month.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Year View -->\r\n@if (currentView() === 'years') {\r\n  <div class=\"fui-calendar__years\" role=\"grid\" [attr.aria-label]=\"decadeLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of yearsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__years-row\" role=\"row\">\r\n        @for (year of row; track trackByYear($index, year)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__year-cell\"\r\n            [class.--current]=\"year.isCurrentYear\"\r\n            [class.--selected]=\"year.isSelected\"\r\n            [class.--disabled]=\"year.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"year.isSelected\"\r\n            [attr.aria-disabled]=\"year.isDisabled\"\r\n            [disabled]=\"year.isDisabled\"\r\n            (click)=\"onYearClick(year)\"\r\n          >\r\n            {{ year.year }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Live region for screen readers -->\r\n<div class=\"fui-calendar__announcer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @switch (currentView()) {\r\n    @case ('days') {\r\n      {{ monthYearLabel() }}\r\n    }\r\n    @case ('months') {\r\n      {{ yearLabel() }}\r\n    }\r\n    @case ('years') {\r\n      {{ decadeLabel() }}\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-calendar{display:block;width:280px;-webkit-user-select:none;user-select:none}.fui-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-02) var(--fui-spacing-03)}.fui-calendar__nav-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__nav-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__nav-btn:hover{background-color:var(--fui-surface-02);color:var(--fui-text-primary)}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__header-label{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__header-label{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-primary);padding:var(--fui-spacing-01) var(--fui-spacing-02);border-radius:var(--fui-border-radius-sm);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__header-label:hover{background-color:var(--fui-surface-02)}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__grid{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;padding:0 var(--fui-spacing-02)}.fui-calendar__weekday{font-size:var(--fui-font-size-01);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-secondary);text-align:center;padding-bottom:var(--fui-spacing-01);height:2rem;vertical-align:middle}.fui-calendar__cell{text-align:center;padding:1px;cursor:pointer;position:relative;outline:none}.fui-calendar__cell:focus-visible .fui-calendar__day{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__cell.--disabled{cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day:hover{background-color:transparent}.fui-calendar__cell.--outside .fui-calendar__day{color:var(--fui-text-disabled);opacity:.4}.fui-calendar__cell.--today .fui-calendar__day{position:relative;font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--today .fui-calendar__day:after{content:\"\";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:var(--fui-primary)}.fui-calendar__cell.--selected .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--selected .fui-calendar__day:after{display:none}.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--range-start{background:linear-gradient(to right,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-end{background:linear-gradient(to left,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-start.--range-end{background:transparent}.fui-calendar__cell.--in-range{background-color:var(--fui-primary-10)}.fui-calendar__cell.--in-range .fui-calendar__day{color:var(--fui-primary);font-weight:var(--fui-font-weight-medium)}.fui-calendar__cell.--range-preview{background-color:var(--fui-primary-10);opacity:.5}.fui-calendar__cell.--range-preview .fui-calendar__day{color:var(--fui-primary)}.fui-calendar__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;font-size:var(--fui-font-size-01);color:var(--fui-text-primary);margin:0 auto;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__day:hover{background-color:var(--fui-surface-02)}.fui-calendar__months,.fui-calendar__years{padding:var(--fui-spacing-03)}.fui-calendar__months-row,.fui-calendar__years-row{display:flex;justify-content:space-around;margin-bottom:var(--fui-spacing-02)}.fui-calendar__months-row:last-child,.fui-calendar__years-row:last-child{margin-bottom:0}.fui-calendar__month-cell,.fui-calendar__year-cell{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__month-cell,.fui-calendar__year-cell{display:flex;align-items:center;justify-content:center;width:5rem;height:2.5rem;border-radius:var(--fui-border-radius-md);font-size:var(--fui-font-size-01);color:var(--fui-text-primary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__month-cell:hover:not(:disabled),.fui-calendar__year-cell:hover:not(:disabled){background-color:var(--fui-surface-02)}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__month-cell.--current,.fui-calendar__year-cell.--current{font-weight:var(--fui-font-weight-semibold);color:var(--fui-primary)}.fui-calendar__month-cell.--selected,.fui-calendar__year-cell.--selected{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__month-cell.--disabled,.fui-calendar__year-cell.--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__announcer{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(prefers-contrast:high){.fui-calendar__cell.--selected .fui-calendar__day,.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{outline:2px solid}}@media(prefers-reduced-motion:reduce){.fui-calendar__day,.fui-calendar__nav-btn,.fui-calendar__header-label,.fui-calendar__month-cell,.fui-calendar__year-cell{transition:none}}\n"] }]
+                    }, template: "<!-- Calendar Header -->\r\n<div class=\"fui-calendar__header\">\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onPrev()\" [attr.aria-label]=\"prevButtonLabel()\">\r\n    <fui-icon name=\"caret-left\" size=\"sm\" />\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-calendar__header-label\"\r\n    (click)=\"onHeaderLabelClick()\"\r\n    [attr.aria-label]=\"headerButtonLabel()\"\r\n  >\r\n    @switch (currentView()) {\r\n      @case ('days') {\r\n        {{ monthYearLabel() }}\r\n      }\r\n      @case ('months') {\r\n        {{ yearLabel() }}\r\n      }\r\n      @case ('years') {\r\n        {{ decadeLabel() }}\r\n      }\r\n    }\r\n  </button>\r\n\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onNext()\" [attr.aria-label]=\"nextButtonLabel()\">\r\n    <fui-icon name=\"caret-right\" size=\"sm\" />\r\n  </button>\r\n</div>\r\n\r\n<!-- Day View -->\r\n@if (currentView() === 'days') {\r\n  <table class=\"fui-calendar__grid\" role=\"grid\" [attr.aria-label]=\"monthYearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    <thead>\r\n      <tr>\r\n        @for (header of weekDayHeaders(); track $index) {\r\n          <th class=\"fui-calendar__weekday\" scope=\"col\">{{ header }}</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (week of weeks(); track trackByWeek($index, week)) {\r\n        <tr>\r\n          @for (day of week; track trackByDay($index, day)) {\r\n            <td\r\n              class=\"fui-calendar__cell\"\r\n              [class.--today]=\"day.isToday\"\r\n              [class.--selected]=\"day.isSelected\"\r\n              [class.--outside]=\"!day.isCurrentMonth\"\r\n              [class.--disabled]=\"day.isDisabled\"\r\n              [class.--range-start]=\"day.isRangeStart\"\r\n              [class.--range-end]=\"day.isRangeEnd\"\r\n              [class.--in-range]=\"day.isInRange\"\r\n              [class.--range-preview]=\"day.isRangePreview\"\r\n              role=\"gridcell\"\r\n              [attr.aria-selected]=\"day.isSelected\"\r\n              [attr.aria-disabled]=\"day.isDisabled\"\r\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\r\n              [attr.tabindex]=\"day.isCurrentMonth && !day.isDisabled ? 0 : -1\"\r\n              (click)=\"onDayClick(day)\"\r\n              (mouseenter)=\"onDayMouseEnter(day)\"\r\n              (mouseleave)=\"onDayMouseLeave()\"\r\n            >\r\n              <span class=\"fui-calendar__day\">{{ day.day }}</span>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n\r\n<!-- Month View -->\r\n@if (currentView() === 'months') {\r\n  <div class=\"fui-calendar__months\" role=\"grid\" [attr.aria-label]=\"yearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of monthsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__months-row\" role=\"row\">\r\n        @for (month of row; track trackByMonth($index, month)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__month-cell\"\r\n            [class.--current]=\"month.isCurrentMonth\"\r\n            [class.--selected]=\"month.isSelected\"\r\n            [class.--disabled]=\"month.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"month.isSelected\"\r\n            [attr.aria-disabled]=\"month.isDisabled\"\r\n            [disabled]=\"month.isDisabled\"\r\n            (click)=\"onMonthClick(month)\"\r\n          >\r\n            {{ month.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Year View -->\r\n@if (currentView() === 'years') {\r\n  <div class=\"fui-calendar__years\" role=\"grid\" [attr.aria-label]=\"decadeLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of yearsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__years-row\" role=\"row\">\r\n        @for (year of row; track trackByYear($index, year)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__year-cell\"\r\n            [class.--current]=\"year.isCurrentYear\"\r\n            [class.--selected]=\"year.isSelected\"\r\n            [class.--disabled]=\"year.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"year.isSelected\"\r\n            [attr.aria-disabled]=\"year.isDisabled\"\r\n            [disabled]=\"year.isDisabled\"\r\n            (click)=\"onYearClick(year)\"\r\n          >\r\n            {{ year.year }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Live region for screen readers -->\r\n<div class=\"fui-calendar__announcer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @switch (currentView()) {\r\n    @case ('days') {\r\n      {{ monthYearLabel() }}\r\n    }\r\n    @case ('months') {\r\n      {{ yearLabel() }}\r\n    }\r\n    @case ('years') {\r\n      {{ decadeLabel() }}\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-calendar{display:block;width:280px;-webkit-user-select:none;user-select:none}.fui-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-2) var(--fui-spacing-4)}.fui-calendar__nav-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__nav-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-calendar__nav-btn:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-calendar__header-label{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__header-label{font-size:var(--fui-text-base);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary);padding:var(--fui-spacing-1) var(--fui-spacing-2);border-radius:var(--fui-radius-sm);transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-calendar__header-label:hover{background-color:var(--fui-bg-subtle)}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-calendar__grid{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;padding:0 var(--fui-spacing-2)}.fui-calendar__weekday{font-size:var(--fui-text-sm);font-weight:var(--fui-weight-semibold);color:var(--fui-text-secondary);text-align:center;padding-bottom:var(--fui-spacing-1);height:2rem;vertical-align:middle}.fui-calendar__cell{text-align:center;padding:1px 0;cursor:pointer;position:relative;outline:none}.fui-calendar__cell:focus-visible .fui-calendar__day{outline:2px solid var(--fui-primary-10)}.fui-calendar__cell.--disabled{cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day:hover{background-color:transparent}.fui-calendar__cell.--outside .fui-calendar__day{color:var(--fui-text-disabled);opacity:.4}.fui-calendar__cell.--today .fui-calendar__day{position:relative;font-weight:var(--fui-weight-semibold)}.fui-calendar__cell.--today .fui-calendar__day:after{content:\"\";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:var(--fui-primary-bg)}.fui-calendar__cell.--selected .fui-calendar__day{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill);font-weight:var(--fui-weight-semibold)}.fui-calendar__cell.--selected .fui-calendar__day:after{display:none}.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill);font-weight:var(--fui-weight-semibold)}.fui-calendar__cell.--range-start{background:linear-gradient(to right,transparent 50%,var(--fui-primary-bg-disabled) 50%)}.fui-calendar__cell.--range-end{background:linear-gradient(to left,transparent 50%,var(--fui-primary-bg-disabled) 50%)}.fui-calendar__cell.--range-start.--range-end{background:transparent}.fui-calendar__cell.--in-range{background-color:var(--fui-primary-bg-disabled)}.fui-calendar__cell.--in-range .fui-calendar__day{color:var(--fui-brand-fg);font-weight:var(--fui-weight-medium)}.fui-calendar__cell.--range-preview{background-color:var(--fui-primary-bg-disabled);opacity:.5}.fui-calendar__cell.--range-preview .fui-calendar__day{color:var(--fui-brand-fg)}.fui-calendar__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;font-size:var(--fui-text-sm);color:var(--fui-text-primary);margin:0 auto;transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-calendar__day:hover{background-color:var(--fui-bg-subtle)}.fui-calendar__months,.fui-calendar__years{padding:var(--fui-spacing-4)}.fui-calendar__months-row,.fui-calendar__years-row{display:flex;justify-content:space-around;margin-bottom:var(--fui-spacing-2)}.fui-calendar__months-row:last-child,.fui-calendar__years-row:last-child{margin-bottom:0}.fui-calendar__month-cell,.fui-calendar__year-cell{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__month-cell,.fui-calendar__year-cell{display:flex;align-items:center;justify-content:center;width:5rem;height:2.5rem;border-radius:var(--fui-radius-md);font-size:var(--fui-text-sm);color:var(--fui-text-primary);transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-calendar__month-cell:hover:not(:disabled),.fui-calendar__year-cell:hover:not(:disabled){background-color:var(--fui-bg-subtle)}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-calendar__month-cell.--current,.fui-calendar__year-cell.--current{font-weight:var(--fui-weight-semibold);color:var(--fui-brand-fg)}.fui-calendar__month-cell.--selected,.fui-calendar__year-cell.--selected{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill);font-weight:var(--fui-weight-semibold)}.fui-calendar__month-cell.--disabled,.fui-calendar__year-cell.--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__announcer{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(prefers-contrast:high){.fui-calendar__cell.--selected .fui-calendar__day,.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{outline:2px solid}}@media(prefers-reduced-motion:reduce){.fui-calendar__day,.fui-calendar__nav-btn,.fui-calendar__header-label,.fui-calendar__month-cell,.fui-calendar__year-cell{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], hoveredDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoveredDate", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateHovered: [{ type: i0.Output, args: ["dateHovered"] }], monthChanged: [{ type: i0.Output, args: ["monthChanged"] }] } });
 
 class FuiDatePickerIntl extends FuiIntlBase {
     endDateAriaLabel = 'End date';
     openCalendarAriaLabel = 'Open calendar';
     calendarDialogAriaLabel = 'Calendar';
+    presetsAriaLabel = 'Date presets';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerIntl, providedIn: 'root' });
 }
@@ -785,10 +870,12 @@ class FuiDatePickerComponent {
     controlType = 'fui-date-picker';
     intl = inject(FuiDatePickerIntl);
     _cdr = inject(ChangeDetectorRef);
+    _popup = inject(FuiPopupOverlayDirective);
+    _formSync = inject(FuiFormControlSyncDirective);
     // Inputs
     placeholderInput = input('', { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly' });
     range = input(false, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
     format = input(DEFAULT_DATE_FORMAT, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
@@ -798,6 +885,7 @@ class FuiDatePickerComponent {
     firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
     rangeSeparator = input(RANGE_SEPARATOR, ...(ngDevMode ? [{ debugName: "rangeSeparator" }] : /* istanbul ignore next */ []));
     errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
     // Outputs
     valueChange = output();
     dateChange = output();
@@ -809,8 +897,8 @@ class FuiDatePickerComponent {
     _ngControlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_ngControlDisabled" }] : /* istanbul ignore next */ []));
     _required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : /* istanbul ignore next */ []));
     _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
-    _readOnly = signal(false, ...(ngDevMode ? [{ debugName: "_readOnly" }] : /* istanbul ignore next */ []));
-    panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    /** Whether the calendar panel is open — projected from FuiPopupOverlayDirective. */
+    panelOpen = computed(() => this._popup.panelOpen(), ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
     // Range hover
     hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []));
     // FuiFormFieldControl
@@ -818,9 +906,6 @@ class FuiDatePickerComponent {
     _uid = `fui-date-picker-${FuiDatePickerComponent.nextId++}`;
     _ariaDescribedby = null;
     // Form references
-    _parentForm = inject(NgForm, { optional: true });
-    _parentFormGroup = inject(FormGroupDirective, { optional: true });
-    _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);
     _ngControlRef = injectNgControl();
     get ngControl() {
         return this._ngControlRef.ngControl;
@@ -831,6 +916,7 @@ class FuiDatePickerComponent {
     value = this._value;
     focused = this._focused;
     disabled = computed(() => this._disabled() || this.disabledInput() || this._ngControlDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = computed(() => this.readonlyInput(), ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     errorState = this._errorState;
     id = this._uid;
     empty = computed(() => {
@@ -866,15 +952,10 @@ class FuiDatePickerComponent {
     calendarPanel;
     startInputEl;
     endInputEl;
+    // ViewChild for fuiInput directives — delegates readonly/disabled/aria/state
+    _fuiStartInput;
+    _fuiEndInput;
     calendarComponent;
-    // Overlay
-    _overlayRef = null;
-    _overlaySubscriptions = new Subscription();
-    _overlayService = inject(FuiOverlayService);
-    _elementRef = inject(ElementRef);
-    _document = inject(DOCUMENT);
-    _ngZone = inject(NgZone);
-    _outsideClickSub;
     // CVA callbacks
     _onChange = () => {
         /* noop */
@@ -908,59 +989,84 @@ class FuiDatePickerComponent {
                 this._ngControlRef.ngControl.valueAccessor = this;
             }
         });
-        // Effect to emit state changes
+        // Effect A: sync display text then emit state changes
+        // Combines former "display-value" and "state-sync" effects; both depend on
+        // _value / format / range, so merging avoids a redundant second reaction on
+        // those signals. Display text is refreshed first so stateChanges listeners
+        // always observe the up-to-date text.
         effect(() => {
+            const val = this._value();
+            const fmt = this.format();
+            if (this.range() && this._isDateRange(val)) {
+                this.startInputText.set(formatDate(val.start, fmt));
+                this.endInputText.set(formatDate(val.end, fmt));
+            }
+            else if (val instanceof Date) {
+                this.startInputText.set(formatDate(val, fmt));
+            }
+            else {
+                this.startInputText.set('');
+                this.endInputText.set('');
+            }
             this.placeholderInput();
             this.readonly();
             this.disabledInput();
-            this.range();
-            this.format();
             this.errorStateMatcher();
             this._focused();
             this._disabled();
-            this._value();
             this._ngControlDisabled();
             this._required();
             this._errorState();
             this.stateChanges.next();
         });
-        // Re-trigger validation when min/max/dateFilter change
+        // Effect B: re-trigger validation when validator-influencing inputs change
         effect(() => {
             this.min();
             this.max();
             this.dateFilter();
             this._onValidatorChange();
         });
-        // Sync display text when value changes
+        // Effect C: shift focus after panel open/close via queueMicrotask so that
+        // Angular's change-detection has already flushed the [hidden] binding before
+        // .focus() is called.  Calling .focus() synchronously inside open()/close()
+        // fails silently because the calendar element still has a [hidden] ancestor
+        // at that point (CD has not run yet), so the browser refuses to focus it.
+        // _panelOpenInitialized skips the very first synchronous run (panelOpen=false
+        // at construction time) to avoid spuriously moving focus to the input on init.
+        let _panelOpenInitialized = false;
         effect(() => {
-            const val = this._value();
-            const fmt = this.format();
-            if (this.range() && this._isDateRange(val)) {
-                this.startInputText.set(formatDate(val.start, fmt));
-                this.endInputText.set(formatDate(val.end, fmt));
+            const isOpen = this._popup.panelOpen();
+            if (!_panelOpenInitialized) {
+                _panelOpenInitialized = true;
+                return;
             }
-            else if (val instanceof Date) {
-                this.startInputText.set(formatDate(val, fmt));
+            if (isOpen) {
+                queueMicrotask(() => this.calendarComponent?.focus());
             }
             else {
-                this.startInputText.set('');
-                this.endInputText.set('');
+                queueMicrotask(() => this.startInputEl?.nativeElement.focus());
             }
         });
     }
-    ngDoCheck() {
-        if (this.ngControl) {
-            updateErrorState(this.ngControl, this._errorState, this.errorStateMatcher(), this._defaultErrorStateMatcher, this._parentForm, this._parentFormGroup, this.stateChanges);
-            syncRequiredState(this.ngControl, this._required, this.stateChanges);
-            syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);
-        }
+    ngAfterViewInit() {
+        // Wire popup-overlay directive. Both triggerEl and calendarPanel use static:true so refs
+        // are resolved here regardless of panel open state (panel is always rendered via [hidden]).
+        this._popup.setTrigger(this.triggerEl ?? null);
+        this._popup.setPanel(this.calendarPanel ?? null);
+        this._popup.panelClass.set(['fui-date-picker-overlay-panel']);
+        this._popup.backdropClass.set('fui-date-picker-backdrop');
+        // Wire form-control-sync directive signals
+        this._formSync.errorState.set(this._errorState);
+        this._formSync.errorStateMatcher.set(this.errorStateMatcher());
+        this._formSync.required.set(this._required);
+        this._formSync.ngControlDisabled.set(this._ngControlDisabled);
+        this._formSync.stateChanges.set(this.stateChanges);
     }
     ngOnDestroy() {
         this.stateChanges.complete();
-        this._outsideClickSub?.unsubscribe();
-        this._disposeOverlay();
     }
     // --- CVA ---
+    /** Sets the picker value from the form model. Accepts Date, DateRange, ISO string, or null. */
     writeValue(value) {
         if (typeof value === 'string') {
             const parsed = parseDate(value, this.format());
@@ -981,17 +1087,21 @@ class FuiDatePickerComponent {
         }
         this.stateChanges.next();
     }
+    /** Registers the callback Angular calls when the value should propagate to the model. */
     registerOnChange(fn) {
         this._onChange = fn;
     }
+    /** Registers the callback Angular calls when the control should be marked as touched. */
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
+    /** Enables or disables the control programmatically; mirrors the `disabled` form-control state. */
     setDisabledState(isDisabled) {
         this._disabled.set(isDisabled);
         this.stateChanges.next();
     }
     // --- Validator ---
+    /** Validates the current date value against min, max, and dateFilter constraints. Returns null when valid. */
     validate(_control) {
         const value = this._value();
         if (value === null)
@@ -1018,6 +1128,7 @@ class FuiDatePickerComponent {
         }
         return null;
     }
+    /** Stores the callback Angular calls when validator inputs (min/max/filter) change so the form re-validates. */
     registerOnValidatorChange(fn) {
         this._onValidatorChange = fn;
     }
@@ -1034,6 +1145,7 @@ class FuiDatePickerComponent {
         return null;
     }
     // --- FuiFormFieldControl ---
+    /** Focuses the start input and opens the calendar panel when the form-field container is clicked, unless disabled. */
     onContainerClick(_event) {
         if (!this.disabled()) {
             this.startInputEl?.nativeElement.focus();
@@ -1042,43 +1154,34 @@ class FuiDatePickerComponent {
             }
         }
     }
+    /** Stores the space-separated list of IDs for the aria-describedby attribute. */
     setDescribedByIds(ids) {
         this._ariaDescribedby = ids.length ? ids.join(' ') : null;
-    }
-    setReadOnly(readOnly) {
-        this._readOnly.set(readOnly);
+        this._fuiStartInput?.setDescribedByIds(ids);
+        this._fuiEndInput?.setDescribedByIds(ids);
     }
     // --- Panel open/close ---
+    /** Opens the calendar panel. No-op if disabled, readonly, or already open. */
     open() {
-        if (this.disabled() || this.readonly() || this.panelOpen())
+        if (this.disabled() || this.readonly() || this._popup.panelOpen())
             return;
-        requestAnimationFrame(() => {
-            this.panelOpen.set(true);
-            this._focused.set(true);
-            this.openedChange.emit(true);
-            setTimeout(() => {
-                this._createOverlay();
-                this._listenForOutsideClicks();
-                this.calendarComponent?.focus();
-            });
-        });
+        this._focused.set(true);
+        this.openedChange.emit(true);
+        this._popup.open();
     }
+    /** Closes the calendar panel and restores focus to the start input. No-op if already closed. */
     close() {
-        if (!this.panelOpen())
+        if (!this._popup.panelOpen())
             return;
-        this._outsideClickSub?.unsubscribe();
-        this.panelOpen.set(false);
         this._focused.set(false);
         this.hoveredDate.set(null);
-        this._disposeOverlay();
-        this.openedChange.emit(false);
         this._onTouched();
-        setTimeout(() => {
-            this.startInputEl?.nativeElement.focus();
-        }, 0);
+        this._popup.close();
+        this.openedChange.emit(false);
     }
+    /** Toggles the calendar panel between open and closed. */
     toggle() {
-        if (this.panelOpen()) {
+        if (this._popup.panelOpen()) {
             this.close();
         }
         else {
@@ -1144,6 +1247,7 @@ class FuiDatePickerComponent {
     onKeydown(event) {
         if (event.key === 'Escape' && this.panelOpen()) {
             event.preventDefault();
+            event.stopPropagation();
             this.close();
         }
         else if ((event.key === 'ArrowDown' || event.key === 'Enter') && !this.panelOpen()) {
@@ -1185,6 +1289,7 @@ class FuiDatePickerComponent {
     onEndKeydown(event) {
         if (event.key === 'Escape' && this.panelOpen()) {
             event.preventDefault();
+            event.stopPropagation();
             this.close();
         }
     }
@@ -1204,25 +1309,29 @@ class FuiDatePickerComponent {
     onDateHovered(date) {
         this.hoveredDate.set(date);
     }
-    // Start listening for outside clicks when panel opens
-    _listenForOutsideClicks() {
-        this._outsideClickSub?.unsubscribe();
-        this._ngZone.runOutsideAngular(() => {
-            setTimeout(() => {
-                this._outsideClickSub = fromEvent(this._document, 'click')
-                    .pipe(filter(() => this.panelOpen()), filter((event) => {
-                    const target = event.target;
-                    const hostElement = this._elementRef.nativeElement;
-                    const overlayElement = this._overlayRef?.overlayElement;
-                    return !hostElement.contains(target) && !overlayElement?.contains(target);
-                }))
-                    .subscribe(() => {
-                    this._ngZone.run(() => {
-                        this.close();
-                    });
-                });
-            });
-        });
+    /** @internal Handle a preset click — apply the preset value and close the panel. */
+    _onPresetClick(preset) {
+        const value = preset.value();
+        if (value === null) {
+            this._setValue(null);
+            this.close();
+            return;
+        }
+        if (this.range()) {
+            if (value instanceof Date) {
+                this._setValue({ start: value, end: value });
+            }
+            else {
+                const start = value.start ? normalizeDate(value.start) : null;
+                const end = value.end ? normalizeDate(value.end) : null;
+                this._setValue({ start, end });
+            }
+        }
+        else {
+            const single = value instanceof Date ? normalizeDate(value) : value.start;
+            this._setValue(single ? normalizeDate(single) : null);
+        }
+        this.close();
     }
     // --- Private helpers ---
     _handleRangeSelection(date) {
@@ -1251,65 +1360,22 @@ class FuiDatePickerComponent {
         this.dateChange.emit(value);
         this.stateChanges.next();
     }
-    _createOverlay() {
-        if (this._overlayRef || !this.calendarPanel || !this.triggerEl)
-            return;
-        const triggerElement = this.triggerEl.nativeElement;
-        const triggerWidth = triggerElement.getBoundingClientRect().width;
-        const positions = [
-            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
-            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
-        ];
-        const positionStrategy = this._overlayService
-            .position()
-            .connectedTo(triggerElement, positions)
-            .withPush(true)
-            .withViewportMargin(8);
-        this._overlayRef = this._overlayService.create({
-            positionStrategy,
-            scrollStrategy: this._overlayService.scrollStrategies.reposition(),
-            hasBackdrop: true,
-            backdropClass: 'fui-date-picker-backdrop',
-            backdropClickBehavior: 'close',
-            panelClass: ['fui-date-picker-overlay-panel'],
-            minWidth: Math.max(triggerWidth, 280),
-        });
-        // Track overlay subscriptions for proper cleanup
-        this._overlaySubscriptions.unsubscribe();
-        this._overlaySubscriptions = new Subscription();
-        this._overlaySubscriptions.add(this._overlayRef.backdropClick.subscribe(() => {
-            this.close();
-        }));
-        this._overlaySubscriptions.add(this._overlayRef.keydownEvents.subscribe((event) => {
-            if (event.key === 'Escape') {
-                this.close();
-            }
-        }));
-        const panelElement = this.calendarPanel.nativeElement;
-        this._overlayRef.attach(panelElement);
-    }
-    _disposeOverlay() {
-        this._overlaySubscriptions.unsubscribe();
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
-    }
     _isDateRange(val) {
         return val !== null && !(val instanceof Date) && typeof val === 'object' && 'start' in val;
     }
-    // Public: get the computed placeholder for the start input
+    /** Returns the placeholder for the start input: uses the `placeholder` input if set, otherwise the format string. */
     getStartPlaceholder() {
         const p = this.placeholderInput();
         if (p)
             return p;
         return this.format().toLowerCase();
     }
+    /** Returns the placeholder for the end input in range mode: the format string lowercased. */
     getEndPlaceholder() {
         return this.format().toLowerCase();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDatePickerComponent, isStandalone: true, selector: "fui-date-picker", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", 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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateChange: "dateChange", openedChange: "openedChange" }, host: { properties: { "attr.id": "id", "class.fui-date-picker--open": "panelOpen()", "class.fui-date-picker--disabled": "disabled()", "class.fui-date-picker--range": "range()", "class.fui-date-picker--focused": "focused()", "class.fui-date-picker--error": "errorState()", "class.fui-date-picker--readonly": "_readOnly()" }, classAttribute: "fui-date-picker" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDatePickerComponent, isStandalone: true, selector: "fui-date-picker", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", 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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateChange: "dateChange", openedChange: "openedChange" }, host: { properties: { "attr.id": "id", "class.fui-date-picker--open": "panelOpen()", "class.fui-date-picker--disabled": "disabled()", "class.fui-date-picker--range": "range()", "class.fui-date-picker--focused": "focused()", "class.fui-date-picker--error": "errorState()", "class.fui-date-picker--readonly": "readonly()" }, classAttribute: "fui-date-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: FuiDatePickerComponent,
@@ -1324,11 +1390,18 @@ class FuiDatePickerComponent {
                 provide: FUI_FORM_FIELD_CONTROL,
                 useExisting: FuiDatePickerComponent,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true }, { propertyName: "startInputEl", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInputEl", first: true, predicate: ["endInput"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n  <!-- Start input -->\r\n  <input\r\n    #startInput\r\n    class=\"fui-date-picker__input\"\r\n    [id]=\"id\"\r\n    [value]=\"startInputText()\"\r\n    [placeholder]=\"getStartPlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    aria-haspopup=\"dialog\"\r\n    aria-autocomplete=\"none\"\r\n    role=\"combobox\"\r\n    inputmode=\"numeric\"\r\n    autocomplete=\"off\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n    (focus)=\"onInputFocus()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  />\r\n\r\n  <!-- Range separator + end input -->\r\n  @if (range()) {\r\n    <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n    <input\r\n      #endInput\r\n      class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n      [value]=\"endInputText()\"\r\n      [placeholder]=\"getEndPlaceholder()\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n      [attr.aria-invalid]=\"errorState()\"\r\n      inputmode=\"numeric\"\r\n      autocomplete=\"off\"\r\n      (input)=\"onEndInput($event)\"\r\n      (blur)=\"onEndBlur()\"\r\n      (focus)=\"onInputFocus()\"\r\n      (keydown)=\"onEndKeydown($event)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    />\r\n  }\r\n\r\n  <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-date-picker__toggle\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-expanded]=\"panelOpen()\"\r\n      [disabled]=\"disabled()\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\r\n      <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n  <div\r\n    #calendarPanel\r\n    class=\"fui-date-picker__panel\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n  >\r\n    <fui-calendar\r\n      #calendar\r\n      [selected]=\"selectedDate()\"\r\n      [rangeStart]=\"rangeStartDate()\"\r\n      [rangeEnd]=\"rangeEndDate()\"\r\n      [range]=\"range()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [dateFilter]=\"dateFilter()\"\r\n      [startAt]=\"startAt()\"\r\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n      [hoveredDate]=\"hoveredDate()\"\r\n      (dateSelected)=\"onDateSelected($event)\"\r\n      (dateHovered)=\"onDateHovered($event)\"\r\n    />\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}.fui-date-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{animation:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiCalendarComponent, selector: "fui-calendar", inputs: ["selected", "rangeStart", "rangeEnd", "range", "min", "max", "dateFilter", "startAt", "firstDayOfWeek", "hoveredDate"], outputs: ["dateSelected", "dateHovered", "monthChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, static: true }, { propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true, static: true }, { propertyName: "startInputEl", first: true, predicate: ["startInput"], descendants: true, static: true }, { propertyName: "endInputEl", first: true, predicate: ["endInput"], descendants: true }, { propertyName: "_fuiStartInput", first: true, predicate: ["startInput"], descendants: true, read: FuiInputDirective, static: true }, { propertyName: "_fuiEndInput", first: true, predicate: ["endInput"], descendants: true, read: FuiInputDirective }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], hostDirectives: [{ directive: i1.FuiPopupOverlayDirective, inputs: ["positions", "positions", "panelClass", "panelClass", "backdropClass", "backdropClass", "scrollStrategy", "scrollStrategy", "minWidthFromTrigger", "minWidthFromTrigger"], outputs: ["openedChange", "openedChange", "escapeKey", "escapeKey"] }, { directive: i1.FuiFormControlSyncDirective }], ngImport: i0, template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n  <!-- Start input -->\r\n  <input\r\n    #startInput\r\n    fuiInput\r\n    class=\"fui-date-picker__input\"\r\n    [id]=\"id\"\r\n    [value]=\"startInputText()\"\r\n    [placeholder]=\"getStartPlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    aria-haspopup=\"dialog\"\r\n    aria-autocomplete=\"none\"\r\n    role=\"combobox\"\r\n    inputmode=\"numeric\"\r\n    autocomplete=\"off\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n    (focus)=\"onInputFocus()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  />\r\n\r\n  <!-- Range separator + end input -->\r\n  @if (range()) {\r\n    <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n    <input\r\n      #endInput\r\n      fuiInput\r\n      class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n      [value]=\"endInputText()\"\r\n      [placeholder]=\"getEndPlaceholder()\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n      inputmode=\"numeric\"\r\n      autocomplete=\"off\"\r\n      (input)=\"onEndInput($event)\"\r\n      (blur)=\"onEndBlur()\"\r\n      (focus)=\"onInputFocus()\"\r\n      (keydown)=\"onEndKeydown($event)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    />\r\n  }\r\n\r\n  <!-- Calendar toggle button \u2014 hidden when disabled or readOnly -->\r\n  @if (!disabled() && !readonly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-date-picker__toggle\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-expanded]=\"panelOpen()\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\r\n      <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Calendar panel (always rendered; hidden when closed so #calendarPanel ViewChild is always available) -->\r\n<div\r\n  #calendarPanel\r\n  [hidden]=\"!panelOpen()\"\r\n  class=\"fui-date-picker__panel\"\r\n  [class.fui-date-picker__panel--with-presets]=\"presets().length > 0\"\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n>\r\n  @if (presets().length > 0) {\r\n    <ul class=\"fui-date-picker__presets\" role=\"listbox\" [attr.aria-label]=\"intl.presetsAriaLabel\">\r\n      @for (preset of presets(); track preset.label) {\r\n        <li role=\"option\" class=\"fui-date-picker__preset-item\">\r\n          <button type=\"button\" class=\"fui-date-picker__preset-btn\" (click)=\"_onPresetClick(preset)\">\r\n            {{ preset.label }}\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n  <fui-calendar\r\n    #calendar\r\n    [selected]=\"selectedDate()\"\r\n    [rangeStart]=\"rangeStartDate()\"\r\n    [rangeEnd]=\"rangeEndDate()\"\r\n    [range]=\"range()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [dateFilter]=\"dateFilter()\"\r\n    [startAt]=\"startAt()\"\r\n    [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n    [hoveredDate]=\"hoveredDate()\"\r\n    (dateSelected)=\"onDateSelected($event)\"\r\n    (dateHovered)=\"onDateHovered($event)\"\r\n  />\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-date-picker{--fui-date-picker-font-size: var(--fui-text-base);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-1);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-text-base);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker .fui-date-picker__panel{display:none}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-lg);--fui-date-picker-panel-bg: var(--fui-bg-default);--fui-date-picker-panel-border-color: var(--fui-border-default);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-2);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-base) var(--fui-ease-out) both;will-change:transform,opacity}.fui-date-picker__panel--with-presets{display:flex;align-items:stretch;gap:var(--fui-spacing-2)}.fui-date-picker__presets{list-style:none;margin:0;padding:var(--fui-spacing-1);display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--fui-border-default);padding-right:var(--fui-spacing-2);min-width:9rem}.fui-date-picker__preset-item{margin:0;padding:0}.fui-date-picker__preset-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__preset-btn{width:100%;text-align:left;padding:var(--fui-spacing-2) var(--fui-spacing-4);border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-primary);cursor:pointer;transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-date-picker__preset-btn:hover{background-color:var(--fui-bg-subtle)}.fui-date-picker__preset-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-date-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiCalendarComponent, selector: "fui-calendar", inputs: ["selected", "rangeStart", "rangeEnd", "range", "min", "max", "dateFilter", "startAt", "firstDayOfWeek", "hoveredDate"], outputs: ["dateSelected", "dateHovered", "monthChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fui-date-picker', standalone: true, imports: [FuiIconComponent, FuiCalendarComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'fui-date-picker', standalone: true, imports: [FuiInputDirective, FuiIconComponent, FuiCalendarComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: FuiPopupOverlayDirective,
+                            inputs: ['positions', 'panelClass', 'backdropClass', 'scrollStrategy', 'minWidthFromTrigger'],
+                            outputs: ['openedChange', 'escapeKey'],
+                        },
+                        FuiFormControlSyncDirective,
+                    ], host: {
                         class: 'fui-date-picker',
                         '[attr.id]': 'id',
                         '[class.fui-date-picker--open]': 'panelOpen()',
@@ -1336,7 +1409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.fui-date-picker--range]': 'range()',
                         '[class.fui-date-picker--focused]': 'focused()',
                         '[class.fui-date-picker--error]': 'errorState()',
-                        '[class.fui-date-picker--readonly]': '_readOnly()',
+                        '[class.fui-date-picker--readonly]': 'readonly()',
                     }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -1352,19 +1425,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                             provide: FUI_FORM_FIELD_CONTROL,
                             useExisting: FuiDatePickerComponent,
                         },
-                    ], template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n  <!-- Start input -->\r\n  <input\r\n    #startInput\r\n    class=\"fui-date-picker__input\"\r\n    [id]=\"id\"\r\n    [value]=\"startInputText()\"\r\n    [placeholder]=\"getStartPlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    aria-haspopup=\"dialog\"\r\n    aria-autocomplete=\"none\"\r\n    role=\"combobox\"\r\n    inputmode=\"numeric\"\r\n    autocomplete=\"off\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n    (focus)=\"onInputFocus()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  />\r\n\r\n  <!-- Range separator + end input -->\r\n  @if (range()) {\r\n    <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n    <input\r\n      #endInput\r\n      class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n      [value]=\"endInputText()\"\r\n      [placeholder]=\"getEndPlaceholder()\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n      [attr.aria-invalid]=\"errorState()\"\r\n      inputmode=\"numeric\"\r\n      autocomplete=\"off\"\r\n      (input)=\"onEndInput($event)\"\r\n      (blur)=\"onEndBlur()\"\r\n      (focus)=\"onInputFocus()\"\r\n      (keydown)=\"onEndKeydown($event)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    />\r\n  }\r\n\r\n  <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-date-picker__toggle\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-expanded]=\"panelOpen()\"\r\n      [disabled]=\"disabled()\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\r\n      <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n  <div\r\n    #calendarPanel\r\n    class=\"fui-date-picker__panel\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n  >\r\n    <fui-calendar\r\n      #calendar\r\n      [selected]=\"selectedDate()\"\r\n      [rangeStart]=\"rangeStartDate()\"\r\n      [rangeEnd]=\"rangeEndDate()\"\r\n      [range]=\"range()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [dateFilter]=\"dateFilter()\"\r\n      [startAt]=\"startAt()\"\r\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n      [hoveredDate]=\"hoveredDate()\"\r\n      (dateSelected)=\"onDateSelected($event)\"\r\n      (dateHovered)=\"onDateHovered($event)\"\r\n    />\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}.fui-date-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], triggerEl: [{
+                    ], template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n  <!-- Start input -->\r\n  <input\r\n    #startInput\r\n    fuiInput\r\n    class=\"fui-date-picker__input\"\r\n    [id]=\"id\"\r\n    [value]=\"startInputText()\"\r\n    [placeholder]=\"getStartPlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    aria-haspopup=\"dialog\"\r\n    aria-autocomplete=\"none\"\r\n    role=\"combobox\"\r\n    inputmode=\"numeric\"\r\n    autocomplete=\"off\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n    (focus)=\"onInputFocus()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  />\r\n\r\n  <!-- Range separator + end input -->\r\n  @if (range()) {\r\n    <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n    <input\r\n      #endInput\r\n      fuiInput\r\n      class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n      [value]=\"endInputText()\"\r\n      [placeholder]=\"getEndPlaceholder()\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n      inputmode=\"numeric\"\r\n      autocomplete=\"off\"\r\n      (input)=\"onEndInput($event)\"\r\n      (blur)=\"onEndBlur()\"\r\n      (focus)=\"onInputFocus()\"\r\n      (keydown)=\"onEndKeydown($event)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    />\r\n  }\r\n\r\n  <!-- Calendar toggle button \u2014 hidden when disabled or readOnly -->\r\n  @if (!disabled() && !readonly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-date-picker__toggle\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-expanded]=\"panelOpen()\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\r\n      <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Calendar panel (always rendered; hidden when closed so #calendarPanel ViewChild is always available) -->\r\n<div\r\n  #calendarPanel\r\n  [hidden]=\"!panelOpen()\"\r\n  class=\"fui-date-picker__panel\"\r\n  [class.fui-date-picker__panel--with-presets]=\"presets().length > 0\"\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n>\r\n  @if (presets().length > 0) {\r\n    <ul class=\"fui-date-picker__presets\" role=\"listbox\" [attr.aria-label]=\"intl.presetsAriaLabel\">\r\n      @for (preset of presets(); track preset.label) {\r\n        <li role=\"option\" class=\"fui-date-picker__preset-item\">\r\n          <button type=\"button\" class=\"fui-date-picker__preset-btn\" (click)=\"_onPresetClick(preset)\">\r\n            {{ preset.label }}\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n  <fui-calendar\r\n    #calendar\r\n    [selected]=\"selectedDate()\"\r\n    [rangeStart]=\"rangeStartDate()\"\r\n    [rangeEnd]=\"rangeEndDate()\"\r\n    [range]=\"range()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [dateFilter]=\"dateFilter()\"\r\n    [startAt]=\"startAt()\"\r\n    [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n    [hoveredDate]=\"hoveredDate()\"\r\n    (dateSelected)=\"onDateSelected($event)\"\r\n    (dateHovered)=\"onDateHovered($event)\"\r\n  />\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-date-picker{--fui-date-picker-font-size: var(--fui-text-base);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-1);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-text-base);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker .fui-date-picker__panel{display:none}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-lg);--fui-date-picker-panel-bg: var(--fui-bg-default);--fui-date-picker-panel-border-color: var(--fui-border-default);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-2);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-base) var(--fui-ease-out) both;will-change:transform,opacity}.fui-date-picker__panel--with-presets{display:flex;align-items:stretch;gap:var(--fui-spacing-2)}.fui-date-picker__presets{list-style:none;margin:0;padding:var(--fui-spacing-1);display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--fui-border-default);padding-right:var(--fui-spacing-2);min-width:9rem}.fui-date-picker__preset-item{margin:0;padding:0}.fui-date-picker__preset-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__preset-btn{width:100%;text-align:left;padding:var(--fui-spacing-2) var(--fui-spacing-4);border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-primary);cursor:pointer;transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-date-picker__preset-btn:hover{background-color:var(--fui-bg-subtle)}.fui-date-picker__preset-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-date-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], triggerEl: [{
                 type: ViewChild,
-                args: ['triggerEl', { static: false }]
+                args: ['triggerEl', { static: true }]
             }], calendarPanel: [{
                 type: ViewChild,
-                args: ['calendarPanel', { static: false }]
+                args: ['calendarPanel', { static: true }]
             }], startInputEl: [{
                 type: ViewChild,
-                args: ['startInput', { static: false }]
+                args: ['startInput', { static: true }]
             }], endInputEl: [{
                 type: ViewChild,
                 args: ['endInput', { static: false }]
+            }], _fuiStartInput: [{
+                type: ViewChild,
+                args: ['startInput', { static: true, read: FuiInputDirective }]
+            }], _fuiEndInput: [{
+                type: ViewChild,
+                args: ['endInput', { static: false, read: FuiInputDirective }]
             }], calendarComponent: [{
                 type: ViewChild,
                 args: ['calendar', { static: false }]
@@ -1374,5 +1453,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_DATE_FORMAT, FuiCalendarComponent, FuiCalendarIntl, FuiDatePickerComponent, FuiDatePickerIntl, RANGE_SEPARATOR, applyDateMask, buildCalendarGrid, formatDate, getDaysInMonth, getMonthLabel, getShortMonthName, getWeekdayLabels, isAfter, isBefore, isBetween, isDateInRange, isSameDay, normalizeDate, parseDate };
+export { DEFAULT_DATE_FORMAT, FuiCalendarComponent, FuiCalendarIntl, FuiDatePickerComponent, FuiDatePickerIntl, RANGE_SEPARATOR, applyDateMask, buildCalendarGrid, buildDefaultDateRangePresets, formatDate, getDaysInMonth, getMonthLabel, getShortMonthName, getWeekdayLabels, isAfter, isBefore, isBetween, isDateInRange, isSameDay, normalizeDate, parseDate };
 //# sourceMappingURL=raintonic-formaui-components-date-picker.mjs.map