@raintonic/formaui 0.2.1 → 0.3.0

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

@@ -1,14 +1,33 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, inject, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgZone, effect, ViewChild } from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, signal, input, output, computed, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgZone, effect, ViewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgForm, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { DOCUMENT } from '@angular/common';
 import { Subject, Subscription, fromEvent } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
-import { DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
+import { FuiIntlBase, DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
 import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
 
+class FuiCalendarIntl extends FuiIntlBase {
+    rootAriaLabel = 'Calendar';
+    prevMonthLabel = 'Previous month';
+    prevYearLabel = 'Previous year';
+    prevDecadeLabel = 'Previous decade';
+    nextMonthLabel = 'Next month';
+    nextYearLabel = 'Next year';
+    nextDecadeLabel = 'Next decade';
+    switchToMonthViewLabel = 'Switch to month view';
+    switchToYearViewLabel = 'Switch to year view';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCalendarIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCalendarIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCalendarIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Normalize a date to noon to avoid DST edge cases.
  */
@@ -254,6 +273,10 @@ function isBetween(date, start, end) {
  * </fui-calendar>
  */
 class FuiCalendarComponent {
+    intl = inject(FuiCalendarIntl);
+    _cdr = inject(ChangeDetectorRef);
+    /** @internal — bumped when Intl mutates so computeds that read plain intl fields reinvoke. */
+    _intlTick = signal(0, ...(ngDevMode ? [{ debugName: "_intlTick" }] : /* istanbul ignore next */ []));
     // Inputs
     selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     rangeStart = input(null, ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
@@ -291,31 +314,34 @@ class FuiCalendarComponent {
     }, ...(ngDevMode ? [{ debugName: "decadeLabel" }] : /* istanbul ignore next */ []));
     // Accessible navigation button labels
     prevButtonLabel = computed(() => {
+        this._intlTick();
         switch (this.currentView()) {
             case 'days':
-                return 'Previous month';
+                return this.intl.prevMonthLabel;
             case 'months':
-                return 'Previous year';
+                return this.intl.prevYearLabel;
             case 'years':
-                return 'Previous decade';
+                return this.intl.prevDecadeLabel;
         }
     }, ...(ngDevMode ? [{ debugName: "prevButtonLabel" }] : /* istanbul ignore next */ []));
     nextButtonLabel = computed(() => {
+        this._intlTick();
         switch (this.currentView()) {
             case 'days':
-                return 'Next month';
+                return this.intl.nextMonthLabel;
             case 'months':
-                return 'Next year';
+                return this.intl.nextYearLabel;
             case 'years':
-                return 'Next decade';
+                return this.intl.nextDecadeLabel;
         }
     }, ...(ngDevMode ? [{ debugName: "nextButtonLabel" }] : /* istanbul ignore next */ []));
     headerButtonLabel = computed(() => {
+        this._intlTick();
         switch (this.currentView()) {
             case 'days':
-                return 'Switch to month view';
+                return this.intl.switchToMonthViewLabel;
             case 'months':
-                return 'Switch to year view';
+                return this.intl.switchToYearViewLabel;
             case 'years':
                 return this.decadeLabel();
         }
@@ -415,6 +441,10 @@ class FuiCalendarComponent {
     }, ...(ngDevMode ? [{ debugName: "yearsGrid" }] : /* istanbul ignore next */ []));
     _elementRef = inject(ElementRef);
     constructor() {
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+            this._intlTick.update((v) => v + 1);
+            this._cdr.markForCheck();
+        });
         // Initialize viewDate from startAt or selected or now
         const initial = this.startAt() ?? this.selected() ?? new Date();
         this.viewDate.set(normalizeDate(initial));
@@ -679,7 +709,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", "aria-label": "Calendar" }, classAttribute: "fui-calendar" }, ngImport: i0, template: "<!-- Calendar Header -->\r\n<div class=\"fui-calendar__header\">\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onPrev()\" [attr.aria-label]=\"prevButtonLabel()\">\r\n    <fui-icon name=\"caret-left\" size=\"sm\" />\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-calendar__header-label\"\r\n    (click)=\"onHeaderLabelClick()\"\r\n    [attr.aria-label]=\"headerButtonLabel()\"\r\n  >\r\n    @switch (currentView()) {\r\n      @case ('days') {\r\n        {{ monthYearLabel() }}\r\n      }\r\n      @case ('months') {\r\n        {{ yearLabel() }}\r\n      }\r\n      @case ('years') {\r\n        {{ decadeLabel() }}\r\n      }\r\n    }\r\n  </button>\r\n\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onNext()\" [attr.aria-label]=\"nextButtonLabel()\">\r\n    <fui-icon name=\"caret-right\" size=\"sm\" />\r\n  </button>\r\n</div>\r\n\r\n<!-- Day View -->\r\n@if (currentView() === 'days') {\r\n  <table class=\"fui-calendar__grid\" role=\"grid\" [attr.aria-label]=\"monthYearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    <thead>\r\n      <tr>\r\n        @for (header of weekDayHeaders(); track header) {\r\n          <th class=\"fui-calendar__weekday\" scope=\"col\">{{ header }}</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (week of weeks(); track trackByWeek($index, week)) {\r\n        <tr>\r\n          @for (day of week; track trackByDay($index, day)) {\r\n            <td\r\n              class=\"fui-calendar__cell\"\r\n              [class.--today]=\"day.isToday\"\r\n              [class.--selected]=\"day.isSelected\"\r\n              [class.--outside]=\"!day.isCurrentMonth\"\r\n              [class.--disabled]=\"day.isDisabled\"\r\n              [class.--range-start]=\"day.isRangeStart\"\r\n              [class.--range-end]=\"day.isRangeEnd\"\r\n              [class.--in-range]=\"day.isInRange\"\r\n              [class.--range-preview]=\"day.isRangePreview\"\r\n              role=\"gridcell\"\r\n              [attr.aria-selected]=\"day.isSelected\"\r\n              [attr.aria-disabled]=\"day.isDisabled\"\r\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\r\n              [attr.tabindex]=\"day.isCurrentMonth && !day.isDisabled ? 0 : -1\"\r\n              (click)=\"onDayClick(day)\"\r\n              (mouseenter)=\"onDayMouseEnter(day)\"\r\n              (mouseleave)=\"onDayMouseLeave()\"\r\n            >\r\n              <span class=\"fui-calendar__day\">{{ day.day }}</span>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n\r\n<!-- Month View -->\r\n@if (currentView() === 'months') {\r\n  <div class=\"fui-calendar__months\" role=\"grid\" [attr.aria-label]=\"yearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of monthsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__months-row\" role=\"row\">\r\n        @for (month of row; track trackByMonth($index, month)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__month-cell\"\r\n            [class.--current]=\"month.isCurrentMonth\"\r\n            [class.--selected]=\"month.isSelected\"\r\n            [class.--disabled]=\"month.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"month.isSelected\"\r\n            [attr.aria-disabled]=\"month.isDisabled\"\r\n            [disabled]=\"month.isDisabled\"\r\n            (click)=\"onMonthClick(month)\"\r\n          >\r\n            {{ month.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Year View -->\r\n@if (currentView() === 'years') {\r\n  <div class=\"fui-calendar__years\" role=\"grid\" [attr.aria-label]=\"decadeLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of yearsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__years-row\" role=\"row\">\r\n        @for (year of row; track trackByYear($index, year)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__year-cell\"\r\n            [class.--current]=\"year.isCurrentYear\"\r\n            [class.--selected]=\"year.isSelected\"\r\n            [class.--disabled]=\"year.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"year.isSelected\"\r\n            [attr.aria-disabled]=\"year.isDisabled\"\r\n            [disabled]=\"year.isDisabled\"\r\n            (click)=\"onYearClick(year)\"\r\n          >\r\n            {{ year.year }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Live region for screen readers -->\r\n<div class=\"fui-calendar__announcer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @switch (currentView()) {\r\n    @case ('days') {\r\n      {{ monthYearLabel() }}\r\n    }\r\n    @case ('months') {\r\n      {{ yearLabel() }}\r\n    }\r\n    @case ('years') {\r\n      {{ decadeLabel() }}\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-calendar{display:block;width:280px;-webkit-user-select:none;user-select:none}.fui-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-02) var(--fui-spacing-03)}.fui-calendar__nav-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__nav-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__nav-btn:hover{background-color:var(--fui-surface-02);color:var(--fui-text-primary)}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__header-label{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__header-label{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-primary);padding:var(--fui-spacing-01) var(--fui-spacing-02);border-radius:var(--fui-border-radius-sm);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__header-label:hover{background-color:var(--fui-surface-02)}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__grid{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;padding:0 var(--fui-spacing-02)}.fui-calendar__weekday{font-size:var(--fui-font-size-01);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-secondary);text-align:center;padding-bottom:var(--fui-spacing-01);height:2rem;vertical-align:middle}.fui-calendar__cell{text-align:center;padding:1px;cursor:pointer;position:relative;outline:none}.fui-calendar__cell:focus-visible .fui-calendar__day{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__cell.--disabled{cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day:hover{background-color:transparent}.fui-calendar__cell.--outside .fui-calendar__day{color:var(--fui-text-disabled);opacity:.4}.fui-calendar__cell.--today .fui-calendar__day{position:relative;font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--today .fui-calendar__day:after{content:\"\";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:var(--fui-primary)}.fui-calendar__cell.--selected .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--selected .fui-calendar__day:after{display:none}.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--range-start{background:linear-gradient(to right,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-end{background:linear-gradient(to left,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-start.--range-end{background:transparent}.fui-calendar__cell.--in-range{background-color:var(--fui-primary-10)}.fui-calendar__cell.--in-range .fui-calendar__day{color:var(--fui-primary);font-weight:var(--fui-font-weight-medium)}.fui-calendar__cell.--range-preview{background-color:var(--fui-primary-10);opacity:.5}.fui-calendar__cell.--range-preview .fui-calendar__day{color:var(--fui-primary)}.fui-calendar__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;font-size:var(--fui-font-size-01);color:var(--fui-text-primary);margin:0 auto;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__day:hover{background-color:var(--fui-surface-02)}.fui-calendar__months,.fui-calendar__years{padding:var(--fui-spacing-03)}.fui-calendar__months-row,.fui-calendar__years-row{display:flex;justify-content:space-around;margin-bottom:var(--fui-spacing-02)}.fui-calendar__months-row:last-child,.fui-calendar__years-row:last-child{margin-bottom:0}.fui-calendar__month-cell,.fui-calendar__year-cell{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__month-cell,.fui-calendar__year-cell{display:flex;align-items:center;justify-content:center;width:5rem;height:2.5rem;border-radius:var(--fui-border-radius-md);font-size:var(--fui-font-size-01);color:var(--fui-text-primary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__month-cell:hover:not(:disabled),.fui-calendar__year-cell:hover:not(:disabled){background-color:var(--fui-surface-02)}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__month-cell.--current,.fui-calendar__year-cell.--current{font-weight:var(--fui-font-weight-semibold);color:var(--fui-primary)}.fui-calendar__month-cell.--selected,.fui-calendar__year-cell.--selected{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__month-cell.--disabled,.fui-calendar__year-cell.--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__announcer{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(prefers-contrast:high){.fui-calendar__cell.--selected .fui-calendar__day,.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{outline:2px solid}}@media(prefers-reduced-motion:reduce){.fui-calendar__day,.fui-calendar__nav-btn,.fui-calendar__header-label,.fui-calendar__month-cell,.fui-calendar__year-cell{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiCalendarComponent, isStandalone: true, selector: "fui-calendar", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", dateHovered: "dateHovered", monthChanged: "monthChanged" }, host: { attributes: { "tabindex": "0", "role": "application" }, properties: { "attr.aria-label": "intl.rootAriaLabel" }, classAttribute: "fui-calendar" }, ngImport: i0, template: "<!-- Calendar Header -->\r\n<div class=\"fui-calendar__header\">\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onPrev()\" [attr.aria-label]=\"prevButtonLabel()\">\r\n    <fui-icon name=\"caret-left\" size=\"sm\" />\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-calendar__header-label\"\r\n    (click)=\"onHeaderLabelClick()\"\r\n    [attr.aria-label]=\"headerButtonLabel()\"\r\n  >\r\n    @switch (currentView()) {\r\n      @case ('days') {\r\n        {{ monthYearLabel() }}\r\n      }\r\n      @case ('months') {\r\n        {{ yearLabel() }}\r\n      }\r\n      @case ('years') {\r\n        {{ decadeLabel() }}\r\n      }\r\n    }\r\n  </button>\r\n\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onNext()\" [attr.aria-label]=\"nextButtonLabel()\">\r\n    <fui-icon name=\"caret-right\" size=\"sm\" />\r\n  </button>\r\n</div>\r\n\r\n<!-- Day View -->\r\n@if (currentView() === 'days') {\r\n  <table class=\"fui-calendar__grid\" role=\"grid\" [attr.aria-label]=\"monthYearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    <thead>\r\n      <tr>\r\n        @for (header of weekDayHeaders(); track header) {\r\n          <th class=\"fui-calendar__weekday\" scope=\"col\">{{ header }}</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (week of weeks(); track trackByWeek($index, week)) {\r\n        <tr>\r\n          @for (day of week; track trackByDay($index, day)) {\r\n            <td\r\n              class=\"fui-calendar__cell\"\r\n              [class.--today]=\"day.isToday\"\r\n              [class.--selected]=\"day.isSelected\"\r\n              [class.--outside]=\"!day.isCurrentMonth\"\r\n              [class.--disabled]=\"day.isDisabled\"\r\n              [class.--range-start]=\"day.isRangeStart\"\r\n              [class.--range-end]=\"day.isRangeEnd\"\r\n              [class.--in-range]=\"day.isInRange\"\r\n              [class.--range-preview]=\"day.isRangePreview\"\r\n              role=\"gridcell\"\r\n              [attr.aria-selected]=\"day.isSelected\"\r\n              [attr.aria-disabled]=\"day.isDisabled\"\r\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\r\n              [attr.tabindex]=\"day.isCurrentMonth && !day.isDisabled ? 0 : -1\"\r\n              (click)=\"onDayClick(day)\"\r\n              (mouseenter)=\"onDayMouseEnter(day)\"\r\n              (mouseleave)=\"onDayMouseLeave()\"\r\n            >\r\n              <span class=\"fui-calendar__day\">{{ day.day }}</span>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n\r\n<!-- Month View -->\r\n@if (currentView() === 'months') {\r\n  <div class=\"fui-calendar__months\" role=\"grid\" [attr.aria-label]=\"yearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of monthsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__months-row\" role=\"row\">\r\n        @for (month of row; track trackByMonth($index, month)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__month-cell\"\r\n            [class.--current]=\"month.isCurrentMonth\"\r\n            [class.--selected]=\"month.isSelected\"\r\n            [class.--disabled]=\"month.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"month.isSelected\"\r\n            [attr.aria-disabled]=\"month.isDisabled\"\r\n            [disabled]=\"month.isDisabled\"\r\n            (click)=\"onMonthClick(month)\"\r\n          >\r\n            {{ month.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Year View -->\r\n@if (currentView() === 'years') {\r\n  <div class=\"fui-calendar__years\" role=\"grid\" [attr.aria-label]=\"decadeLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of yearsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__years-row\" role=\"row\">\r\n        @for (year of row; track trackByYear($index, year)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__year-cell\"\r\n            [class.--current]=\"year.isCurrentYear\"\r\n            [class.--selected]=\"year.isSelected\"\r\n            [class.--disabled]=\"year.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"year.isSelected\"\r\n            [attr.aria-disabled]=\"year.isDisabled\"\r\n            [disabled]=\"year.isDisabled\"\r\n            (click)=\"onYearClick(year)\"\r\n          >\r\n            {{ year.year }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Live region for screen readers -->\r\n<div class=\"fui-calendar__announcer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @switch (currentView()) {\r\n    @case ('days') {\r\n      {{ monthYearLabel() }}\r\n    }\r\n    @case ('months') {\r\n      {{ yearLabel() }}\r\n    }\r\n    @case ('years') {\r\n      {{ decadeLabel() }}\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-calendar{display:block;width:280px;-webkit-user-select:none;user-select:none}.fui-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-02) var(--fui-spacing-03)}.fui-calendar__nav-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__nav-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__nav-btn:hover{background-color:var(--fui-surface-02);color:var(--fui-text-primary)}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__header-label{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__header-label{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-primary);padding:var(--fui-spacing-01) var(--fui-spacing-02);border-radius:var(--fui-border-radius-sm);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__header-label:hover{background-color:var(--fui-surface-02)}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__grid{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;padding:0 var(--fui-spacing-02)}.fui-calendar__weekday{font-size:var(--fui-font-size-01);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-secondary);text-align:center;padding-bottom:var(--fui-spacing-01);height:2rem;vertical-align:middle}.fui-calendar__cell{text-align:center;padding:1px;cursor:pointer;position:relative;outline:none}.fui-calendar__cell:focus-visible .fui-calendar__day{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__cell.--disabled{cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day:hover{background-color:transparent}.fui-calendar__cell.--outside .fui-calendar__day{color:var(--fui-text-disabled);opacity:.4}.fui-calendar__cell.--today .fui-calendar__day{position:relative;font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--today .fui-calendar__day:after{content:\"\";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:var(--fui-primary)}.fui-calendar__cell.--selected .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--selected .fui-calendar__day:after{display:none}.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--range-start{background:linear-gradient(to right,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-end{background:linear-gradient(to left,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-start.--range-end{background:transparent}.fui-calendar__cell.--in-range{background-color:var(--fui-primary-10)}.fui-calendar__cell.--in-range .fui-calendar__day{color:var(--fui-primary);font-weight:var(--fui-font-weight-medium)}.fui-calendar__cell.--range-preview{background-color:var(--fui-primary-10);opacity:.5}.fui-calendar__cell.--range-preview .fui-calendar__day{color:var(--fui-primary)}.fui-calendar__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;font-size:var(--fui-font-size-01);color:var(--fui-text-primary);margin:0 auto;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__day:hover{background-color:var(--fui-surface-02)}.fui-calendar__months,.fui-calendar__years{padding:var(--fui-spacing-03)}.fui-calendar__months-row,.fui-calendar__years-row{display:flex;justify-content:space-around;margin-bottom:var(--fui-spacing-02)}.fui-calendar__months-row:last-child,.fui-calendar__years-row:last-child{margin-bottom:0}.fui-calendar__month-cell,.fui-calendar__year-cell{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__month-cell,.fui-calendar__year-cell{display:flex;align-items:center;justify-content:center;width:5rem;height:2.5rem;border-radius:var(--fui-border-radius-md);font-size:var(--fui-font-size-01);color:var(--fui-text-primary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__month-cell:hover:not(:disabled),.fui-calendar__year-cell:hover:not(:disabled){background-color:var(--fui-surface-02)}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__month-cell.--current,.fui-calendar__year-cell.--current{font-weight:var(--fui-font-weight-semibold);color:var(--fui-primary)}.fui-calendar__month-cell.--selected,.fui-calendar__year-cell.--selected{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__month-cell.--disabled,.fui-calendar__year-cell.--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__announcer{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(prefers-contrast:high){.fui-calendar__cell.--selected .fui-calendar__day,.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{outline:2px solid}}@media(prefers-reduced-motion:reduce){.fui-calendar__day,.fui-calendar__nav-btn,.fui-calendar__header-label,.fui-calendar__month-cell,.fui-calendar__year-cell{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCalendarComponent, decorators: [{
             type: Component,
@@ -687,10 +717,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         class: 'fui-calendar',
                         tabindex: '0',
                         role: 'application',
-                        'aria-label': 'Calendar',
-                    }, template: "<!-- Calendar Header -->\r\n<div class=\"fui-calendar__header\">\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onPrev()\" [attr.aria-label]=\"prevButtonLabel()\">\r\n    <fui-icon name=\"caret-left\" size=\"sm\" />\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-calendar__header-label\"\r\n    (click)=\"onHeaderLabelClick()\"\r\n    [attr.aria-label]=\"headerButtonLabel()\"\r\n  >\r\n    @switch (currentView()) {\r\n      @case ('days') {\r\n        {{ monthYearLabel() }}\r\n      }\r\n      @case ('months') {\r\n        {{ yearLabel() }}\r\n      }\r\n      @case ('years') {\r\n        {{ decadeLabel() }}\r\n      }\r\n    }\r\n  </button>\r\n\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onNext()\" [attr.aria-label]=\"nextButtonLabel()\">\r\n    <fui-icon name=\"caret-right\" size=\"sm\" />\r\n  </button>\r\n</div>\r\n\r\n<!-- Day View -->\r\n@if (currentView() === 'days') {\r\n  <table class=\"fui-calendar__grid\" role=\"grid\" [attr.aria-label]=\"monthYearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    <thead>\r\n      <tr>\r\n        @for (header of weekDayHeaders(); track header) {\r\n          <th class=\"fui-calendar__weekday\" scope=\"col\">{{ header }}</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (week of weeks(); track trackByWeek($index, week)) {\r\n        <tr>\r\n          @for (day of week; track trackByDay($index, day)) {\r\n            <td\r\n              class=\"fui-calendar__cell\"\r\n              [class.--today]=\"day.isToday\"\r\n              [class.--selected]=\"day.isSelected\"\r\n              [class.--outside]=\"!day.isCurrentMonth\"\r\n              [class.--disabled]=\"day.isDisabled\"\r\n              [class.--range-start]=\"day.isRangeStart\"\r\n              [class.--range-end]=\"day.isRangeEnd\"\r\n              [class.--in-range]=\"day.isInRange\"\r\n              [class.--range-preview]=\"day.isRangePreview\"\r\n              role=\"gridcell\"\r\n              [attr.aria-selected]=\"day.isSelected\"\r\n              [attr.aria-disabled]=\"day.isDisabled\"\r\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\r\n              [attr.tabindex]=\"day.isCurrentMonth && !day.isDisabled ? 0 : -1\"\r\n              (click)=\"onDayClick(day)\"\r\n              (mouseenter)=\"onDayMouseEnter(day)\"\r\n              (mouseleave)=\"onDayMouseLeave()\"\r\n            >\r\n              <span class=\"fui-calendar__day\">{{ day.day }}</span>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n\r\n<!-- Month View -->\r\n@if (currentView() === 'months') {\r\n  <div class=\"fui-calendar__months\" role=\"grid\" [attr.aria-label]=\"yearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of monthsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__months-row\" role=\"row\">\r\n        @for (month of row; track trackByMonth($index, month)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__month-cell\"\r\n            [class.--current]=\"month.isCurrentMonth\"\r\n            [class.--selected]=\"month.isSelected\"\r\n            [class.--disabled]=\"month.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"month.isSelected\"\r\n            [attr.aria-disabled]=\"month.isDisabled\"\r\n            [disabled]=\"month.isDisabled\"\r\n            (click)=\"onMonthClick(month)\"\r\n          >\r\n            {{ month.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Year View -->\r\n@if (currentView() === 'years') {\r\n  <div class=\"fui-calendar__years\" role=\"grid\" [attr.aria-label]=\"decadeLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of yearsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__years-row\" role=\"row\">\r\n        @for (year of row; track trackByYear($index, year)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__year-cell\"\r\n            [class.--current]=\"year.isCurrentYear\"\r\n            [class.--selected]=\"year.isSelected\"\r\n            [class.--disabled]=\"year.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"year.isSelected\"\r\n            [attr.aria-disabled]=\"year.isDisabled\"\r\n            [disabled]=\"year.isDisabled\"\r\n            (click)=\"onYearClick(year)\"\r\n          >\r\n            {{ year.year }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Live region for screen readers -->\r\n<div class=\"fui-calendar__announcer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @switch (currentView()) {\r\n    @case ('days') {\r\n      {{ monthYearLabel() }}\r\n    }\r\n    @case ('months') {\r\n      {{ yearLabel() }}\r\n    }\r\n    @case ('years') {\r\n      {{ decadeLabel() }}\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-calendar{display:block;width:280px;-webkit-user-select:none;user-select:none}.fui-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-02) var(--fui-spacing-03)}.fui-calendar__nav-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__nav-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__nav-btn:hover{background-color:var(--fui-surface-02);color:var(--fui-text-primary)}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__header-label{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__header-label{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-primary);padding:var(--fui-spacing-01) var(--fui-spacing-02);border-radius:var(--fui-border-radius-sm);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__header-label:hover{background-color:var(--fui-surface-02)}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__grid{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;padding:0 var(--fui-spacing-02)}.fui-calendar__weekday{font-size:var(--fui-font-size-01);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-secondary);text-align:center;padding-bottom:var(--fui-spacing-01);height:2rem;vertical-align:middle}.fui-calendar__cell{text-align:center;padding:1px;cursor:pointer;position:relative;outline:none}.fui-calendar__cell:focus-visible .fui-calendar__day{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__cell.--disabled{cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day:hover{background-color:transparent}.fui-calendar__cell.--outside .fui-calendar__day{color:var(--fui-text-disabled);opacity:.4}.fui-calendar__cell.--today .fui-calendar__day{position:relative;font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--today .fui-calendar__day:after{content:\"\";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:var(--fui-primary)}.fui-calendar__cell.--selected .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--selected .fui-calendar__day:after{display:none}.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--range-start{background:linear-gradient(to right,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-end{background:linear-gradient(to left,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-start.--range-end{background:transparent}.fui-calendar__cell.--in-range{background-color:var(--fui-primary-10)}.fui-calendar__cell.--in-range .fui-calendar__day{color:var(--fui-primary);font-weight:var(--fui-font-weight-medium)}.fui-calendar__cell.--range-preview{background-color:var(--fui-primary-10);opacity:.5}.fui-calendar__cell.--range-preview .fui-calendar__day{color:var(--fui-primary)}.fui-calendar__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;font-size:var(--fui-font-size-01);color:var(--fui-text-primary);margin:0 auto;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__day:hover{background-color:var(--fui-surface-02)}.fui-calendar__months,.fui-calendar__years{padding:var(--fui-spacing-03)}.fui-calendar__months-row,.fui-calendar__years-row{display:flex;justify-content:space-around;margin-bottom:var(--fui-spacing-02)}.fui-calendar__months-row:last-child,.fui-calendar__years-row:last-child{margin-bottom:0}.fui-calendar__month-cell,.fui-calendar__year-cell{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__month-cell,.fui-calendar__year-cell{display:flex;align-items:center;justify-content:center;width:5rem;height:2.5rem;border-radius:var(--fui-border-radius-md);font-size:var(--fui-font-size-01);color:var(--fui-text-primary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__month-cell:hover:not(:disabled),.fui-calendar__year-cell:hover:not(:disabled){background-color:var(--fui-surface-02)}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__month-cell.--current,.fui-calendar__year-cell.--current{font-weight:var(--fui-font-weight-semibold);color:var(--fui-primary)}.fui-calendar__month-cell.--selected,.fui-calendar__year-cell.--selected{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__month-cell.--disabled,.fui-calendar__year-cell.--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__announcer{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(prefers-contrast:high){.fui-calendar__cell.--selected .fui-calendar__day,.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{outline:2px solid}}@media(prefers-reduced-motion:reduce){.fui-calendar__day,.fui-calendar__nav-btn,.fui-calendar__header-label,.fui-calendar__month-cell,.fui-calendar__year-cell{transition:none}}\n"] }]
+                        '[attr.aria-label]': 'intl.rootAriaLabel',
+                    }, template: "<!-- Calendar Header -->\r\n<div class=\"fui-calendar__header\">\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onPrev()\" [attr.aria-label]=\"prevButtonLabel()\">\r\n    <fui-icon name=\"caret-left\" size=\"sm\" />\r\n  </button>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-calendar__header-label\"\r\n    (click)=\"onHeaderLabelClick()\"\r\n    [attr.aria-label]=\"headerButtonLabel()\"\r\n  >\r\n    @switch (currentView()) {\r\n      @case ('days') {\r\n        {{ monthYearLabel() }}\r\n      }\r\n      @case ('months') {\r\n        {{ yearLabel() }}\r\n      }\r\n      @case ('years') {\r\n        {{ decadeLabel() }}\r\n      }\r\n    }\r\n  </button>\r\n\r\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onNext()\" [attr.aria-label]=\"nextButtonLabel()\">\r\n    <fui-icon name=\"caret-right\" size=\"sm\" />\r\n  </button>\r\n</div>\r\n\r\n<!-- Day View -->\r\n@if (currentView() === 'days') {\r\n  <table class=\"fui-calendar__grid\" role=\"grid\" [attr.aria-label]=\"monthYearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    <thead>\r\n      <tr>\r\n        @for (header of weekDayHeaders(); track header) {\r\n          <th class=\"fui-calendar__weekday\" scope=\"col\">{{ header }}</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (week of weeks(); track trackByWeek($index, week)) {\r\n        <tr>\r\n          @for (day of week; track trackByDay($index, day)) {\r\n            <td\r\n              class=\"fui-calendar__cell\"\r\n              [class.--today]=\"day.isToday\"\r\n              [class.--selected]=\"day.isSelected\"\r\n              [class.--outside]=\"!day.isCurrentMonth\"\r\n              [class.--disabled]=\"day.isDisabled\"\r\n              [class.--range-start]=\"day.isRangeStart\"\r\n              [class.--range-end]=\"day.isRangeEnd\"\r\n              [class.--in-range]=\"day.isInRange\"\r\n              [class.--range-preview]=\"day.isRangePreview\"\r\n              role=\"gridcell\"\r\n              [attr.aria-selected]=\"day.isSelected\"\r\n              [attr.aria-disabled]=\"day.isDisabled\"\r\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\r\n              [attr.tabindex]=\"day.isCurrentMonth && !day.isDisabled ? 0 : -1\"\r\n              (click)=\"onDayClick(day)\"\r\n              (mouseenter)=\"onDayMouseEnter(day)\"\r\n              (mouseleave)=\"onDayMouseLeave()\"\r\n            >\r\n              <span class=\"fui-calendar__day\">{{ day.day }}</span>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n\r\n<!-- Month View -->\r\n@if (currentView() === 'months') {\r\n  <div class=\"fui-calendar__months\" role=\"grid\" [attr.aria-label]=\"yearLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of monthsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__months-row\" role=\"row\">\r\n        @for (month of row; track trackByMonth($index, month)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__month-cell\"\r\n            [class.--current]=\"month.isCurrentMonth\"\r\n            [class.--selected]=\"month.isSelected\"\r\n            [class.--disabled]=\"month.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"month.isSelected\"\r\n            [attr.aria-disabled]=\"month.isDisabled\"\r\n            [disabled]=\"month.isDisabled\"\r\n            (click)=\"onMonthClick(month)\"\r\n          >\r\n            {{ month.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Year View -->\r\n@if (currentView() === 'years') {\r\n  <div class=\"fui-calendar__years\" role=\"grid\" [attr.aria-label]=\"decadeLabel()\" (keydown)=\"onKeydown($event)\">\r\n    @for (row of yearsGrid(); track trackByRow($index)) {\r\n      <div class=\"fui-calendar__years-row\" role=\"row\">\r\n        @for (year of row; track trackByYear($index, year)) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-calendar__year-cell\"\r\n            [class.--current]=\"year.isCurrentYear\"\r\n            [class.--selected]=\"year.isSelected\"\r\n            [class.--disabled]=\"year.isDisabled\"\r\n            role=\"gridcell\"\r\n            [attr.aria-selected]=\"year.isSelected\"\r\n            [attr.aria-disabled]=\"year.isDisabled\"\r\n            [disabled]=\"year.isDisabled\"\r\n            (click)=\"onYearClick(year)\"\r\n          >\r\n            {{ year.year }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Live region for screen readers -->\r\n<div class=\"fui-calendar__announcer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @switch (currentView()) {\r\n    @case ('days') {\r\n      {{ monthYearLabel() }}\r\n    }\r\n    @case ('months') {\r\n      {{ yearLabel() }}\r\n    }\r\n    @case ('years') {\r\n      {{ decadeLabel() }}\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-calendar{display:block;width:280px;-webkit-user-select:none;user-select:none}.fui-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-02) var(--fui-spacing-03)}.fui-calendar__nav-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__nav-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__nav-btn:hover{background-color:var(--fui-surface-02);color:var(--fui-text-primary)}.fui-calendar__nav-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__header-label{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__header-label{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-primary);padding:var(--fui-spacing-01) var(--fui-spacing-02);border-radius:var(--fui-border-radius-sm);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__header-label:hover{background-color:var(--fui-surface-02)}.fui-calendar__header-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__grid{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;padding:0 var(--fui-spacing-02)}.fui-calendar__weekday{font-size:var(--fui-font-size-01);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-secondary);text-align:center;padding-bottom:var(--fui-spacing-01);height:2rem;vertical-align:middle}.fui-calendar__cell{text-align:center;padding:1px;cursor:pointer;position:relative;outline:none}.fui-calendar__cell:focus-visible .fui-calendar__day{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__cell.--disabled{cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__cell.--disabled .fui-calendar__day:hover{background-color:transparent}.fui-calendar__cell.--outside .fui-calendar__day{color:var(--fui-text-disabled);opacity:.4}.fui-calendar__cell.--today .fui-calendar__day{position:relative;font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--today .fui-calendar__day:after{content:\"\";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:var(--fui-primary)}.fui-calendar__cell.--selected .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--selected .fui-calendar__day:after{display:none}.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__cell.--range-start{background:linear-gradient(to right,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-end{background:linear-gradient(to left,transparent 50%,var(--fui-primary-10) 50%)}.fui-calendar__cell.--range-start.--range-end{background:transparent}.fui-calendar__cell.--in-range{background-color:var(--fui-primary-10)}.fui-calendar__cell.--in-range .fui-calendar__day{color:var(--fui-primary);font-weight:var(--fui-font-weight-medium)}.fui-calendar__cell.--range-preview{background-color:var(--fui-primary-10);opacity:.5}.fui-calendar__cell.--range-preview .fui-calendar__day{color:var(--fui-primary)}.fui-calendar__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;font-size:var(--fui-font-size-01);color:var(--fui-text-primary);margin:0 auto;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__day:hover{background-color:var(--fui-surface-02)}.fui-calendar__months,.fui-calendar__years{padding:var(--fui-spacing-03)}.fui-calendar__months-row,.fui-calendar__years-row{display:flex;justify-content:space-around;margin-bottom:var(--fui-spacing-02)}.fui-calendar__months-row:last-child,.fui-calendar__years-row:last-child{margin-bottom:0}.fui-calendar__month-cell,.fui-calendar__year-cell{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-calendar__month-cell,.fui-calendar__year-cell{display:flex;align-items:center;justify-content:center;width:5rem;height:2.5rem;border-radius:var(--fui-border-radius-md);font-size:var(--fui-font-size-01);color:var(--fui-text-primary);transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-calendar__month-cell:hover:not(:disabled),.fui-calendar__year-cell:hover:not(:disabled){background-color:var(--fui-surface-02)}.fui-calendar__month-cell:focus-visible,.fui-calendar__year-cell:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0}.fui-calendar__month-cell.--current,.fui-calendar__year-cell.--current{font-weight:var(--fui-font-weight-semibold);color:var(--fui-primary)}.fui-calendar__month-cell.--selected,.fui-calendar__year-cell.--selected{background-color:var(--fui-primary);color:var(--fui-text-on-primary);font-weight:var(--fui-font-weight-semibold)}.fui-calendar__month-cell.--disabled,.fui-calendar__year-cell.--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-calendar__announcer{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(prefers-contrast:high){.fui-calendar__cell.--selected .fui-calendar__day,.fui-calendar__cell.--range-start .fui-calendar__day,.fui-calendar__cell.--range-end .fui-calendar__day{outline:2px solid}}@media(prefers-reduced-motion:reduce){.fui-calendar__day,.fui-calendar__nav-btn,.fui-calendar__header-label,.fui-calendar__month-cell,.fui-calendar__year-cell{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], hoveredDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoveredDate", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateHovered: [{ type: i0.Output, args: ["dateHovered"] }], monthChanged: [{ type: i0.Output, args: ["monthChanged"] }] } });
 
