@raintonic/formaui 0.2.0

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

@@ -0,0 +1,1331 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, inject, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgZone, effect, ViewChild } from '@angular/core';
+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 { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+
+/**
+ * Normalize a date to noon to avoid DST edge cases.
+ */
+function normalizeDate(date) {
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0, 0);
+    return d;
+}
+/**
+ * Check if two dates are the same day (ignoring time).
+ */
+function isSameDay(a, b) {
+    if (!a || !b)
+        return false;
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+/**
+ * Check if a date is within [min, max] bounds (day-level).
+ */
+function isDateInRange(date, min, max) {
+    const d = normalizeDate(date).getTime();
+    if (min && normalizeDate(min).getTime() > d)
+        return false;
+    if (max && normalizeDate(max).getTime() < d)
+        return false;
+    return true;
+}
+/**
+ * Get number of days in a given month.
+ */
+function getDaysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+}
+/**
+ * Get localized weekday labels.
+ * @param firstDayOfWeek 0=Sunday, 1=Monday, etc.
+ * @param format 'short' | 'narrow'
+ */
+function getWeekdayLabels(firstDayOfWeek = 1, format = 'narrow') {
+    const formatter = new Intl.DateTimeFormat(undefined, { weekday: format });
+    const labels = [];
+    // Jan 4, 2024 is a Thursday — use a known date to map
+    // Instead, iterate from a known Sunday (Jan 7, 2024)
+    const sunday = new Date(2024, 0, 7); // Known Sunday
+    for (let i = 0; i < 7; i++) {
+        const dayIndex = (firstDayOfWeek + i) % 7;
+        const date = new Date(sunday);
+        date.setDate(sunday.getDate() + dayIndex);
+        labels.push(formatter.format(date));
+    }
+    return labels;
+}
+/**
+ * Get localized month label.
+ */
+function getMonthLabel(year, month, format = 'long') {
+    const formatter = new Intl.DateTimeFormat(undefined, { month: format, year: 'numeric' });
+    return formatter.format(new Date(year, month, 1));
+}
+/**
+ * Get short month name (for month view grid).
+ */
+function getShortMonthName(month) {
+    const formatter = new Intl.DateTimeFormat(undefined, { month: 'short' });
+    return formatter.format(new Date(2024, month, 1));
+}
+/**
+ * Build a 6x7 calendar grid for a given month.
+ * @returns 6 rows of 7 Date objects each.
+ */
+function buildCalendarGrid(year, month, firstDayOfWeek = 1) {
+    const firstOfMonth = new Date(year, month, 1);
+    const dayOfWeek = firstOfMonth.getDay();
+    // How many days to show from the previous month
+    const offset = (dayOfWeek - firstDayOfWeek + 7) % 7;
+    const startDate = new Date(year, month, 1 - offset);
+    const weeks = [];
+    const current = new Date(startDate);
+    for (let week = 0; week < 6; week++) {
+        const row = [];
+        for (let day = 0; day < 7; day++) {
+            row.push(normalizeDate(new Date(current)));
+            current.setDate(current.getDate() + 1);
+        }
+        weeks.push(row);
+    }
+    return weeks;
+}
+// --- Format / Parse ---
+function getSeparator(format) {
+    // Find first non-letter character
+    const match = /[^dMyy]/.exec(format);
+    return match ? match[0] : '/';
+}
+/**
+ * Format a Date to a string using the given format pattern.
+ * Supported tokens: dd, d, MM, M, yyyy, yy
+ */
+function formatDate(date, format) {
+    if (!date || isNaN(date.getTime()))
+        return '';
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+    let result = format;
+    // Replace in order of longest token first to avoid partial matches
+    result = result.replace('dd', String(day).padStart(2, '0'));
+    result = result.replace(/\bd\b/, String(day));
+    result = result.replace('MM', String(month).padStart(2, '0'));
+    result = result.replace(/\bM\b/, String(month));
+    result = result.replace('yyyy', String(year).padStart(4, '0'));
+    result = result.replace('yy', String(year % 100).padStart(2, '0'));
+    return result;
+}
+/**
+ * Parse a date string to a Date using the given format.
+ * Returns null on failure.
+ */
+function parseDate(text, format) {
+    if (!text?.trim())
+        return null;
+    const sep = getSeparator(format);
+    const parts = text.split(sep);
+    // Build a map of token → position in split parts
+    let day = -1;
+    let month = -1;
+    let year = -1;
+    // Build expected parts from format
+    const formatParts = format.split(sep);
+    if (parts.length !== formatParts.length)
+        return null;
+    for (let i = 0; i < formatParts.length; i++) {
+        const fp = formatParts[i];
+        const val = parseInt(parts[i], 10);
+        if (isNaN(val))
+            return null;
+        if (fp === 'dd' || fp === 'd') {
+            day = val;
+        }
+        else if (fp === 'MM' || fp === 'M') {
+            month = val;
+        }
+        else if (fp === 'yyyy') {
+            year = val;
+        }
+        else if (fp === 'yy') {
+            year = val < 50 ? 2000 + val : 1900 + val;
+        }
+    }
+    if (day < 1 || day > 31 || month < 1 || month > 12 || year < 0)
+        return null;
+    // Validate day for the given month
+    const daysInMonth = getDaysInMonth(year, month - 1);
+    if (day > daysInMonth)
+        return null;
+    return normalizeDate(new Date(year, month - 1, day));
+}
+/**
+ * Apply date mask to raw input as user types.
+ * Returns the masked value and corrected cursor position.
+ */
+function applyDateMask(rawInput, format) {
+    const sep = getSeparator(format);
+    const digits = rawInput.replace(/\D/g, '');
+    // Build a pattern of digit counts from format tokens
+    // e.g., 'dd/MM/yyyy' → [2, 2, 4] with separators at positions 2, 5
+    const formatParts = format.split(sep);
+    const digitCounts = formatParts.map((p) => p.length);
+    const maxDigits = digitCounts.reduce((a, b) => a + b, 0);
+    const capped = digits.substring(0, maxDigits);
+    let masked = '';
+    let digitIndex = 0;
+    for (let partIdx = 0; partIdx < digitCounts.length; partIdx++) {
+        const count = digitCounts[partIdx];
+        const partDigits = capped.substring(digitIndex, digitIndex + count);
+        if (partDigits.length === 0)
+            break;
+        if (partIdx > 0) {
+            masked += sep;
+        }
+        masked += partDigits;
+        digitIndex += partDigits.length;
+        // Auto-insert separator when part is complete and there are more digits
+        if (partDigits.length === count && digitIndex < capped.length && partIdx < digitCounts.length - 1) {
+            // separator will be added in next iteration
+        }
+    }
+    return { masked, cursor: masked.length };
+}
+/**
+ * Check if date a is before date b (day-level).
+ */
+function isBefore(a, b) {
+    return normalizeDate(a).getTime() < normalizeDate(b).getTime();
+}
+/**
+ * Check if date a is after date b (day-level).
+ */
+function isAfter(a, b) {
+    return normalizeDate(a).getTime() > normalizeDate(b).getTime();
+}
+/**
+ * Check if date is between start and end (inclusive, day-level).
+ */
+function isBetween(date, start, end) {
+    if (!start || !end)
+        return false;
+    const d = normalizeDate(date).getTime();
+    const s = normalizeDate(start).getTime();
+    const e = normalizeDate(end).getTime();
+    const min = Math.min(s, e);
+    const max = Math.max(s, e);
+    return d >= min && d <= max;
+}
+
+/**
+ * @component FuiCalendarComponent
+ * @selector fui-calendar
+ * @description Internal calendar grid used by `fui-date-picker`. Renders day, month,
+ * and year views with full keyboard navigation (Arrow keys, Home, End, PageUp/Down,
+ * Enter, Escape). Supports single-date selection and range highlighting with hover preview.
+ *
+ * @input selected - Currently selected date for single mode (Date | null)
+ * @input rangeStart - Start date of a range selection (Date | null)
+ * @input rangeEnd - End date of a range selection (Date | null)
+ * @input range - Whether range mode is active (default: false)
+ * @input min - Minimum selectable date (Date | null)
+ * @input max - Maximum selectable date (Date | null)
+ * @input dateFilter - Custom filter function to disable specific dates (DateFilterFn | null)
+ * @input startAt - Initial date to display when the calendar opens (Date | null)
+ * @input firstDayOfWeek - First day of the week: 0 = Sunday, 1 = Monday (default: 1)
+ * @input hoveredDate - Currently hovered date for range preview (Date | null)
+ *
+ * @output dateSelected - Emits the Date when a day cell is clicked or confirmed via keyboard
+ * @output dateHovered - Emits the hovered Date or null on mouse enter/leave
+ * @output monthChanged - Emits the new view Date when navigating months/years
+ *
+ * @example
+ * <fui-calendar
+ *   [selected]="selectedDate"
+ *   [min]="minDate"
+ *   [max]="maxDate"
+ *   (dateSelected)="onDateSelected($event)">
+ * </fui-calendar>
+ */
+class FuiCalendarComponent {
+    // Inputs
+    selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    rangeStart = input(null, ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
+    rangeEnd = input(null, ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    range = input(false, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    dateFilter = input(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    hoveredDate = input(null, ...(ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []));
+    // Outputs
+    dateSelected = output();
+    dateHovered = output();
+    monthChanged = output();
+    // Internal state
+    currentView = signal('days', ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    viewDate = signal(normalizeDate(new Date()), ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
+    activeDate = signal(normalizeDate(new Date()), ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    // Computed: weekday header labels
+    weekDayHeaders = computed(() => getWeekdayLabels(this.firstDayOfWeek(), 'narrow'), ...(ngDevMode ? [{ debugName: "weekDayHeaders" }] : /* istanbul ignore next */ []));
+    // Computed: month/year labels for header
+    monthYearLabel = computed(() => {
+        const d = this.viewDate();
+        const formatter = new Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' });
+        return formatter.format(d);
+    }, ...(ngDevMode ? [{ debugName: "monthYearLabel" }] : /* istanbul ignore next */ []));
+    yearLabel = computed(() => {
+        return String(this.viewDate().getFullYear());
+    }, ...(ngDevMode ? [{ debugName: "yearLabel" }] : /* istanbul ignore next */ []));
+    decadeLabel = computed(() => {
+        const year = this.viewDate().getFullYear();
+        const start = year - (year % 12);
+        return `${start} \u2013 ${start + 11}`;
+    }, ...(ngDevMode ? [{ debugName: "decadeLabel" }] : /* istanbul ignore next */ []));
+    // Accessible navigation button labels
+    prevButtonLabel = computed(() => {
+        switch (this.currentView()) {
+            case 'days':
+                return 'Previous month';
+            case 'months':
+                return 'Previous year';
+            case 'years':
+                return 'Previous decade';
+        }
+    }, ...(ngDevMode ? [{ debugName: "prevButtonLabel" }] : /* istanbul ignore next */ []));
+    nextButtonLabel = computed(() => {
+        switch (this.currentView()) {
+            case 'days':
+                return 'Next month';
+            case 'months':
+                return 'Next year';
+            case 'years':
+                return 'Next decade';
+        }
+    }, ...(ngDevMode ? [{ debugName: "nextButtonLabel" }] : /* istanbul ignore next */ []));
+    headerButtonLabel = computed(() => {
+        switch (this.currentView()) {
+            case 'days':
+                return 'Switch to month view';
+            case 'months':
+                return 'Switch to year view';
+            case 'years':
+                return this.decadeLabel();
+        }
+    }, ...(ngDevMode ? [{ debugName: "headerButtonLabel" }] : /* istanbul ignore next */ []));
+    // Computed: 6x7 calendar day grid
+    weeks = computed(() => {
+        const vd = this.viewDate();
+        const grid = buildCalendarGrid(vd.getFullYear(), vd.getMonth(), this.firstDayOfWeek());
+        const today = normalizeDate(new Date());
+        const sel = this.selected();
+        const rStart = this.rangeStart();
+        const rEnd = this.rangeEnd();
+        const hovered = this.hoveredDate();
+        const isRange = this.range();
+        const minDate = this.min();
+        const maxDate = this.max();
+        const filter = this.dateFilter();
+        return grid.map((week) => week.map((date) => {
+            const isCurrentMonth = date.getMonth() === vd.getMonth();
+            const isDisabled = !isDateInRange(date, minDate, maxDate) || (filter ? !filter(date) : false);
+            const isSelected = !isRange ? isSameDay(date, sel) : isSameDay(date, rStart) || isSameDay(date, rEnd);
+            const isRangeStart = isRange && isSameDay(date, rStart);
+            const isRangeEnd = isRange && rEnd ? isSameDay(date, rEnd) : false;
+            const isInRange = isRange && rStart && rEnd ? isBetween(date, rStart, rEnd) && !isRangeStart && !isRangeEnd : false;
+            const isRangePreview = isRange && rStart && !rEnd && hovered
+                ? isBetween(date, rStart, hovered) && !isSameDay(date, rStart) && !isSameDay(date, hovered)
+                : false;
+            return {
+                date,
+                day: date.getDate(),
+                isCurrentMonth,
+                isToday: isSameDay(date, today),
+                isSelected,
+                isDisabled,
+                isRangeStart,
+                isRangeEnd,
+                isInRange,
+                isRangePreview,
+            };
+        }));
+    }, ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    // Computed: 3x4 months grid
+    monthsGrid = computed(() => {
+        const vd = this.viewDate();
+        const currentYear = vd.getFullYear();
+        const now = new Date();
+        const sel = this.selected();
+        const rStart = this.rangeStart();
+        const minDate = this.min();
+        const maxDate = this.max();
+        const months = [];
+        for (let m = 0; m < 12; m++) {
+            const isDisabled = this._isMonthDisabled(currentYear, m, minDate, maxDate);
+            const isSelected = sel ? sel.getFullYear() === currentYear && sel.getMonth() === m : false;
+            months.push({
+                month: m,
+                label: getShortMonthName(m),
+                isCurrentMonth: now.getFullYear() === currentYear && now.getMonth() === m,
+                isSelected: isSelected || (rStart ? rStart.getFullYear() === currentYear && rStart.getMonth() === m : false),
+                isDisabled,
+            });
+        }
+        // Arrange in 4 rows of 3
+        const grid = [];
+        for (let i = 0; i < 12; i += 3) {
+            grid.push(months.slice(i, i + 3));
+        }
+        return grid;
+    }, ...(ngDevMode ? [{ debugName: "monthsGrid" }] : /* istanbul ignore next */ []));
+    // Computed: 3x4 years grid
+    yearsGrid = computed(() => {
+        const vd = this.viewDate();
+        const baseYear = vd.getFullYear();
+        const startYear = baseYear - (baseYear % 12);
+        const now = new Date();
+        const sel = this.selected();
+        const rStart = this.rangeStart();
+        const minDate = this.min();
+        const maxDate = this.max();
+        const years = [];
+        for (let i = 0; i < 12; i++) {
+            const year = startYear + i;
+            const isDisabled = this._isYearDisabled(year, minDate, maxDate);
+            const isSelected = sel ? sel.getFullYear() === year : false;
+            years.push({
+                year,
+                isCurrentYear: now.getFullYear() === year,
+                isSelected: isSelected || (rStart ? rStart.getFullYear() === year : false),
+                isDisabled,
+            });
+        }
+        const grid = [];
+        for (let i = 0; i < 12; i += 3) {
+            grid.push(years.slice(i, i + 3));
+        }
+        return grid;
+    }, ...(ngDevMode ? [{ debugName: "yearsGrid" }] : /* istanbul ignore next */ []));
+    _elementRef = inject(ElementRef);
+    constructor() {
+        // Initialize viewDate from startAt or selected or now
+        const initial = this.startAt() ?? this.selected() ?? new Date();
+        this.viewDate.set(normalizeDate(initial));
+        this.activeDate.set(normalizeDate(initial));
+    }
+    // --- Header actions ---
+    onHeaderLabelClick() {
+        const view = this.currentView();
+        if (view === 'days') {
+            this.currentView.set('months');
+        }
+        else if (view === 'months') {
+            this.currentView.set('years');
+        }
+    }
+    onPrev() {
+        const view = this.currentView();
+        const vd = this.viewDate();
+        if (view === 'days') {
+            this.viewDate.set(new Date(vd.getFullYear(), vd.getMonth() - 1, 1, 12));
+        }
+        else if (view === 'months') {
+            this.viewDate.set(new Date(vd.getFullYear() - 1, vd.getMonth(), 1, 12));
+        }
+        else {
+            this.viewDate.set(new Date(vd.getFullYear() - 12, vd.getMonth(), 1, 12));
+        }
+        this.monthChanged.emit(this.viewDate());
+    }
+    onNext() {
+        const view = this.currentView();
+        const vd = this.viewDate();
+        if (view === 'days') {
+            this.viewDate.set(new Date(vd.getFullYear(), vd.getMonth() + 1, 1, 12));
+        }
+        else if (view === 'months') {
+            this.viewDate.set(new Date(vd.getFullYear() + 1, vd.getMonth(), 1, 12));
+        }
+        else {
+            this.viewDate.set(new Date(vd.getFullYear() + 12, vd.getMonth(), 1, 12));
+        }
+        this.monthChanged.emit(this.viewDate());
+    }
+    // --- Day view actions ---
+    onDayClick(day) {
+        if (day.isDisabled)
+            return;
+        this.dateSelected.emit(day.date);
+    }
+    onDayMouseEnter(day) {
+        if (day.isDisabled)
+            return;
+        this.dateHovered.emit(day.date);
+    }
+    onDayMouseLeave() {
+        this.dateHovered.emit(null);
+    }
+    // --- Month/year view actions ---
+    onMonthClick(month) {
+        if (month.isDisabled)
+            return;
+        const vd = this.viewDate();
+        this.viewDate.set(new Date(vd.getFullYear(), month.month, 1, 12));
+        this.currentView.set('days');
+    }
+    onYearClick(year) {
+        if (year.isDisabled)
+            return;
+        const vd = this.viewDate();
+        this.viewDate.set(new Date(year.year, vd.getMonth(), 1, 12));
+        this.currentView.set('months');
+    }
+    // --- Keyboard navigation ---
+    onKeydown(event) {
+        const view = this.currentView();
+        if (view === 'days') {
+            this._handleDayKeydown(event);
+        }
+        else if (view === 'months') {
+            this._handleMonthKeydown(event);
+        }
+        else {
+            this._handleYearKeydown(event);
+        }
+    }
+    _handleDayKeydown(event) {
+        const active = this.activeDate();
+        let newDate = null;
+        switch (event.key) {
+            case 'ArrowLeft':
+                newDate = new Date(active.getFullYear(), active.getMonth(), active.getDate() - 1, 12);
+                break;
+            case 'ArrowRight':
+                newDate = new Date(active.getFullYear(), active.getMonth(), active.getDate() + 1, 12);
+                break;
+            case 'ArrowUp':
+                newDate = new Date(active.getFullYear(), active.getMonth(), active.getDate() - 7, 12);
+                break;
+            case 'ArrowDown':
+                newDate = new Date(active.getFullYear(), active.getMonth(), active.getDate() + 7, 12);
+                break;
+            case 'Home':
+                newDate = new Date(active.getFullYear(), active.getMonth(), 1, 12);
+                break;
+            case 'End':
+                newDate = new Date(active.getFullYear(), active.getMonth(), getDaysInMonth(active.getFullYear(), active.getMonth()), 12);
+                break;
+            case 'PageUp':
+                if (event.shiftKey) {
+                    newDate = new Date(active.getFullYear() - 1, active.getMonth(), active.getDate(), 12);
+                }
+                else {
+                    newDate = new Date(active.getFullYear(), active.getMonth() - 1, active.getDate(), 12);
+                }
+                break;
+            case 'PageDown':
+                if (event.shiftKey) {
+                    newDate = new Date(active.getFullYear() + 1, active.getMonth(), active.getDate(), 12);
+                }
+                else {
+                    newDate = new Date(active.getFullYear(), active.getMonth() + 1, active.getDate(), 12);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (isDateInRange(active, this.min(), this.max())) {
+                    const filter = this.dateFilter();
+                    if (!filter || filter(active)) {
+                        this.dateSelected.emit(active);
+                    }
+                }
+                return;
+            case 'Escape':
+                // Let parent handle
+                return;
+            default:
+                return;
+        }
+        if (newDate) {
+            event.preventDefault();
+            this.activeDate.set(normalizeDate(newDate));
+            // If the new active date is in a different month, update viewDate
+            if (newDate.getMonth() !== this.viewDate().getMonth() ||
+                newDate.getFullYear() !== this.viewDate().getFullYear()) {
+                this.viewDate.set(new Date(newDate.getFullYear(), newDate.getMonth(), 1, 12));
+                this.monthChanged.emit(this.viewDate());
+            }
+        }
+    }
+    _handleMonthKeydown(event) {
+        // Simple arrow key handling for month grid (3 columns)
+        const vd = this.viewDate();
+        let month = vd.getMonth();
+        switch (event.key) {
+            case 'ArrowLeft':
+                month--;
+                break;
+            case 'ArrowRight':
+                month++;
+                break;
+            case 'ArrowUp':
+                month -= 3;
+                break;
+            case 'ArrowDown':
+                month += 3;
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.viewDate.set(new Date(vd.getFullYear(), month, 1, 12));
+                this.currentView.set('days');
+                return;
+            case 'Escape':
+                this.currentView.set('days');
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (month < 0) {
+            this.viewDate.set(new Date(vd.getFullYear() - 1, 11, 1, 12));
+        }
+        else if (month > 11) {
+            this.viewDate.set(new Date(vd.getFullYear() + 1, 0, 1, 12));
+        }
+        else {
+            this.viewDate.set(new Date(vd.getFullYear(), month, 1, 12));
+        }
+    }
+    _handleYearKeydown(event) {
+        const vd = this.viewDate();
+        let year = vd.getFullYear();
+        switch (event.key) {
+            case 'ArrowLeft':
+                year--;
+                break;
+            case 'ArrowRight':
+                year++;
+                break;
+            case 'ArrowUp':
+                year -= 3;
+                break;
+            case 'ArrowDown':
+                year += 3;
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.viewDate.set(new Date(year, vd.getMonth(), 1, 12));
+                this.currentView.set('months');
+                return;
+            case 'Escape':
+                this.currentView.set('months');
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.viewDate.set(new Date(year, vd.getMonth(), 1, 12));
+    }
+    // Track by functions
+    trackByWeek(_index, _week) {
+        return _index;
+    }
+    trackByDay(_index, day) {
+        return day.date.getTime();
+    }
+    trackByMonth(_index, month) {
+        return month.month;
+    }
+    trackByYear(_index, year) {
+        return year.year;
+    }
+    trackByRow(_index) {
+        return _index;
+    }
+    // Helper: is entire month disabled?
+    _isMonthDisabled(year, month, min, max) {
+        if (min) {
+            const lastOfMonth = new Date(year, month + 1, 0);
+            if (isBefore(lastOfMonth, min) && !isSameDay(lastOfMonth, min))
+                return true;
+        }
+        if (max) {
+            const firstOfMonth = new Date(year, month, 1);
+            if (isAfter(firstOfMonth, max) && !isSameDay(firstOfMonth, max))
+                return true;
+        }
+        return false;
+    }
+    // Helper: is entire year disabled?
+    _isYearDisabled(year, min, max) {
+        if (min && year < min.getFullYear())
+            return true;
+        if (max && year > max.getFullYear())
+            return true;
+        return false;
+    }
+    // Public: focus the calendar for keyboard nav
+    focus() {
+        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 -->\n<div class=\"fui-calendar__header\">\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onPrev()\" [attr.aria-label]=\"prevButtonLabel()\">\n    <fui-icon name=\"caret-left\" size=\"sm\" />\n  </button>\n\n  <button\n    type=\"button\"\n    class=\"fui-calendar__header-label\"\n    (click)=\"onHeaderLabelClick()\"\n    [attr.aria-label]=\"headerButtonLabel()\"\n  >\n    @switch (currentView()) {\n      @case ('days') {\n        {{ monthYearLabel() }}\n      }\n      @case ('months') {\n        {{ yearLabel() }}\n      }\n      @case ('years') {\n        {{ decadeLabel() }}\n      }\n    }\n  </button>\n\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onNext()\" [attr.aria-label]=\"nextButtonLabel()\">\n    <fui-icon name=\"caret-right\" size=\"sm\" />\n  </button>\n</div>\n\n<!-- Day View -->\n@if (currentView() === 'days') {\n  <table class=\"fui-calendar__grid\" role=\"grid\" [attr.aria-label]=\"monthYearLabel()\" (keydown)=\"onKeydown($event)\">\n    <thead>\n      <tr>\n        @for (header of weekDayHeaders(); track header) {\n          <th class=\"fui-calendar__weekday\" scope=\"col\">{{ header }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (week of weeks(); track trackByWeek($index, week)) {\n        <tr>\n          @for (day of week; track trackByDay($index, day)) {\n            <td\n              class=\"fui-calendar__cell\"\n              [class.--today]=\"day.isToday\"\n              [class.--selected]=\"day.isSelected\"\n              [class.--outside]=\"!day.isCurrentMonth\"\n              [class.--disabled]=\"day.isDisabled\"\n              [class.--range-start]=\"day.isRangeStart\"\n              [class.--range-end]=\"day.isRangeEnd\"\n              [class.--in-range]=\"day.isInRange\"\n              [class.--range-preview]=\"day.isRangePreview\"\n              role=\"gridcell\"\n              [attr.aria-selected]=\"day.isSelected\"\n              [attr.aria-disabled]=\"day.isDisabled\"\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\n              [attr.tabindex]=\"day.isCurrentMonth && !day.isDisabled ? 0 : -1\"\n              (click)=\"onDayClick(day)\"\n              (mouseenter)=\"onDayMouseEnter(day)\"\n              (mouseleave)=\"onDayMouseLeave()\"\n            >\n              <span class=\"fui-calendar__day\">{{ day.day }}</span>\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n}\n\n<!-- Month View -->\n@if (currentView() === 'months') {\n  <div class=\"fui-calendar__months\" role=\"grid\" [attr.aria-label]=\"yearLabel()\" (keydown)=\"onKeydown($event)\">\n    @for (row of monthsGrid(); track trackByRow($index)) {\n      <div class=\"fui-calendar__months-row\" role=\"row\">\n        @for (month of row; track trackByMonth($index, month)) {\n          <button\n            type=\"button\"\n            class=\"fui-calendar__month-cell\"\n            [class.--current]=\"month.isCurrentMonth\"\n            [class.--selected]=\"month.isSelected\"\n            [class.--disabled]=\"month.isDisabled\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"month.isSelected\"\n            [attr.aria-disabled]=\"month.isDisabled\"\n            [disabled]=\"month.isDisabled\"\n            (click)=\"onMonthClick(month)\"\n          >\n            {{ month.label }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Year View -->\n@if (currentView() === 'years') {\n  <div class=\"fui-calendar__years\" role=\"grid\" [attr.aria-label]=\"decadeLabel()\" (keydown)=\"onKeydown($event)\">\n    @for (row of yearsGrid(); track trackByRow($index)) {\n      <div class=\"fui-calendar__years-row\" role=\"row\">\n        @for (year of row; track trackByYear($index, year)) {\n          <button\n            type=\"button\"\n            class=\"fui-calendar__year-cell\"\n            [class.--current]=\"year.isCurrentYear\"\n            [class.--selected]=\"year.isSelected\"\n            [class.--disabled]=\"year.isDisabled\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"year.isSelected\"\n            [attr.aria-disabled]=\"year.isDisabled\"\n            [disabled]=\"year.isDisabled\"\n            (click)=\"onYearClick(year)\"\n          >\n            {{ year.year }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Live region for screen readers -->\n<div class=\"fui-calendar__announcer\" aria-live=\"polite\" aria-atomic=\"true\">\n  @switch (currentView()) {\n    @case ('days') {\n      {{ monthYearLabel() }}\n    }\n    @case ('months') {\n      {{ yearLabel() }}\n    }\n    @case ('years') {\n      {{ decadeLabel() }}\n    }\n  }\n</div>\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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-calendar', standalone: true, imports: [FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-calendar',
+                        tabindex: '0',
+                        role: 'application',
+                        'aria-label': 'Calendar',
+                    }, template: "<!-- Calendar Header -->\n<div class=\"fui-calendar__header\">\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onPrev()\" [attr.aria-label]=\"prevButtonLabel()\">\n    <fui-icon name=\"caret-left\" size=\"sm\" />\n  </button>\n\n  <button\n    type=\"button\"\n    class=\"fui-calendar__header-label\"\n    (click)=\"onHeaderLabelClick()\"\n    [attr.aria-label]=\"headerButtonLabel()\"\n  >\n    @switch (currentView()) {\n      @case ('days') {\n        {{ monthYearLabel() }}\n      }\n      @case ('months') {\n        {{ yearLabel() }}\n      }\n      @case ('years') {\n        {{ decadeLabel() }}\n      }\n    }\n  </button>\n\n  <button type=\"button\" class=\"fui-calendar__nav-btn\" (click)=\"onNext()\" [attr.aria-label]=\"nextButtonLabel()\">\n    <fui-icon name=\"caret-right\" size=\"sm\" />\n  </button>\n</div>\n\n<!-- Day View -->\n@if (currentView() === 'days') {\n  <table class=\"fui-calendar__grid\" role=\"grid\" [attr.aria-label]=\"monthYearLabel()\" (keydown)=\"onKeydown($event)\">\n    <thead>\n      <tr>\n        @for (header of weekDayHeaders(); track header) {\n          <th class=\"fui-calendar__weekday\" scope=\"col\">{{ header }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (week of weeks(); track trackByWeek($index, week)) {\n        <tr>\n          @for (day of week; track trackByDay($index, day)) {\n            <td\n              class=\"fui-calendar__cell\"\n              [class.--today]=\"day.isToday\"\n              [class.--selected]=\"day.isSelected\"\n              [class.--outside]=\"!day.isCurrentMonth\"\n              [class.--disabled]=\"day.isDisabled\"\n              [class.--range-start]=\"day.isRangeStart\"\n              [class.--range-end]=\"day.isRangeEnd\"\n              [class.--in-range]=\"day.isInRange\"\n              [class.--range-preview]=\"day.isRangePreview\"\n              role=\"gridcell\"\n              [attr.aria-selected]=\"day.isSelected\"\n              [attr.aria-disabled]=\"day.isDisabled\"\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\n              [attr.tabindex]=\"day.isCurrentMonth && !day.isDisabled ? 0 : -1\"\n              (click)=\"onDayClick(day)\"\n              (mouseenter)=\"onDayMouseEnter(day)\"\n              (mouseleave)=\"onDayMouseLeave()\"\n            >\n              <span class=\"fui-calendar__day\">{{ day.day }}</span>\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n}\n\n<!-- Month View -->\n@if (currentView() === 'months') {\n  <div class=\"fui-calendar__months\" role=\"grid\" [attr.aria-label]=\"yearLabel()\" (keydown)=\"onKeydown($event)\">\n    @for (row of monthsGrid(); track trackByRow($index)) {\n      <div class=\"fui-calendar__months-row\" role=\"row\">\n        @for (month of row; track trackByMonth($index, month)) {\n          <button\n            type=\"button\"\n            class=\"fui-calendar__month-cell\"\n            [class.--current]=\"month.isCurrentMonth\"\n            [class.--selected]=\"month.isSelected\"\n            [class.--disabled]=\"month.isDisabled\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"month.isSelected\"\n            [attr.aria-disabled]=\"month.isDisabled\"\n            [disabled]=\"month.isDisabled\"\n            (click)=\"onMonthClick(month)\"\n          >\n            {{ month.label }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Year View -->\n@if (currentView() === 'years') {\n  <div class=\"fui-calendar__years\" role=\"grid\" [attr.aria-label]=\"decadeLabel()\" (keydown)=\"onKeydown($event)\">\n    @for (row of yearsGrid(); track trackByRow($index)) {\n      <div class=\"fui-calendar__years-row\" role=\"row\">\n        @for (year of row; track trackByYear($index, year)) {\n          <button\n            type=\"button\"\n            class=\"fui-calendar__year-cell\"\n            [class.--current]=\"year.isCurrentYear\"\n            [class.--selected]=\"year.isSelected\"\n            [class.--disabled]=\"year.isDisabled\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"year.isSelected\"\n            [attr.aria-disabled]=\"year.isDisabled\"\n            [disabled]=\"year.isDisabled\"\n            (click)=\"onYearClick(year)\"\n          >\n            {{ year.year }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Live region for screen readers -->\n<div class=\"fui-calendar__announcer\" aria-live=\"polite\" aria-atomic=\"true\">\n  @switch (currentView()) {\n    @case ('days') {\n      {{ monthYearLabel() }}\n    }\n    @case ('months') {\n      {{ yearLabel() }}\n    }\n    @case ('years') {\n      {{ decadeLabel() }}\n    }\n  }\n</div>\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"] }]
+        }], 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"] }] } });
+
+const DEFAULT_DATE_FORMAT = 'dd/MM/yyyy';
+const RANGE_SEPARATOR = ' \u2014 ';
+
+/**
+ * @component FuiDatePickerComponent
+ * @selector fui-date-picker
+ * @description A date picker form control with inline text input, calendar overlay panel,
+ * and optional range selection. Integrates with `fui-form-field` via `FuiFormFieldControl`
+ * and supports Reactive Forms (ControlValueAccessor) plus built-in Validator for min/max/filter
+ * constraints. Uses the overlay service for proper dropdown positioning.
+ *
+ * @input placeholder - Placeholder text for the date input (alias: 'placeholder')
+ * @input disabled - Whether the picker is disabled (alias: 'disabled')
+ * @input readonly - Whether the picker is read-only
+ * @input range - Enables date-range mode with start/end inputs (default: false)
+ * @input format - Display format string (default: 'DD/MM/YYYY')
+ * @input min - Minimum selectable date (Date | null)
+ * @input max - Maximum selectable date (Date | null)
+ * @input dateFilter - Custom filter function to disable specific dates (DateFilterFn | null)
+ * @input startAt - Initial calendar view date when opened (Date | null)
+ * @input firstDayOfWeek - First day of the week: 0 = Sunday, 1 = Monday (default: 1)
+ * @input rangeSeparator - Separator string between range start/end display (default: RANGE_SEPARATOR)
+ * @input errorStateMatcher - Custom error state matcher (ErrorStateMatcher | null)
+ *
+ * @output valueChange - Emits the new model value on change (Date | DateRange | null)
+ * @output dateChange - Emits the new model value on date selection (Date | DateRange | null)
+ * @output openedChange - Emits boolean when the calendar panel opens or closes
+ *
+ * @cssvar --fui-date-picker-font-size - Font size of the input text
+ * @cssvar --fui-date-picker-panel-border-radius - Border radius of the calendar panel
+ * @cssvar --fui-date-picker-panel-shadow - Box shadow of the calendar panel
+ * @cssvar --fui-date-picker-panel-bg - Background color of the calendar panel
+ * @cssvar --fui-date-picker-panel-border-color - Border color of the calendar panel
+ * @cssvar --fui-date-picker-toggle-size - Size of the calendar toggle icon button
+ *
+ * @example
+ * <fui-form-field>
+ *   <fui-label>Birth date</fui-label>
+ *   <fui-date-picker formControlName="birthDate" placeholder="DD/MM/YYYY"></fui-date-picker>
+ * </fui-form-field>
+ *
+ * @example
+ * <fui-form-field>
+ *   <fui-label>Stay period</fui-label>
+ *   <fui-date-picker [range]="true" formControlName="period"></fui-date-picker>
+ * </fui-form-field>
+ */
+class FuiDatePickerComponent {
+    static nextId = 0;
+    controlType = 'fui-date-picker';
+    // Inputs
+    placeholderInput = input('', { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    range = input(false, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    format = input(DEFAULT_DATE_FORMAT, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    dateFilter = input(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    rangeSeparator = input(RANGE_SEPARATOR, ...(ngDevMode ? [{ debugName: "rangeSeparator" }] : /* istanbul ignore next */ []));
+    errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    // Outputs
+    valueChange = output();
+    dateChange = output();
+    openedChange = output();
+    // Internal state
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _ngControlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_ngControlDisabled" }] : /* istanbul ignore next */ []));
+    _required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : /* istanbul ignore next */ []));
+    _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
+    _readOnly = signal(false, ...(ngDevMode ? [{ debugName: "_readOnly" }] : /* istanbul ignore next */ []));
+    panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    // Range hover
+    hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []));
+    // FuiFormFieldControl
+    stateChanges = new Subject();
+    _uid = `fui-date-picker-${FuiDatePickerComponent.nextId++}`;
+    _ariaDescribedby = null;
+    // Form references
+    _parentForm = inject(NgForm, { optional: true });
+    _parentFormGroup = inject(FormGroupDirective, { optional: true });
+    _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);
+    _ngControlRef = injectNgControl();
+    get ngControl() {
+        return this._ngControlRef.ngControl;
+    }
+    // Interface signals
+    placeholder = computed(() => this.placeholderInput(), ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    required = this._required;
+    value = this._value;
+    focused = this._focused;
+    disabled = computed(() => this._disabled() || this.disabledInput() || this._ngControlDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    errorState = this._errorState;
+    id = this._uid;
+    empty = computed(() => {
+        const val = this._value();
+        if (val === null)
+            return true;
+        if (this.range() && this._isDateRange(val)) {
+            return val.start === null && val.end === null;
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    // Computed: selected date for single mode calendar input
+    selectedDate = computed(() => {
+        const val = this._value();
+        if (val instanceof Date)
+            return val;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+    rangeStartDate = computed(() => {
+        const val = this._value();
+        if (this._isDateRange(val))
+            return val.start;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "rangeStartDate" }] : /* istanbul ignore next */ []));
+    rangeEndDate = computed(() => {
+        const val = this._value();
+        if (this._isDateRange(val))
+            return val.end;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "rangeEndDate" }] : /* istanbul ignore next */ []));
+    // ViewChildren
+    triggerEl;
+    calendarPanel;
+    startInputEl;
+    endInputEl;
+    calendarComponent;
+    // Overlay
+    _overlayRef = null;
+    _overlaySubscriptions = new Subscription();
+    _overlayService = inject(FuiOverlayService);
+    _elementRef = inject(ElementRef);
+    _document = inject(DOCUMENT);
+    _ngZone = inject(NgZone);
+    _outsideClickSub;
+    // CVA callbacks
+    _onChange = () => {
+        /* noop */
+    };
+    _onTouched = () => {
+        /* noop */
+    };
+    _onValidatorChange = () => {
+        /* noop */
+    };
+    // Input text tracking
+    startInputText = signal('', ...(ngDevMode ? [{ debugName: "startInputText" }] : /* istanbul ignore next */ []));
+    endInputText = signal('', ...(ngDevMode ? [{ debugName: "endInputText" }] : /* istanbul ignore next */ []));
+    // Display value for form-field readOnly mode (duck-typed like select/autocomplete)
+    displayValue = computed(() => {
+        if (this.range()) {
+            const start = this.startInputText();
+            const end = this.endInputText();
+            if (!start && !end)
+                return '';
+            return `${start || '—'} ${this.rangeSeparator()} ${end || '—'}`;
+        }
+        return this.startInputText() || '';
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        void Promise.resolve().then(() => {
+            if (this._ngControlRef.ngControl) {
+                this._ngControlRef.ngControl.valueAccessor = this;
+            }
+        });
+        // Effect to emit state changes
+        effect(() => {
+            this.placeholderInput();
+            this.readonly();
+            this.disabledInput();
+            this.range();
+            this.format();
+            this.errorStateMatcher();
+            this._focused();
+            this._disabled();
+            this._value();
+            this._ngControlDisabled();
+            this._required();
+            this._errorState();
+            this.stateChanges.next();
+        });
+        // Re-trigger validation when min/max/dateFilter change
+        effect(() => {
+            this.min();
+            this.max();
+            this.dateFilter();
+            this._onValidatorChange();
+        });
+        // Sync display text when value changes
+        effect(() => {
+            const val = this._value();
+            const fmt = this.format();
+            if (this.range() && this._isDateRange(val)) {
+                this.startInputText.set(formatDate(val.start, fmt));
+                this.endInputText.set(formatDate(val.end, fmt));
+            }
+            else if (val instanceof Date) {
+                this.startInputText.set(formatDate(val, fmt));
+            }
+            else {
+                this.startInputText.set('');
+                this.endInputText.set('');
+            }
+        });
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            updateErrorState(this.ngControl, this._errorState, this.errorStateMatcher(), this._defaultErrorStateMatcher, this._parentForm, this._parentFormGroup, this.stateChanges);
+            syncRequiredState(this.ngControl, this._required, this.stateChanges);
+            syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._outsideClickSub?.unsubscribe();
+        this._disposeOverlay();
+    }
+    // --- CVA ---
+    writeValue(value) {
+        if (typeof value === 'string') {
+            const parsed = parseDate(value, this.format());
+            this._value.set(parsed);
+        }
+        else if (value instanceof Date) {
+            this._value.set(normalizeDate(value));
+        }
+        else if (value && typeof value === 'object' && ('start' in value || 'end' in value)) {
+            const range = value;
+            this._value.set({
+                start: range.start ? normalizeDate(range.start) : null,
+                end: range.end ? normalizeDate(range.end) : null,
+            });
+        }
+        else {
+            this._value.set(null);
+        }
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+        this.stateChanges.next();
+    }
+    // --- Validator ---
+    validate(_control) {
+        const value = this._value();
+        if (value === null)
+            return null;
+        const minDate = this.min();
+        const maxDate = this.max();
+        const filter = this.dateFilter();
+        if (value instanceof Date) {
+            return this._validateSingleDate(value, minDate, maxDate, filter);
+        }
+        if (this._isDateRange(value)) {
+            const errors = {};
+            if (value.start) {
+                const startErrors = this._validateSingleDate(value.start, minDate, maxDate, filter);
+                if (startErrors)
+                    Object.assign(errors, startErrors);
+            }
+            if (value.end) {
+                const endErrors = this._validateSingleDate(value.end, minDate, maxDate, filter);
+                if (endErrors)
+                    Object.assign(errors, endErrors);
+            }
+            return Object.keys(errors).length > 0 ? errors : null;
+        }
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this._onValidatorChange = fn;
+    }
+    _validateSingleDate(date, min, max, filter) {
+        if (min && isBefore(date, min)) {
+            return { dateMin: { min, actual: date } };
+        }
+        if (max && isAfter(date, max)) {
+            return { dateMax: { max, actual: date } };
+        }
+        if (filter && !filter(date)) {
+            return { dateFilter: { actual: date } };
+        }
+        return null;
+    }
+    // --- FuiFormFieldControl ---
+    onContainerClick(_event) {
+        if (!this.disabled()) {
+            this.startInputEl?.nativeElement.focus();
+            if (!this.panelOpen()) {
+                this.open();
+            }
+        }
+    }
+    setDescribedByIds(ids) {
+        this._ariaDescribedby = ids.length ? ids.join(' ') : null;
+    }
+    setReadOnly(readOnly) {
+        this._readOnly.set(readOnly);
+    }
+    // --- Panel open/close ---
+    open() {
+        if (this.disabled() || this.readonly() || this.panelOpen())
+            return;
+        requestAnimationFrame(() => {
+            this.panelOpen.set(true);
+            this._focused.set(true);
+            this.openedChange.emit(true);
+            setTimeout(() => {
+                this._createOverlay();
+                this._listenForOutsideClicks();
+                this.calendarComponent?.focus();
+            });
+        });
+    }
+    close() {
+        if (!this.panelOpen())
+            return;
+        this._outsideClickSub?.unsubscribe();
+        this.panelOpen.set(false);
+        this._focused.set(false);
+        this.hoveredDate.set(null);
+        this._disposeOverlay();
+        this.openedChange.emit(false);
+        this._onTouched();
+        setTimeout(() => {
+            this.startInputEl?.nativeElement.focus();
+        }, 0);
+    }
+    toggle() {
+        if (this.panelOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    // --- Trigger click ---
+    onTriggerClick() {
+        if (!this.disabled() && !this.readonly()) {
+            this.toggle();
+        }
+    }
+    onToggleClick(event) {
+        event.stopPropagation();
+        if (!this.disabled() && !this.readonly()) {
+            this.toggle();
+        }
+    }
+    // --- Input masking (start input) ---
+    onInput(event) {
+        const input = event.target;
+        const { masked, cursor } = applyDateMask(input.value, this.format());
+        input.value = masked;
+        input.setSelectionRange(cursor, cursor);
+        this.startInputText.set(masked);
+    }
+    onBlur() {
+        const text = this.startInputText();
+        if (!text) {
+            if (!this.range()) {
+                this._setValue(null);
+            }
+            return;
+        }
+        const parsed = parseDate(text, this.format());
+        if (parsed) {
+            if (this.range()) {
+                const current = this._value();
+                const rangeVal = this._isDateRange(current) ? current : { start: null, end: null };
+                this._setValue({ ...rangeVal, start: parsed });
+            }
+            else {
+                this._setValue(parsed);
+            }
+        }
+        else {
+            // Invalid input — revert to formatted value
+            const val = this._value();
+            if (this.range() && this._isDateRange(val)) {
+                this.startInputText.set(formatDate(val.start, this.format()));
+            }
+            else if (val instanceof Date) {
+                this.startInputText.set(formatDate(val, this.format()));
+            }
+            else {
+                this.startInputText.set('');
+            }
+        }
+        if (!this.panelOpen()) {
+            this._onTouched();
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.panelOpen()) {
+            event.preventDefault();
+            this.close();
+        }
+        else if ((event.key === 'ArrowDown' || event.key === 'Enter') && !this.panelOpen()) {
+            event.preventDefault();
+            this.open();
+        }
+    }
+    // --- End input (range mode) ---
+    onEndInput(event) {
+        const input = event.target;
+        const { masked, cursor } = applyDateMask(input.value, this.format());
+        input.value = masked;
+        input.setSelectionRange(cursor, cursor);
+        this.endInputText.set(masked);
+    }
+    onEndBlur() {
+        const text = this.endInputText();
+        if (!text)
+            return;
+        const parsed = parseDate(text, this.format());
+        if (parsed) {
+            const current = this._value();
+            const rangeVal = this._isDateRange(current) ? current : { start: null, end: null };
+            this._setValue({ ...rangeVal, end: parsed });
+        }
+        else {
+            const val = this._value();
+            if (this._isDateRange(val)) {
+                this.endInputText.set(formatDate(val.end, this.format()));
+            }
+            else {
+                this.endInputText.set('');
+            }
+        }
+        if (!this.panelOpen()) {
+            this._onTouched();
+        }
+    }
+    onEndKeydown(event) {
+        if (event.key === 'Escape' && this.panelOpen()) {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    onInputFocus() {
+        this._focused.set(true);
+    }
+    // --- Calendar events ---
+    onDateSelected(date) {
+        if (this.range()) {
+            this._handleRangeSelection(date);
+        }
+        else {
+            this._setValue(date);
+            this.close();
+        }
+    }
+    onDateHovered(date) {
+        this.hoveredDate.set(date);
+    }
+    // Start listening for outside clicks when panel opens
+    _listenForOutsideClicks() {
+        this._outsideClickSub?.unsubscribe();
+        this._ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                this._outsideClickSub = fromEvent(this._document, 'click')
+                    .pipe(filter(() => this.panelOpen()), filter((event) => {
+                    const target = event.target;
+                    const hostElement = this._elementRef.nativeElement;
+                    const overlayElement = this._overlayRef?.overlayElement;
+                    return !hostElement.contains(target) && !overlayElement?.contains(target);
+                }))
+                    .subscribe(() => {
+                    this._ngZone.run(() => {
+                        this.close();
+                    });
+                });
+            });
+        });
+    }
+    // --- Private helpers ---
+    _handleRangeSelection(date) {
+        const current = this._value();
+        const rangeVal = this._isDateRange(current) ? current : { start: null, end: null };
+        if (!rangeVal.start || rangeVal.end) {
+            // First click or resetting
+            this._setValue({ start: date, end: null });
+            this.hoveredDate.set(null);
+        }
+        else {
+            // Second click — auto-swap if needed
+            let start = rangeVal.start;
+            let end = date;
+            if (normalizeDate(end).getTime() < normalizeDate(start).getTime()) {
+                [start, end] = [end, start];
+            }
+            this._setValue({ start, end });
+            this.close();
+        }
+    }
+    _setValue(value) {
+        this._value.set(value);
+        this._onChange(value);
+        this.valueChange.emit(value);
+        this.dateChange.emit(value);
+        this.stateChanges.next();
+    }
+    _createOverlay() {
+        if (this._overlayRef || !this.calendarPanel || !this.triggerEl)
+            return;
+        const triggerElement = this.triggerEl.nativeElement;
+        const triggerWidth = triggerElement.getBoundingClientRect().width;
+        const positions = [
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ];
+        const positionStrategy = this._overlayService
+            .position()
+            .connectedTo(triggerElement, positions)
+            .withPush(true)
+            .withViewportMargin(8);
+        this._overlayRef = this._overlayService.create({
+            positionStrategy,
+            scrollStrategy: this._overlayService.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'fui-date-picker-backdrop',
+            backdropClickBehavior: 'close',
+            panelClass: ['fui-date-picker-overlay-panel'],
+            minWidth: Math.max(triggerWidth, 280),
+        });
+        // Track overlay subscriptions for proper cleanup
+        this._overlaySubscriptions.unsubscribe();
+        this._overlaySubscriptions = new Subscription();
+        this._overlaySubscriptions.add(this._overlayRef.backdropClick.subscribe(() => {
+            this.close();
+        }));
+        this._overlaySubscriptions.add(this._overlayRef.keydownEvents.subscribe((event) => {
+            if (event.key === 'Escape') {
+                this.close();
+            }
+        }));
+        const panelElement = this.calendarPanel.nativeElement;
+        this._overlayRef.attach(panelElement);
+    }
+    _disposeOverlay() {
+        this._overlaySubscriptions.unsubscribe();
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+    }
+    _isDateRange(val) {
+        return val !== null && !(val instanceof Date) && typeof val === 'object' && 'start' in val;
+    }
+    // Public: get the computed placeholder for the start input
+    getStartPlaceholder() {
+        const p = this.placeholderInput();
+        if (p)
+            return p;
+        return this.format().toLowerCase();
+    }
+    getEndPlaceholder() {
+        return this.format().toLowerCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDatePickerComponent, isStandalone: true, selector: "fui-date-picker", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateChange: "dateChange", openedChange: "openedChange" }, host: { properties: { "attr.id": "id", "class.fui-date-picker--open": "panelOpen()", "class.fui-date-picker--disabled": "disabled()", "class.fui-date-picker--range": "range()", "class.fui-date-picker--focused": "focused()", "class.fui-date-picker--error": "errorState()", "class.fui-date-picker--readonly": "_readOnly()" }, classAttribute: "fui-date-picker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: FuiDatePickerComponent,
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: FuiDatePickerComponent,
+                multi: true,
+            },
+            {
+                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 -->\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\n  <!-- Start input -->\n  <input\n    #startInput\n    class=\"fui-date-picker__input\"\n    [id]=\"id\"\n    [value]=\"startInputText()\"\n    [placeholder]=\"getStartPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-describedby]=\"_ariaDescribedby\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorState()\"\n    [attr.aria-expanded]=\"panelOpen()\"\n    aria-haspopup=\"dialog\"\n    aria-autocomplete=\"none\"\n    role=\"combobox\"\n    inputmode=\"numeric\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onInputFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"$event.stopPropagation()\"\n  />\n\n  <!-- Range separator + end input -->\n  @if (range()) {\n    <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\n    <input\n      #endInput\n      class=\"fui-date-picker__input fui-date-picker__input--end\"\n      [value]=\"endInputText()\"\n      [placeholder]=\"getEndPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-label]=\"'End date'\"\n      [attr.aria-invalid]=\"errorState()\"\n      inputmode=\"numeric\"\n      autocomplete=\"off\"\n      (input)=\"onEndInput($event)\"\n      (blur)=\"onEndBlur()\"\n      (focus)=\"onInputFocus()\"\n      (keydown)=\"onEndKeydown($event)\"\n      (click)=\"$event.stopPropagation()\"\n    />\n  }\n\n  <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\n  @if (!_readOnly()) {\n    <button\n      type=\"button\"\n      class=\"fui-date-picker__toggle\"\n      tabindex=\"-1\"\n      [attr.aria-expanded]=\"panelOpen()\"\n      [disabled]=\"disabled()\"\n      aria-haspopup=\"dialog\"\n      aria-label=\"Open calendar\"\n      (click)=\"onToggleClick($event)\"\n    >\n      <fui-icon name=\"calendar-blank\" size=\"sm\" />\n    </button>\n  }\n</div>\n\n<!-- Calendar panel -->\n@if (panelOpen()) {\n  <div #calendarPanel class=\"fui-date-picker__panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Calendar\">\n    <fui-calendar\n      #calendar\n      [selected]=\"selectedDate()\"\n      [rangeStart]=\"rangeStartDate()\"\n      [rangeEnd]=\"rangeEndDate()\"\n      [range]=\"range()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [dateFilter]=\"dateFilter()\"\n      [startAt]=\"startAt()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [hoveredDate]=\"hoveredDate()\"\n      (dateSelected)=\"onDateSelected($event)\"\n      (dateHovered)=\"onDateHovered($event)\"\n    />\n  </div>\n}\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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-date-picker', standalone: true, imports: [FuiIconComponent, FuiCalendarComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-date-picker',
+                        '[attr.id]': 'id',
+                        '[class.fui-date-picker--open]': 'panelOpen()',
+                        '[class.fui-date-picker--disabled]': 'disabled()',
+                        '[class.fui-date-picker--range]': 'range()',
+                        '[class.fui-date-picker--focused]': 'focused()',
+                        '[class.fui-date-picker--error]': 'errorState()',
+                        '[class.fui-date-picker--readonly]': '_readOnly()',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: FuiDatePickerComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: FuiDatePickerComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: FUI_FORM_FIELD_CONTROL,
+                            useExisting: FuiDatePickerComponent,
+                        },
+                    ], template: "<!-- Trigger area -->\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\n  <!-- Start input -->\n  <input\n    #startInput\n    class=\"fui-date-picker__input\"\n    [id]=\"id\"\n    [value]=\"startInputText()\"\n    [placeholder]=\"getStartPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-describedby]=\"_ariaDescribedby\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorState()\"\n    [attr.aria-expanded]=\"panelOpen()\"\n    aria-haspopup=\"dialog\"\n    aria-autocomplete=\"none\"\n    role=\"combobox\"\n    inputmode=\"numeric\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onInputFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"$event.stopPropagation()\"\n  />\n\n  <!-- Range separator + end input -->\n  @if (range()) {\n    <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\n    <input\n      #endInput\n      class=\"fui-date-picker__input fui-date-picker__input--end\"\n      [value]=\"endInputText()\"\n      [placeholder]=\"getEndPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-label]=\"'End date'\"\n      [attr.aria-invalid]=\"errorState()\"\n      inputmode=\"numeric\"\n      autocomplete=\"off\"\n      (input)=\"onEndInput($event)\"\n      (blur)=\"onEndBlur()\"\n      (focus)=\"onInputFocus()\"\n      (keydown)=\"onEndKeydown($event)\"\n      (click)=\"$event.stopPropagation()\"\n    />\n  }\n\n  <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\n  @if (!_readOnly()) {\n    <button\n      type=\"button\"\n      class=\"fui-date-picker__toggle\"\n      tabindex=\"-1\"\n      [attr.aria-expanded]=\"panelOpen()\"\n      [disabled]=\"disabled()\"\n      aria-haspopup=\"dialog\"\n      aria-label=\"Open calendar\"\n      (click)=\"onToggleClick($event)\"\n    >\n      <fui-icon name=\"calendar-blank\" size=\"sm\" />\n    </button>\n  }\n</div>\n\n<!-- Calendar panel -->\n@if (panelOpen()) {\n  <div #calendarPanel class=\"fui-date-picker__panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Calendar\">\n    <fui-calendar\n      #calendar\n      [selected]=\"selectedDate()\"\n      [rangeStart]=\"rangeStartDate()\"\n      [rangeEnd]=\"rangeEndDate()\"\n      [range]=\"range()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [dateFilter]=\"dateFilter()\"\n      [startAt]=\"startAt()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [hoveredDate]=\"hoveredDate()\"\n      (dateSelected)=\"onDateSelected($event)\"\n      (dateHovered)=\"onDateHovered($event)\"\n    />\n  </div>\n}\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"] }]
+        }], 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 }]
+            }], calendarPanel: [{
+                type: ViewChild,
+                args: ['calendarPanel', { static: false }]
+            }], startInputEl: [{
+                type: ViewChild,
+                args: ['startInput', { static: false }]
+            }], endInputEl: [{
+                type: ViewChild,
+                args: ['endInput', { static: false }]
+            }], calendarComponent: [{
+                type: ViewChild,
+                args: ['calendar', { static: false }]
+            }] } });
+
+/**
+ * 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 };
+//# sourceMappingURL=raintonic-formaui-components-date-picker.mjs.map