@raintonic/formaui 0.9.0 → 0.9.3

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

@@ -793,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 $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 });
+    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-primary-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-primary-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-primary-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,
@@ -802,7 +802,7 @@ 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 $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"] }]
+                    }, 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-primary-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-primary-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-primary-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 {
@@ -1390,7 +1390,7 @@ class FuiDatePickerComponent {
                 provide: FUI_FORM_FIELD_CONTROL,
                 useExisting: FuiDatePickerComponent,
             },
-        ], 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 });
+        ], 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:var(--fui-border-width-sm) 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:var(--fui-border-width-sm) 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,
@@ -1425,7 +1425,7 @@ 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    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"] }]
+                    ], 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:var(--fui-border-width-sm) 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:var(--fui-border-width-sm) 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: true }]