+class FuiDatePickerIntl extends FuiIntlBase {
+    endDateAriaLabel = 'End date';
+    openCalendarAriaLabel = 'Open calendar';
+    calendarDialogAriaLabel = 'Calendar';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const DEFAULT_DATE_FORMAT = 'dd/MM/yyyy';
 const RANGE_SEPARATOR = ' \u2014 ';
 
@@ -741,6 +783,8 @@ const RANGE_SEPARATOR = ' \u2014 ';
 class FuiDatePickerComponent {
     static nextId = 0;
     controlType = 'fui-date-picker';
+    intl = inject(FuiDatePickerIntl);
+    _cdr = inject(ChangeDetectorRef);
     // Inputs
     placeholderInput = input('', { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
@@ -856,6 +900,9 @@ class FuiDatePickerComponent {
         return this.startInputText() || '';
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     constructor() {
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+            this._cdr.markForCheck();
+        });
         void Promise.resolve().then(() => {
             if (this._ngControlRef.ngControl) {
                 this._ngControlRef.ngControl.valueAccessor = this;
@@ -1277,7 +1324,7 @@ class FuiDatePickerComponent {
                 provide: FUI_FORM_FIELD_CONTROL,
                 useExisting: FuiDatePickerComponent,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true }, { propertyName: "startInputEl", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInputEl", first: true, predicate: ["endInput"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n  <!-- Start input -->\r\n  <input\r\n    #startInput\r\n    class=\"fui-date-picker__input\"\r\n    [id]=\"id\"\r\n    [value]=\"startInputText()\"\r\n    [placeholder]=\"getStartPlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    aria-haspopup=\"dialog\"\r\n    aria-autocomplete=\"none\"\r\n    role=\"combobox\"\r\n    inputmode=\"numeric\"\r\n    autocomplete=\"off\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n    (focus)=\"onInputFocus()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  />\r\n\r\n  <!-- Range separator + end input -->\r\n  @if (range()) {\r\n    <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n    <input\r\n      #endInput\r\n      class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n      [value]=\"endInputText()\"\r\n      [placeholder]=\"getEndPlaceholder()\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [attr.aria-label]=\"'End date'\"\r\n      [attr.aria-invalid]=\"errorState()\"\r\n      inputmode=\"numeric\"\r\n      autocomplete=\"off\"\r\n      (input)=\"onEndInput($event)\"\r\n      (blur)=\"onEndBlur()\"\r\n      (focus)=\"onInputFocus()\"\r\n      (keydown)=\"onEndKeydown($event)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    />\r\n  }\r\n\r\n  <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-date-picker__toggle\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-expanded]=\"panelOpen()\"\r\n      [disabled]=\"disabled()\"\r\n      aria-haspopup=\"dialog\"\r\n      aria-label=\"Open calendar\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\r\n      <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n  <div #calendarPanel class=\"fui-date-picker__panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Calendar\">\r\n    <fui-calendar\r\n      #calendar\r\n      [selected]=\"selectedDate()\"\r\n      [rangeStart]=\"rangeStartDate()\"\r\n      [rangeEnd]=\"rangeEndDate()\"\r\n      [range]=\"range()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [dateFilter]=\"dateFilter()\"\r\n      [startAt]=\"startAt()\"\r\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n      [hoveredDate]=\"hoveredDate()\"\r\n      (dateSelected)=\"onDateSelected($event)\"\r\n      (dateHovered)=\"onDateHovered($event)\"\r\n    />\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-03);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker__panel{background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker-backdrop{background:transparent}.fui-date-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiCalendarComponent, selector: "fui-calendar", inputs: ["selected", "rangeStart", "rangeEnd", "range", "min", "max", "dateFilter", "startAt", "firstDayOfWeek", "hoveredDate"], outputs: ["dateSelected", "dateHovered", "monthChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true }, { propertyName: "startInputEl", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInputEl", first: true, predicate: ["endInput"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n  <!-- Start input -->\r\n  <input\r\n    #startInput\r\n    class=\"fui-date-picker__input\"\r\n    [id]=\"id\"\r\n    [value]=\"startInputText()\"\r\n    [placeholder]=\"getStartPlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    aria-haspopup=\"dialog\"\r\n    aria-autocomplete=\"none\"\r\n    role=\"combobox\"\r\n    inputmode=\"numeric\"\r\n    autocomplete=\"off\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n    (focus)=\"onInputFocus()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  />\r\n\r\n  <!-- Range separator + end input -->\r\n  @if (range()) {\r\n    <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n    <input\r\n      #endInput\r\n      class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n      [value]=\"endInputText()\"\r\n      [placeholder]=\"getEndPlaceholder()\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n      [attr.aria-invalid]=\"errorState()\"\r\n      inputmode=\"numeric\"\r\n      autocomplete=\"off\"\r\n      (input)=\"onEndInput($event)\"\r\n      (blur)=\"onEndBlur()\"\r\n      (focus)=\"onInputFocus()\"\r\n      (keydown)=\"onEndKeydown($event)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    />\r\n  }\r\n\r\n  <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-date-picker__toggle\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-expanded]=\"panelOpen()\"\r\n      [disabled]=\"disabled()\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\r\n      <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n  <div\r\n    #calendarPanel\r\n    class=\"fui-date-picker__panel\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n  >\r\n    <fui-calendar\r\n      #calendar\r\n      [selected]=\"selectedDate()\"\r\n      [rangeStart]=\"rangeStartDate()\"\r\n      [rangeEnd]=\"rangeEndDate()\"\r\n      [range]=\"range()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [dateFilter]=\"dateFilter()\"\r\n      [startAt]=\"startAt()\"\r\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n      [hoveredDate]=\"hoveredDate()\"\r\n      (dateSelected)=\"onDateSelected($event)\"\r\n      (dateHovered)=\"onDateHovered($event)\"\r\n    />\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}.fui-date-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{animation:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiCalendarComponent, selector: "fui-calendar", inputs: ["selected", "rangeStart", "rangeEnd", "range", "min", "max", "dateFilter", "startAt", "firstDayOfWeek", "hoveredDate"], outputs: ["dateSelected", "dateHovered", "monthChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerComponent, decorators: [{
             type: Component,
@@ -1305,7 +1352,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    class=\"fui-date-picker__input\"\r\n    [id]=\"id\"\r\n    [value]=\"startInputText()\"\r\n    [placeholder]=\"getStartPlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    aria-haspopup=\"dialog\"\r\n    aria-autocomplete=\"none\"\r\n    role=\"combobox\"\r\n    inputmode=\"numeric\"\r\n    autocomplete=\"off\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n    (focus)=\"onInputFocus()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  />\r\n\r\n  <!-- Range separator + end input -->\r\n  @if (range()) {\r\n    <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n    <input\r\n      #endInput\r\n      class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n      [value]=\"endInputText()\"\r\n      [placeholder]=\"getEndPlaceholder()\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [attr.aria-label]=\"'End date'\"\r\n      [attr.aria-invalid]=\"errorState()\"\r\n      inputmode=\"numeric\"\r\n      autocomplete=\"off\"\r\n      (input)=\"onEndInput($event)\"\r\n      (blur)=\"onEndBlur()\"\r\n      (focus)=\"onInputFocus()\"\r\n      (keydown)=\"onEndKeydown($event)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    />\r\n  }\r\n\r\n  <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-date-picker__toggle\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-expanded]=\"panelOpen()\"\r\n      [disabled]=\"disabled()\"\r\n      aria-haspopup=\"dialog\"\r\n      aria-label=\"Open calendar\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\r\n      <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n  <div #calendarPanel class=\"fui-date-picker__panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Calendar\">\r\n    <fui-calendar\r\n      #calendar\r\n      [selected]=\"selectedDate()\"\r\n      [rangeStart]=\"rangeStartDate()\"\r\n      [rangeEnd]=\"rangeEndDate()\"\r\n      [range]=\"range()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [dateFilter]=\"dateFilter()\"\r\n      [startAt]=\"startAt()\"\r\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n      [hoveredDate]=\"hoveredDate()\"\r\n      (dateSelected)=\"onDateSelected($event)\"\r\n      (dateHovered)=\"onDateHovered($event)\"\r\n    />\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-03);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker__panel{background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker-backdrop{background:transparent}.fui-date-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{transition: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    class=\"fui-date-picker__input\"\r\n    [id]=\"id\"\r\n    [value]=\"startInputText()\"\r\n    [placeholder]=\"getStartPlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    aria-haspopup=\"dialog\"\r\n    aria-autocomplete=\"none\"\r\n    role=\"combobox\"\r\n    inputmode=\"numeric\"\r\n    autocomplete=\"off\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n    (focus)=\"onInputFocus()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  />\r\n\r\n  <!-- Range separator + end input -->\r\n  @if (range()) {\r\n    <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n    <input\r\n      #endInput\r\n      class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n      [value]=\"endInputText()\"\r\n      [placeholder]=\"getEndPlaceholder()\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n      [attr.aria-invalid]=\"errorState()\"\r\n      inputmode=\"numeric\"\r\n      autocomplete=\"off\"\r\n      (input)=\"onEndInput($event)\"\r\n      (blur)=\"onEndBlur()\"\r\n      (focus)=\"onInputFocus()\"\r\n      (keydown)=\"onEndKeydown($event)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    />\r\n  }\r\n\r\n  <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-date-picker__toggle\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-expanded]=\"panelOpen()\"\r\n      [disabled]=\"disabled()\"\r\n      aria-haspopup=\"dialog\"\r\n      [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\r\n      <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n  <div\r\n    #calendarPanel\r\n    class=\"fui-date-picker__panel\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n  >\r\n    <fui-calendar\r\n      #calendar\r\n      [selected]=\"selectedDate()\"\r\n      [rangeStart]=\"rangeStartDate()\"\r\n      [rangeEnd]=\"rangeEndDate()\"\r\n      [range]=\"range()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [dateFilter]=\"dateFilter()\"\r\n      [startAt]=\"startAt()\"\r\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n      [hoveredDate]=\"hoveredDate()\"\r\n      (dateSelected)=\"onDateSelected($event)\"\r\n      (dateHovered)=\"onDateHovered($event)\"\r\n    />\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}.fui-date-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], triggerEl: [{
                 type: ViewChild,
                 args: ['triggerEl', { static: false }]
@@ -1327,5 +1374,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_DATE_FORMAT, FuiCalendarComponent, FuiDatePickerComponent, RANGE_SEPARATOR, applyDateMask, buildCalendarGrid, formatDate, getDaysInMonth, getMonthLabel, getShortMonthName, getWeekdayLabels, isAfter, isBefore, isBetween, isDateInRange, isSameDay, normalizeDate, parseDate };
+export { DEFAULT_DATE_FORMAT, FuiCalendarComponent, FuiCalendarIntl, FuiDatePickerComponent, FuiDatePickerIntl, RANGE_SEPARATOR, applyDateMask, buildCalendarGrid, formatDate, getDaysInMonth, getMonthLabel, getShortMonthName, getWeekdayLabels, isAfter, isBefore, isBetween, isDateInRange, isSameDay, normalizeDate, parseDate };
 //# sourceMappingURL=raintonic-formaui-components-date-picker.mjs.map