@weeehaoooz/talos-ui 0.1.0

package/fesm2022/weeehaoooz-talos-ui-form-date-picker.mjs

@@ -0,0 +1,896 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, signal, computed, effect, forwardRef, ViewChild, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { isValid, startOfDay, endOfDay, startOfWeek, addDays, startOfMonth, isSameMonth, isSameDay, isBefore, isAfter, getDate, getMonth, getYear, setMonth, endOfMonth, getHours, getMinutes, getSeconds, subMonths, subYears, addMonths, addYears, setYear, set, addWeeks, subWeeks, subDays } from 'date-fns';
+import { formatDate, parseFlexibleDate } from '@weeehaoooz/talos-ui/core';
+
+let uniqueDatePickerId = 0;
+class DatePickerComponent {
+    elementRef = inject((ElementRef));
+    // Signal Inputs
+    placeholder = input('Select date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    floating = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    clearable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    displayFormat = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    valueFormat = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ [])); // 'yyyy-MM-dd', 'yyyy-MM-dd HH:mm', 'date', or custom format tokens
+    showTime = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+    use24Hour = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "use24Hour" }] : /* istanbul ignore next */ []));
+    showSeconds = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    minuteStep = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    minDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ [])); // 0 = Sunday, 1 = Monday
+    filterDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterDate" }] : /* istanbul ignore next */ []));
+    // Signal Outputs
+    dateChange = output();
+    opened = output();
+    closed = output();
+    // Element Refs
+    triggerEl;
+    inputEl;
+    // CDK Overlay Flexible Positioning Strategy
+    positions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 4
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -4
+        },
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: 4
+        },
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -4
+        }
+    ];
+    // Component unique IDs for accessibility
+    componentId = `talos-datepicker-${uniqueDatePickerId++}`;
+    dialogId = `${this.componentId}-dialog`;
+    // Component Internal State Signals
+    selectedDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+    viewDate = signal(new Date(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
+    viewMode = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    isTouched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+    focusedDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    inputText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputText" }] : /* istanbul ignore next */ []));
+    // Draft time signals (active when showTime is true)
+    draftHour = signal(new Date().getHours(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftHour" }] : /* istanbul ignore next */ []));
+    draftMinute = signal(new Date().getMinutes(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftMinute" }] : /* istanbul ignore next */ []));
+    draftSecond = signal(new Date().getSeconds(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftSecond" }] : /* istanbul ignore next */ []));
+    // Computed state
+    isFloatingMode = computed(() => this.floatingLabel() || this.floating(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloatingMode" }] : /* istanbul ignore next */ []));
+    isFloated = computed(() => {
+        if (!this.isFloatingMode())
+            return false;
+        return this.isOpen() || this.isFocused() || !!this.inputText() || this.selectedDate() !== null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.isDisabledSignal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    effectiveDisplayFormat = computed(() => {
+        const fmt = this.displayFormat();
+        if (fmt)
+            return fmt;
+        return this.showTime() ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisplayFormat" }] : /* istanbul ignore next */ []));
+    effectiveValueFormat = computed(() => {
+        const fmt = this.valueFormat();
+        if (fmt)
+            return fmt;
+        return this.showTime() ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveValueFormat" }] : /* istanbul ignore next */ []));
+    formattedValue = computed(() => {
+        const sel = this.selectedDate();
+        if (!sel || !isValid(sel)) {
+            return '';
+        }
+        return formatDate(sel, this.effectiveDisplayFormat());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+    displayHour = computed(() => {
+        const h = this.draftHour();
+        if (this.use24Hour()) {
+            return h.toString().padStart(2, '0');
+        }
+        const h12 = h % 12 === 0 ? 12 : h % 12;
+        return h12.toString().padStart(2, '0');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayHour" }] : /* istanbul ignore next */ []));
+    displayMinute = computed(() => {
+        return this.draftMinute().toString().padStart(2, '0');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMinute" }] : /* istanbul ignore next */ []));
+    displaySecond = computed(() => {
+        return this.draftSecond().toString().padStart(2, '0');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displaySecond" }] : /* istanbul ignore next */ []));
+    meridiem = computed(() => {
+        return this.draftHour() >= 12 ? 'PM' : 'AM';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meridiem" }] : /* istanbul ignore next */ []));
+    parsedMinDate = computed(() => {
+        const min = this.minDate();
+        if (!min)
+            return null;
+        const d = parseFlexibleDate(min);
+        return d && isValid(d) ? (this.showTime() ? d : startOfDay(d)) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parsedMinDate" }] : /* istanbul ignore next */ []));
+    parsedMaxDate = computed(() => {
+        const max = this.maxDate();
+        if (!max)
+            return null;
+        const d = parseFlexibleDate(max);
+        return d && isValid(d) ? (this.showTime() ? d : endOfDay(d)) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parsedMaxDate" }] : /* istanbul ignore next */ []));
+    weekDayNames = computed(() => {
+        const names = [];
+        const firstDay = (this.firstDayOfWeek() % 7);
+        const base = startOfWeek(new Date(), { weekStartsOn: firstDay });
+        for (let i = 0; i < 7; i++) {
+            names.push(formatDate(addDays(base, i), 'EEEEEE'));
+        }
+        return names;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekDayNames" }] : /* istanbul ignore next */ []));
+    calendarDays = computed(() => {
+        const view = this.viewDate();
+        const sel = this.selectedDate();
+        const foc = this.focusedDate();
+        const min = this.parsedMinDate();
+        const max = this.parsedMaxDate();
+        const filter = this.filterDate();
+        const firstDay = (this.firstDayOfWeek() % 7);
+        const days = [];
+        const monthStart = startOfMonth(view);
+        const gridStart = startOfWeek(monthStart, { weekStartsOn: firstDay });
+        const today = startOfDay(new Date());
+        for (let i = 0; i < 42; i++) {
+            const current = addDays(gridStart, i);
+            const isCurrentMonth = isSameMonth(current, view);
+            const isToday = isSameDay(current, today);
+            const isSelected = sel ? isSameDay(current, sel) : false;
+            const isFocused = foc ? isSameDay(current, foc) : false;
+            let isDisabled = false;
+            if (min && isBefore(startOfDay(current), startOfDay(min))) {
+                isDisabled = true;
+            }
+            if (max && isAfter(startOfDay(current), startOfDay(max))) {
+                isDisabled = true;
+            }
+            if (filter && !filter(current)) {
+                isDisabled = true;
+            }
+            days.push({
+                date: current,
+                dayNumber: getDate(current),
+                isCurrentMonth,
+                isToday,
+                isSelected,
+                isDisabled,
+                isFocused
+            });
+        }
+        return days;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarDays" }] : /* istanbul ignore next */ []));
+    monthList = computed(() => {
+        const view = this.viewDate();
+        const sel = this.selectedDate();
+        const min = this.parsedMinDate();
+        const max = this.parsedMaxDate();
+        const months = [];
+        const now = new Date();
+        const currentMonthIdx = getMonth(now);
+        const viewYear = getYear(view);
+        for (let i = 0; i < 12; i++) {
+            const m = setMonth(view, i);
+            const mEnd = endOfMonth(m);
+            const mStart = startOfMonth(m);
+            let isDisabled = false;
+            if (min && isBefore(mEnd, startOfDay(min))) {
+                isDisabled = true;
+            }
+            if (max && isAfter(mStart, endOfDay(max))) {
+                isDisabled = true;
+            }
+            months.push({
+                name: formatDate(m, 'MMM'),
+                monthIndex: i,
+                isSelected: sel ? getYear(sel) === viewYear && getMonth(sel) === i : false,
+                isCurrentMonth: getYear(now) === viewYear && currentMonthIdx === i,
+                isDisabled
+            });
+        }
+        return months;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthList" }] : /* istanbul ignore next */ []));
+    yearList = computed(() => {
+        const viewYear = getYear(this.viewDate());
+        const sel = this.selectedDate();
+        const min = this.parsedMinDate();
+        const max = this.parsedMaxDate();
+        const startYear = Math.floor(viewYear / 12) * 12;
+        const years = [];
+        const currentYear = getYear(new Date());
+        for (let i = 0; i < 12; i++) {
+            const y = startYear + i;
+            let isDisabled = false;
+            if (min && y < getYear(min)) {
+                isDisabled = true;
+            }
+            if (max && y > getYear(max)) {
+                isDisabled = true;
+            }
+            years.push({
+                year: y,
+                isSelected: sel ? getYear(sel) === y : false,
+                isCurrentYear: currentYear === y,
+                isDisabled
+            });
+        }
+        return years;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearList" }] : /* istanbul ignore next */ []));
+    isPrevDisabled = computed(() => {
+        const min = this.parsedMinDate();
+        if (!min)
+            return false;
+        const view = this.viewDate();
+        const mode = this.viewMode();
+        if (mode === 'day') {
+            return !isAfter(startOfMonth(view), startOfMonth(min));
+        }
+        else if (mode === 'month') {
+            return getYear(view) <= getYear(min);
+        }
+        else {
+            const startYear = Math.floor(getYear(view) / 12) * 12;
+            return startYear <= getYear(min);
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPrevDisabled" }] : /* istanbul ignore next */ []));
+    isNextDisabled = computed(() => {
+        const max = this.parsedMaxDate();
+        if (!max)
+            return false;
+        const view = this.viewDate();
+        const mode = this.viewMode();
+        if (mode === 'day') {
+            return !isBefore(endOfMonth(view), endOfMonth(max));
+        }
+        else if (mode === 'month') {
+            return getYear(view) >= getYear(max);
+        }
+        else {
+            const startYear = Math.floor(getYear(view) / 12) * 12;
+            return startYear + 11 >= getYear(max);
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNextDisabled" }] : /* istanbul ignore next */ []));
+    isTodayDisabled = computed(() => {
+        return this.isDateDisabled(startOfDay(new Date()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTodayDisabled" }] : /* istanbul ignore next */ []));
+    isNowDisabled = computed(() => {
+        return this.isDateDisabled(new Date());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNowDisabled" }] : /* istanbul ignore next */ []));
+    currentHeaderLabel = computed(() => {
+        const view = this.viewDate();
+        const mode = this.viewMode();
+        if (mode === 'day') {
+            return formatDate(view, 'MMMM yyyy');
+        }
+        else if (mode === 'month') {
+            return formatDate(view, 'yyyy');
+        }
+        else {
+            const start = Math.floor(getYear(view) / 12) * 12;
+            return `${start} - ${start + 11}`;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentHeaderLabel" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor Callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Keep focused date synced with viewDate when viewDate changes
+        effect(() => {
+            if (!this.focusedDate()) {
+                this.focusedDate.set(this.viewDate());
+            }
+        });
+        // Keep inputText synced with selectedDate
+        effect(() => {
+            const sel = this.selectedDate();
+            if (sel && isValid(sel)) {
+                if (this.showTime()) {
+                    this.draftHour.set(getHours(sel));
+                    this.draftMinute.set(getMinutes(sel));
+                    this.draftSecond.set(getSeconds(sel));
+                }
+                this.inputText.set(formatDate(sel, this.effectiveDisplayFormat()));
+            }
+            else {
+                this.inputText.set('');
+            }
+        });
+    }
+    // ControlValueAccessor Implementation
+    writeValue(val) {
+        if (val === null || val === undefined || val === '') {
+            this.selectedDate.set(null);
+            return;
+        }
+        const parsed = parseFlexibleDate(val, [this.effectiveValueFormat(), this.effectiveDisplayFormat()]);
+        if (parsed && isValid(parsed)) {
+            this.selectedDate.set(parsed);
+            this.viewDate.set(parsed);
+            this.focusedDate.set(parsed);
+            if (this.showTime()) {
+                this.draftHour.set(getHours(parsed));
+                this.draftMinute.set(getMinutes(parsed));
+                this.draftSecond.set(getSeconds(parsed));
+            }
+        }
+        else {
+            this.selectedDate.set(null);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+    }
+    // Dropdown Controls
+    toggleOpen() {
+        if (this.effectiveDisabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.effectiveDisabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.viewMode.set('day');
+        const sel = this.selectedDate();
+        if (sel && isValid(sel)) {
+            this.viewDate.set(sel);
+            this.focusedDate.set(sel);
+            if (this.showTime()) {
+                this.draftHour.set(getHours(sel));
+                this.draftMinute.set(getMinutes(sel));
+                this.draftSecond.set(getSeconds(sel));
+            }
+        }
+        else {
+            const now = new Date();
+            this.viewDate.set(now);
+            this.focusedDate.set(now);
+            if (this.showTime()) {
+                this.draftHour.set(getHours(now));
+                this.draftMinute.set(getMinutes(now));
+                this.draftSecond.set(getSeconds(now));
+            }
+        }
+        this.opened.emit();
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.markAsTouched();
+        this.closed.emit();
+    }
+    // Navigation & Selection Logic
+    prevPeriod() {
+        if (this.isPrevDisabled())
+            return;
+        const mode = this.viewMode();
+        if (mode === 'day') {
+            this.viewDate.update((d) => subMonths(d, 1));
+        }
+        else if (mode === 'month') {
+            this.viewDate.update((d) => subYears(d, 1));
+        }
+        else {
+            this.viewDate.update((d) => subYears(d, 12));
+        }
+    }
+    nextPeriod() {
+        if (this.isNextDisabled())
+            return;
+        const mode = this.viewMode();
+        if (mode === 'day') {
+            this.viewDate.update((d) => addMonths(d, 1));
+        }
+        else if (mode === 'month') {
+            this.viewDate.update((d) => addYears(d, 1));
+        }
+        else {
+            this.viewDate.update((d) => addYears(d, 12));
+        }
+    }
+    toggleViewMode() {
+        const current = this.viewMode();
+        if (current === 'day') {
+            this.viewMode.set('month');
+        }
+        else if (current === 'month') {
+            this.viewMode.set('year');
+        }
+        else {
+            this.viewMode.set('day');
+        }
+    }
+    selectMonth(monthIdx) {
+        this.viewDate.update((d) => setMonth(d, monthIdx));
+        this.viewMode.set('day');
+    }
+    selectYear(year) {
+        this.viewDate.update((d) => setYear(d, year));
+        this.viewMode.set('month');
+    }
+    selectDay(day) {
+        if (day.isDisabled)
+            return;
+        if (this.showTime()) {
+            const baseDate = set(day.date, {
+                hours: this.draftHour(),
+                minutes: this.draftMinute(),
+                seconds: this.draftSecond()
+            });
+            this.commitSelection(baseDate);
+        }
+        else {
+            this.commitSelection(day.date);
+            this.close();
+        }
+    }
+    selectToday() {
+        const today = startOfDay(new Date());
+        if (this.isDateDisabled(today))
+            return;
+        this.commitSelection(today);
+        this.close();
+    }
+    selectNow() {
+        const now = new Date();
+        if (this.isDateDisabled(now))
+            return;
+        this.draftHour.set(getHours(now));
+        this.draftMinute.set(getMinutes(now));
+        this.draftSecond.set(getSeconds(now));
+        this.commitSelection(now);
+        this.close();
+    }
+    applySelection() {
+        const sel = this.selectedDate() || this.viewDate();
+        const finalVal = set(sel, {
+            hours: this.draftHour(),
+            minutes: this.draftMinute(),
+            seconds: this.draftSecond()
+        });
+        this.commitSelection(finalVal);
+        this.close();
+    }
+    // Time Manipulations
+    adjustHour(delta) {
+        this.draftHour.update((h) => (h + delta + 24) % 24);
+        if (this.showTime())
+            this.updateSelectedTime();
+    }
+    adjustMinute(delta) {
+        const step = this.minuteStep();
+        this.draftMinute.update((m) => (m + delta * step + 60) % 60);
+        if (this.showTime())
+            this.updateSelectedTime();
+    }
+    adjustSecond(delta) {
+        this.draftSecond.update((s) => (s + delta + 60) % 60);
+        if (this.showTime())
+            this.updateSelectedTime();
+    }
+    onHourInput(event) {
+        const inputEl = event.target;
+        const rawVal = inputEl.value.replace(/\D/g, '');
+        if (rawVal === '')
+            return;
+        let num = parseInt(rawVal, 10);
+        if (isNaN(num))
+            return;
+        if (this.use24Hour()) {
+            num = Math.max(0, Math.min(23, num));
+            this.draftHour.set(num);
+        }
+        else {
+            num = Math.max(1, Math.min(12, num));
+            const isPm = this.meridiem() === 'PM';
+            let h24;
+            if (isPm) {
+                h24 = num === 12 ? 12 : num + 12;
+            }
+            else {
+                h24 = num === 12 ? 0 : num;
+            }
+            this.draftHour.set(h24);
+        }
+        this.updateSelectedTime();
+    }
+    onHourBlur(event) {
+        const inputEl = event.target;
+        inputEl.value = this.displayHour();
+    }
+    onMinuteInput(event) {
+        const inputEl = event.target;
+        const rawVal = inputEl.value.replace(/\D/g, '');
+        if (rawVal === '')
+            return;
+        let num = parseInt(rawVal, 10);
+        if (isNaN(num))
+            return;
+        num = Math.max(0, Math.min(59, num));
+        this.draftMinute.set(num);
+        this.updateSelectedTime();
+    }
+    onMinuteBlur(event) {
+        const inputEl = event.target;
+        inputEl.value = this.displayMinute();
+    }
+    onSecondInput(event) {
+        const inputEl = event.target;
+        const rawVal = inputEl.value.replace(/\D/g, '');
+        if (rawVal === '')
+            return;
+        let num = parseInt(rawVal, 10);
+        if (isNaN(num))
+            return;
+        num = Math.max(0, Math.min(59, num));
+        this.draftSecond.set(num);
+        this.updateSelectedTime();
+    }
+    onSecondBlur(event) {
+        const inputEl = event.target;
+        inputEl.value = this.displaySecond();
+    }
+    onTimeInputKeydown(event, type) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (type === 'hour')
+                this.adjustHour(1);
+            else if (type === 'minute')
+                this.adjustMinute(1);
+            else if (type === 'second')
+                this.adjustSecond(1);
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (type === 'hour')
+                this.adjustHour(-1);
+            else if (type === 'minute')
+                this.adjustMinute(-1);
+            else if (type === 'second')
+                this.adjustSecond(-1);
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            this.applySelection();
+        }
+    }
+    toggleMeridiem() {
+        this.draftHour.update((h) => (h >= 12 ? h - 12 : h + 12));
+        this.updateSelectedTime();
+    }
+    updateSelectedTime() {
+        const current = this.selectedDate() || this.viewDate();
+        const updated = set(current, {
+            hours: this.draftHour(),
+            minutes: this.draftMinute(),
+            seconds: this.draftSecond()
+        });
+        this.draftHour.set(getHours(updated));
+        this.draftMinute.set(getMinutes(updated));
+        this.draftSecond.set(getSeconds(updated));
+        this.commitSelection(updated);
+    }
+    onClear(event) {
+        event.stopPropagation();
+        if (this.effectiveDisabled())
+            return;
+        this.selectedDate.set(null);
+        this.inputText.set('');
+        this.onChange(null);
+        this.dateChange.emit(null);
+    }
+    // Direct typing in trigger input field
+    onInputChange(event) {
+        const val = event.target.value;
+        this.inputText.set(val);
+        if (!val.trim()) {
+            this.selectedDate.set(null);
+            this.onChange(null);
+            this.dateChange.emit(null);
+            return;
+        }
+        const parsed = parseFlexibleDate(val, [this.effectiveDisplayFormat(), this.effectiveValueFormat()]);
+        if (parsed && isValid(parsed) && !this.isDateDisabled(parsed)) {
+            this.selectedDate.set(parsed);
+            this.viewDate.set(parsed);
+            this.focusedDate.set(parsed);
+            if (this.showTime()) {
+                this.draftHour.set(getHours(parsed));
+                this.draftMinute.set(getMinutes(parsed));
+                this.draftSecond.set(getSeconds(parsed));
+            }
+            const outValue = this.formatOutputValue(parsed);
+            this.onChange(outValue);
+            this.dateChange.emit(outValue);
+        }
+    }
+    onInputFocus() {
+        this.isFocused.set(true);
+    }
+    onInputBlur(event) {
+        this.isFocused.set(false);
+        const sel = this.selectedDate();
+        if (sel && isValid(sel)) {
+            this.inputText.set(formatDate(sel, this.effectiveDisplayFormat()));
+        }
+        else {
+            this.inputText.set('');
+        }
+        this.markAsTouched();
+    }
+    onInputKeyDown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const val = this.inputText();
+            if (val.trim()) {
+                const parsed = parseFlexibleDate(val, [this.effectiveDisplayFormat(), this.effectiveValueFormat()]);
+                if (parsed && isValid(parsed) && !this.isDateDisabled(parsed)) {
+                    if (this.showTime()) {
+                        this.draftHour.set(getHours(parsed));
+                        this.draftMinute.set(getMinutes(parsed));
+                        this.draftSecond.set(getSeconds(parsed));
+                    }
+                    this.commitSelection(parsed);
+                }
+            }
+            this.close();
+        }
+        else if (event.key === 'ArrowDown' || (event.altKey && event.key === 'ArrowDown')) {
+            if (!this.isOpen()) {
+                event.preventDefault();
+                this.open();
+            }
+        }
+        else if (event.key === 'Escape') {
+            if (this.isOpen()) {
+                event.preventDefault();
+                this.close();
+            }
+        }
+    }
+    commitSelection(date) {
+        this.selectedDate.set(date);
+        const outValue = this.formatOutputValue(date);
+        this.onChange(outValue);
+        this.dateChange.emit(outValue);
+    }
+    formatOutputValue(date) {
+        const fmt = this.effectiveValueFormat();
+        if (fmt === 'date') {
+            return date;
+        }
+        else if (fmt === 'iso') {
+            return date.toISOString();
+        }
+        else {
+            return formatDate(date, fmt);
+        }
+    }
+    isDateDisabled(date) {
+        const min = this.parsedMinDate();
+        const max = this.parsedMaxDate();
+        const filter = this.filterDate();
+        if (min && isBefore(startOfDay(date), startOfDay(min)))
+            return true;
+        if (max && isAfter(startOfDay(date), startOfDay(max)))
+            return true;
+        if (filter && !filter(date))
+            return true;
+        return false;
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    // Keyboard accessibility
+    onKeyDown(event) {
+        if (this.effectiveDisabled())
+            return;
+        if (!this.isOpen()) {
+            if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
+                event.preventDefault();
+                this.open();
+            }
+            return;
+        }
+        const currentFocused = this.focusedDate() || this.viewDate();
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.navigateKeyboardDay(subDays(currentFocused, 1));
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.navigateKeyboardDay(addDays(currentFocused, 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.navigateKeyboardDay(subWeeks(currentFocused, 1));
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.navigateKeyboardDay(addWeeks(currentFocused, 1));
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (currentFocused && !this.isDateDisabled(currentFocused)) {
+                    if (this.showTime()) {
+                        const baseDate = set(currentFocused, {
+                            hours: this.draftHour(),
+                            minutes: this.draftMinute(),
+                            seconds: this.draftSecond()
+                        });
+                        this.commitSelection(baseDate);
+                    }
+                    else {
+                        this.commitSelection(currentFocused);
+                        this.close();
+                    }
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                this.triggerEl?.nativeElement.focus();
+                break;
+            case 'Tab':
+                this.close();
+                break;
+        }
+    }
+    navigateKeyboardDay(newDate) {
+        if (!isSameMonth(newDate, this.viewDate())) {
+            this.viewDate.set(newDate);
+        }
+        this.focusedDate.set(newDate);
+    }
+    onDocumentClick(event) {
+        if (!this.isOpen())
+            return;
+        const target = event.target;
+        const clickedInsideHost = this.elementRef.nativeElement.contains(target);
+        const clickedInsideOverlay = target instanceof Element && !!target.closest('.datepicker-dropdown-panel');
+        if (!clickedInsideHost && !clickedInsideOverlay) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: DatePickerComponent, isStandalone: true, selector: "talos-date-picker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, use24Hour: { classPropertyName: "use24Hour", publicName: "use24Hour", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, filterDate: { classPropertyName: "filterDate", publicName: "filterDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", opened: "opened", closed: "closed" }, host: { listeners: { "keydown": "onKeyDown($event)", "document:click": "onDocumentClick($event)" }, properties: { "class.is-open": "isOpen()", "class.is-disabled": "effectiveDisabled()", "class.has-label": "!!label()", "class.is-floating": "isFloatingMode()", "class.is-floated": "isFloated()", "class.datepicker-sm": "size() === \"sm\"", "class.datepicker-md": "size() === \"md\"", "class.datepicker-lg": "size() === \"lg\"" }, classAttribute: "talos-datepicker-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatePickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "@if (label() && !isFloatingMode()) {\n  <label class=\"talos-field-label\" (click)=\"toggleOpen()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"required-star\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"datepicker-control-container\">\n  <!-- DatePicker Input Trigger -->\n  <div #triggerEl cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"datepicker-trigger\" role=\"combobox\"\n    [attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'dialog'\" [attr.aria-controls]=\"dialogId\"\n    [attr.aria-disabled]=\"effectiveDisabled()\">\n    <div class=\"datepicker-value-container\">\n      <svg class=\"datepicker-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n        aria-hidden=\"true\" (click)=\"toggleOpen()\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n        @if (showTime()) {\n        <circle cx=\"12\" cy=\"15\" r=\"2.5\"></circle>\n        <path d=\"M12 14v1.5l1 0.5\"></path>\n        }\n      </svg>\n      <input #inputEl type=\"text\" class=\"datepicker-input\" [value]=\"inputText()\" [placeholder]=\"isFloatingMode() && !isFloated() ? '' : placeholder()\"\n        [disabled]=\"effectiveDisabled()\" (input)=\"onInputChange($event)\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" aria-label=\"Date input\" />\n    </div>\n\n    @if (label() && isFloatingMode()) {\n      <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleOpen()\">\n        {{ label() }}\n        @if (required()) {\n          <span class=\"required-star\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n  <div class=\"datepicker-actions\">\n    @if (clearable() && inputText() && !effectiveDisabled()) {\n    <button type=\"button\" class=\"datepicker-clear-btn\" aria-label=\"Clear date\" title=\"Clear date\"\n      (click)=\"onClear($event)\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n      </svg>\n    </button>\n    }\n  </div>\n</div>\n\n<!-- Calendar Dropdown Dialog -->\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n  [cdkConnectedOverlayLockPosition]=\"false\" [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayPush]=\"true\" (detach)=\"close()\">\n  <div class=\"datepicker-dropdown-panel\" [class.datetime-dropdown]=\"showTime()\" [id]=\"dialogId\" role=\"dialog\"\n    aria-label=\"Date Picker Calendar\">\n    <!-- Calendar Header Navigation -->\n    <div class=\"datepicker-header\">\n      <button type=\"button\" class=\"datepicker-nav-btn\" aria-label=\"Previous period\" title=\"Previous period\"\n        [disabled]=\"isPrevDisabled()\" (click)=\"prevPeriod()\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <polyline points=\"15 18 9 12 15 6\"></polyline>\n        </svg>\n      </button>\n\n      <button type=\"button\" class=\"datepicker-view-btn\" (click)=\"toggleViewMode()\">\n        {{ currentHeaderLabel() }}\n      </button>\n\n      <button type=\"button\" class=\"datepicker-nav-btn\" aria-label=\"Next period\" title=\"Next period\"\n        [disabled]=\"isNextDisabled()\" (click)=\"nextPeriod()\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <polyline points=\"9 18 15 12 9 6\"></polyline>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Day View -->\n    @if (viewMode() === 'day') {\n    <div class=\"datepicker-body\">\n      <div class=\"datepicker-weekdays\">\n        @for (dayName of weekDayNames(); track dayName) {\n        <span class=\"weekday-cell\">{{ dayName }}</span>\n        }\n      </div>\n\n      <div class=\"datepicker-days-grid\">\n        @for (day of calendarDays(); track day.date.valueOf()) {\n        <button type=\"button\" class=\"day-cell\" [class.is-other-month]=\"!day.isCurrentMonth\"\n          [class.is-today]=\"day.isToday\" [class.is-selected]=\"day.isSelected\" [class.is-disabled]=\"day.isDisabled\"\n          [class.is-focused]=\"day.isFocused\" [disabled]=\"day.isDisabled\" (click)=\"selectDay(day)\">\n          {{ day.dayNumber }}\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Month View -->\n    @if (viewMode() === 'month') {\n    <div class=\"datepicker-months-grid\">\n      @for (month of monthList(); track month.monthIndex) {\n      <button type=\"button\" class=\"month-cell\" [class.is-selected]=\"month.isSelected\"\n        [class.is-current]=\"month.isCurrentMonth\" [class.is-disabled]=\"month.isDisabled\" [disabled]=\"month.isDisabled\"\n        (click)=\"selectMonth(month.monthIndex)\">\n        {{ month.name }}\n      </button>\n      }\n    </div>\n    }\n\n    <!-- Year View -->\n    @if (viewMode() === 'year') {\n    <div class=\"datepicker-years-grid\">\n      @for (yr of yearList(); track yr.year) {\n      <button type=\"button\" class=\"year-cell\" [class.is-selected]=\"yr.isSelected\" [class.is-current]=\"yr.isCurrentYear\"\n        [class.is-disabled]=\"yr.isDisabled\" [disabled]=\"yr.isDisabled\" (click)=\"selectYear(yr.year)\">\n        {{ yr.year }}\n      </button>\n      }\n    </div>\n    }\n\n    <!-- Optional Time Picker Controls Bar -->\n    @if (showTime()) {\n    <div class=\"time-picker-section\">\n      <div class=\"time-picker-label\">Time</div>\n      <div class=\"time-picker-controls\">\n        <!-- Hour Spinner -->\n        <div class=\"time-spinner\">\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Increase hour\" (click)=\"adjustHour(1)\"\n            tabindex=\"-1\">\u25B2</button>\n          <input type=\"text\" inputmode=\"numeric\" class=\"spinner-input\" [value]=\"displayHour()\"\n            (input)=\"onHourInput($event)\" (blur)=\"onHourBlur($event)\" (keydown)=\"onTimeInputKeydown($event, 'hour')\"\n            aria-label=\"Hour input\" />\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Decrease hour\" (click)=\"adjustHour(-1)\"\n            tabindex=\"-1\">\u25BC</button>\n        </div>\n\n        <span class=\"time-separator\">:</span>\n\n        <!-- Minute Spinner -->\n        <div class=\"time-spinner\">\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Increase minute\" (click)=\"adjustMinute(1)\"\n            tabindex=\"-1\">\u25B2</button>\n          <input type=\"text\" inputmode=\"numeric\" class=\"spinner-input\" [value]=\"displayMinute()\"\n            (input)=\"onMinuteInput($event)\" (blur)=\"onMinuteBlur($event)\"\n            (keydown)=\"onTimeInputKeydown($event, 'minute')\" aria-label=\"Minute input\" />\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Decrease minute\" (click)=\"adjustMinute(-1)\"\n            tabindex=\"-1\">\u25BC</button>\n        </div>\n\n        <!-- Second Spinner (Optional) -->\n        @if (showSeconds()) {\n        <span class=\"time-separator\">:</span>\n        <div class=\"time-spinner\">\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Increase second\" (click)=\"adjustSecond(1)\"\n            tabindex=\"-1\">\u25B2</button>\n          <input type=\"text\" inputmode=\"numeric\" class=\"spinner-input\" [value]=\"displaySecond()\"\n            (input)=\"onSecondInput($event)\" (blur)=\"onSecondBlur($event)\"\n            (keydown)=\"onTimeInputKeydown($event, 'second')\" aria-label=\"Second input\" />\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Decrease second\" (click)=\"adjustSecond(-1)\"\n            tabindex=\"-1\">\u25BC</button>\n        </div>\n        }\n\n        <!-- Meridiem Toggle (12h format) -->\n        @if (!use24Hour()) {\n        <button type=\"button\" class=\"meridiem-toggle-btn\" (click)=\"toggleMeridiem()\">\n          {{ meridiem() }}\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Footer Actions -->\n    <div class=\"datepicker-footer\" [class.datetime-footer]=\"showTime()\">\n      @if (showTime()) {\n      <button type=\"button\" class=\"datepicker-now-btn\" [disabled]=\"isNowDisabled()\" (click)=\"selectNow()\">\n        Now\n      </button>\n      <button type=\"button\" class=\"datepicker-apply-btn\" (click)=\"applySelection()\">\n        Apply\n      </button>\n      } @else {\n      <button type=\"button\" class=\"datepicker-today-btn\" [disabled]=\"isTodayDisabled()\" (click)=\"selectToday()\">\n        Today\n      </button>\n      }\n    </div>\n  </div>\n</ng-template>\n</div>", styles: [":host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--datepicker-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--datepicker-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--datepicker-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--datepicker-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--datepicker-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--datepicker-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--datepicker-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--datepicker-radius: var(--talos-border-radius, .375rem);--datepicker-height: var(--talos-control-height, 2.25rem);--datepicker-padding-x: var(--talos-control-padding-x, .625rem);--datepicker-font-size: var(--talos-control-font-size, .8125rem);--datepicker-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--datepicker-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--datepicker-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));--datepicker-primary: var(--talos-primary-color, var(--primary-color, #2563eb));--datepicker-primary-hover: var(--talos-primary-hover, var(--primary-hover, #1d4ed8));--datepicker-primary-light: var(--talos-primary-light, var(--primary-light, #eff6ff));--datepicker-primary-light-hover: var(--talos-primary-light-hover, var(--primary-light-hover, #dbeafe))}:host.datepicker-sm{--datepicker-height: 2rem;--datepicker-padding-x: .5rem;--datepicker-font-size: .8125rem;--datepicker-radius: .25rem}:host.datepicker-md{--datepicker-height: 2.25rem;--datepicker-padding-x: .625rem;--datepicker-font-size: .8125rem;--datepicker-radius: .375rem}:host.datepicker-lg{--datepicker-height: 2.625rem;--datepicker-padding-x: .75rem;--datepicker-font-size: .875rem;--datepicker-radius: .375rem}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .datepicker-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.datepicker-control-container{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label{position:absolute;left:calc(var(--datepicker-padding-x, .625rem) + 1.25rem + .375rem);top:calc(var(--datepicker-height) / 2);transform:translateY(-50%);font-size:var(--datepicker-font-size, .8125rem);font-weight:500;color:var(--datepicker-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--datepicker-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1),left .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated{top:0;left:var(--datepicker-padding-x, .625rem);transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-floated) .talos-floating-label.is-floated{color:var(--datepicker-primary, #2563eb)}.datepicker-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--datepicker-height);min-height:var(--datepicker-height);padding:0 var(--datepicker-padding-x);background-color:var(--datepicker-bg);border:1px solid var(--datepicker-border);border-radius:var(--datepicker-radius);color:var(--datepicker-color);font-size:var(--datepicker-font-size);line-height:1.25rem;cursor:text;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.datepicker-trigger:hover:not([aria-disabled=true]){border-color:var(--datepicker-border-hover)}.datepicker-trigger:focus-within,.datepicker-trigger:focus-visible,:host(.is-open) .datepicker-trigger{border-color:var(--datepicker-border-focus);box-shadow:var(--datepicker-shadow-focus)}.datepicker-value-container{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem}.datepicker-icon{width:1rem;height:1rem;color:var(--talos-text-muted, #64748b);flex-shrink:0;cursor:pointer}.datepicker-input{flex:1;min-width:0;width:100%;height:100%;background:transparent;border:none;outline:none;padding:0;margin:0;font-family:inherit;font-size:var(--datepicker-font-size);font-weight:500;color:var(--datepicker-color);line-height:1.25rem}.datepicker-input::placeholder{color:var(--datepicker-placeholder-color);opacity:1;font-weight:400}.datepicker-input:disabled{cursor:not-allowed}.datepicker-actions{display:flex;align-items:center;margin-left:.375rem;flex-shrink:0}.datepicker-clear-btn{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;padding:0;background:transparent;border:none;border-radius:50%;color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:color .15s ease,background-color .15s ease}.datepicker-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.datepicker-clear-btn svg{width:.75rem;height:.75rem}.datepicker-dropdown-panel{--datepicker-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, var(--card-bg, #ffffff)));--datepicker-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--datepicker-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));--datepicker-radius: var(--talos-border-radius, var(--border-radius, .375rem));--datepicker-color: var(--talos-text-color, var(--text-color, #0f172a));--datepicker-primary: var(--talos-primary-color, var(--primary-color, #2563eb));--datepicker-primary-hover: var(--talos-primary-hover, var(--primary-hover, #1d4ed8));--datepicker-primary-light: var(--talos-primary-light, var(--primary-light, #eff6ff));--datepicker-primary-light-hover: var(--talos-primary-light-hover, var(--primary-light-hover, #dbeafe));z-index:1000;width:18.5rem;background-color:var(--datepicker-dropdown-bg);border:1px solid var(--datepicker-dropdown-border);border-radius:var(--datepicker-radius);box-shadow:var(--datepicker-dropdown-shadow);color:var(--datepicker-color);padding:.75rem;display:flex;flex-direction:column;box-sizing:border-box;animation:datepickerSlideIn .12s cubic-bezier(0,0,.2,1)}@keyframes datepickerSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.625rem}.datepicker-view-btn{background:transparent;border:none;font-size:.875rem;font-weight:600;color:var(--datepicker-color);padding:.25rem .5rem;border-radius:.25rem;cursor:pointer;transition:background-color .15s ease}.datepicker-view-btn:hover{background-color:var(--datepicker-primary-light, #f1f5f9)}.datepicker-nav-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;background:transparent;border:1px solid transparent;border-radius:.25rem;color:var(--talos-text-muted, #64748b);cursor:pointer;transition:background-color .15s ease,color .15s ease}.datepicker-nav-btn:hover{background-color:var(--datepicker-primary-light, #f1f5f9);color:var(--datepicker-color)}.datepicker-nav-btn svg{width:1rem;height:1rem}.datepicker-body{display:flex;flex-direction:column}.datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:.375rem}.datepicker-weekdays .weekday-cell{font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #94a3b8);padding:.25rem 0;text-transform:uppercase}.datepicker-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem}.day-cell{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;margin:0 auto;font-size:.8125rem;font-weight:400;color:var(--datepicker-color);background:transparent;border:1px solid transparent;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.day-cell:hover:not(:disabled){background-color:var(--datepicker-primary-light, #f1f5f9)}.day-cell.is-other-month{color:var(--talos-text-muted, #cbd5e1);opacity:.5}.day-cell.is-today{font-weight:700;color:var(--datepicker-primary);border-color:var(--datepicker-primary-hover, #bfdbfe)}.day-cell.is-selected{background-color:var(--datepicker-primary)!important;color:#fff!important;font-weight:600}.day-cell.is-focused:not(.is-selected){background-color:var(--datepicker-primary-light);border-color:var(--datepicker-primary)}.day-cell:disabled,.day-cell.is-disabled{color:var(--talos-text-muted, #cbd5e1);cursor:not-allowed;background-color:transparent;opacity:.35}.datepicker-months-grid,.datepicker-years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.375rem 0}.month-cell,.year-cell{height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:500;color:var(--datepicker-color);background:transparent;border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.375rem;cursor:pointer;transition:all .15s ease}.month-cell:hover,.year-cell:hover{background-color:var(--datepicker-primary-light, #f1f5f9);border-color:var(--talos-border-hover, #cbd5e1)}.month-cell.is-current,.year-cell.is-current{font-weight:700;color:var(--datepicker-primary);border-color:var(--datepicker-primary-hover, #bfdbfe)}.month-cell.is-selected,.year-cell.is-selected{background-color:var(--datepicker-primary)!important;color:#fff!important;border-color:var(--datepicker-primary)!important}.time-picker-section{display:flex;align-items:center;justify-content:space-between;margin-top:.625rem;padding-top:.625rem;border-top:1px solid var(--talos-border-color, #f1f5f9)}.time-picker-label{font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}.time-picker-controls{display:flex;align-items:center;gap:.25rem}.time-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.25rem;padding:.125rem;width:2.25rem}.spinner-btn{background:transparent;border:none;font-size:.625rem;color:var(--talos-text-muted, #64748b);cursor:pointer;padding:0;line-height:1;width:100%;text-align:center}.spinner-btn:hover{color:var(--datepicker-primary)}.spinner-input{width:100%;background:transparent;border:none;outline:none;font-size:.8125rem;font-weight:600;color:var(--datepicker-color);text-align:center;line-height:1.1;padding:.125rem 0;font-family:inherit;border-radius:.125rem;transition:background-color .15s ease,box-shadow .15s ease}.spinner-input:focus{background-color:var(--talos-card-bg, #ffffff);box-shadow:0 0 0 1px var(--datepicker-primary)}.time-separator{font-weight:700;color:var(--talos-text-muted, #64748b);font-size:.875rem}.meridiem-toggle-btn{height:2.125rem;padding:0 .5rem;font-size:.75rem;font-weight:600;color:var(--datepicker-primary);background-color:var(--datepicker-primary-light);border:1px solid var(--talos-border-color, #bfdbfe);border-radius:.25rem;cursor:pointer;transition:all .15s ease}.meridiem-toggle-btn:hover{background-color:var(--datepicker-primary-light-hover, #dbeafe)}.datepicker-footer{display:flex;align-items:center;justify-content:flex-end;margin-top:.625rem;padding-top:.5rem;border-top:1px solid var(--talos-border-color, #f1f5f9)}.datepicker-footer.datetime-footer{justify-content:space-between}.datepicker-today-btn,.datepicker-now-btn{background:transparent;border:none;font-size:.75rem;font-weight:600;color:var(--datepicker-primary);cursor:pointer;padding:.25rem .5rem;border-radius:.25rem}.datepicker-today-btn:hover,.datepicker-now-btn:hover{background-color:var(--datepicker-primary-light)}.datepicker-now-btn{color:var(--talos-text-muted, #64748b)}.datepicker-now-btn:hover{background-color:var(--datepicker-primary-light, #f1f5f9);color:var(--datepicker-color)}.datepicker-apply-btn{background-color:var(--datepicker-primary);color:#fff;border:none;font-size:.75rem;font-weight:600;cursor:pointer;padding:.25rem .75rem;border-radius:.25rem;transition:background-color .15s ease}.datepicker-apply-btn:hover{background-color:var(--datepicker-primary-hover)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-date-picker', imports: [OverlayModule, CdkConnectedOverlay, CdkOverlayOrigin], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        'class': 'talos-datepicker-host',
+                        '[class.is-open]': 'isOpen()',
+                        '[class.is-disabled]': 'effectiveDisabled()',
+                        '[class.has-label]': '!!label()',
+                        '[class.is-floating]': 'isFloatingMode()',
+                        '[class.is-floated]': 'isFloated()',
+                        '[class.datepicker-sm]': 'size() === "sm"',
+                        '[class.datepicker-md]': 'size() === "md"',
+                        '[class.datepicker-lg]': 'size() === "lg"',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(document:click)': 'onDocumentClick($event)'
+                    }, template: "@if (label() && !isFloatingMode()) {\n  <label class=\"talos-field-label\" (click)=\"toggleOpen()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"required-star\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"datepicker-control-container\">\n  <!-- DatePicker Input Trigger -->\n  <div #triggerEl cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"datepicker-trigger\" role=\"combobox\"\n    [attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'dialog'\" [attr.aria-controls]=\"dialogId\"\n    [attr.aria-disabled]=\"effectiveDisabled()\">\n    <div class=\"datepicker-value-container\">\n      <svg class=\"datepicker-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n        aria-hidden=\"true\" (click)=\"toggleOpen()\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n        @if (showTime()) {\n        <circle cx=\"12\" cy=\"15\" r=\"2.5\"></circle>\n        <path d=\"M12 14v1.5l1 0.5\"></path>\n        }\n      </svg>\n      <input #inputEl type=\"text\" class=\"datepicker-input\" [value]=\"inputText()\" [placeholder]=\"isFloatingMode() && !isFloated() ? '' : placeholder()\"\n        [disabled]=\"effectiveDisabled()\" (input)=\"onInputChange($event)\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" aria-label=\"Date input\" />\n    </div>\n\n    @if (label() && isFloatingMode()) {\n      <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleOpen()\">\n        {{ label() }}\n        @if (required()) {\n          <span class=\"required-star\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n  <div class=\"datepicker-actions\">\n    @if (clearable() && inputText() && !effectiveDisabled()) {\n    <button type=\"button\" class=\"datepicker-clear-btn\" aria-label=\"Clear date\" title=\"Clear date\"\n      (click)=\"onClear($event)\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n      </svg>\n    </button>\n    }\n  </div>\n</div>\n\n<!-- Calendar Dropdown Dialog -->\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n  [cdkConnectedOverlayLockPosition]=\"false\" [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayPush]=\"true\" (detach)=\"close()\">\n  <div class=\"datepicker-dropdown-panel\" [class.datetime-dropdown]=\"showTime()\" [id]=\"dialogId\" role=\"dialog\"\n    aria-label=\"Date Picker Calendar\">\n    <!-- Calendar Header Navigation -->\n    <div class=\"datepicker-header\">\n      <button type=\"button\" class=\"datepicker-nav-btn\" aria-label=\"Previous period\" title=\"Previous period\"\n        [disabled]=\"isPrevDisabled()\" (click)=\"prevPeriod()\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <polyline points=\"15 18 9 12 15 6\"></polyline>\n        </svg>\n      </button>\n\n      <button type=\"button\" class=\"datepicker-view-btn\" (click)=\"toggleViewMode()\">\n        {{ currentHeaderLabel() }}\n      </button>\n\n      <button type=\"button\" class=\"datepicker-nav-btn\" aria-label=\"Next period\" title=\"Next period\"\n        [disabled]=\"isNextDisabled()\" (click)=\"nextPeriod()\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <polyline points=\"9 18 15 12 9 6\"></polyline>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Day View -->\n    @if (viewMode() === 'day') {\n    <div class=\"datepicker-body\">\n      <div class=\"datepicker-weekdays\">\n        @for (dayName of weekDayNames(); track dayName) {\n        <span class=\"weekday-cell\">{{ dayName }}</span>\n        }\n      </div>\n\n      <div class=\"datepicker-days-grid\">\n        @for (day of calendarDays(); track day.date.valueOf()) {\n        <button type=\"button\" class=\"day-cell\" [class.is-other-month]=\"!day.isCurrentMonth\"\n          [class.is-today]=\"day.isToday\" [class.is-selected]=\"day.isSelected\" [class.is-disabled]=\"day.isDisabled\"\n          [class.is-focused]=\"day.isFocused\" [disabled]=\"day.isDisabled\" (click)=\"selectDay(day)\">\n          {{ day.dayNumber }}\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Month View -->\n    @if (viewMode() === 'month') {\n    <div class=\"datepicker-months-grid\">\n      @for (month of monthList(); track month.monthIndex) {\n      <button type=\"button\" class=\"month-cell\" [class.is-selected]=\"month.isSelected\"\n        [class.is-current]=\"month.isCurrentMonth\" [class.is-disabled]=\"month.isDisabled\" [disabled]=\"month.isDisabled\"\n        (click)=\"selectMonth(month.monthIndex)\">\n        {{ month.name }}\n      </button>\n      }\n    </div>\n    }\n\n    <!-- Year View -->\n    @if (viewMode() === 'year') {\n    <div class=\"datepicker-years-grid\">\n      @for (yr of yearList(); track yr.year) {\n      <button type=\"button\" class=\"year-cell\" [class.is-selected]=\"yr.isSelected\" [class.is-current]=\"yr.isCurrentYear\"\n        [class.is-disabled]=\"yr.isDisabled\" [disabled]=\"yr.isDisabled\" (click)=\"selectYear(yr.year)\">\n        {{ yr.year }}\n      </button>\n      }\n    </div>\n    }\n\n    <!-- Optional Time Picker Controls Bar -->\n    @if (showTime()) {\n    <div class=\"time-picker-section\">\n      <div class=\"time-picker-label\">Time</div>\n      <div class=\"time-picker-controls\">\n        <!-- Hour Spinner -->\n        <div class=\"time-spinner\">\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Increase hour\" (click)=\"adjustHour(1)\"\n            tabindex=\"-1\">\u25B2</button>\n          <input type=\"text\" inputmode=\"numeric\" class=\"spinner-input\" [value]=\"displayHour()\"\n            (input)=\"onHourInput($event)\" (blur)=\"onHourBlur($event)\" (keydown)=\"onTimeInputKeydown($event, 'hour')\"\n            aria-label=\"Hour input\" />\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Decrease hour\" (click)=\"adjustHour(-1)\"\n            tabindex=\"-1\">\u25BC</button>\n        </div>\n\n        <span class=\"time-separator\">:</span>\n\n        <!-- Minute Spinner -->\n        <div class=\"time-spinner\">\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Increase minute\" (click)=\"adjustMinute(1)\"\n            tabindex=\"-1\">\u25B2</button>\n          <input type=\"text\" inputmode=\"numeric\" class=\"spinner-input\" [value]=\"displayMinute()\"\n            (input)=\"onMinuteInput($event)\" (blur)=\"onMinuteBlur($event)\"\n            (keydown)=\"onTimeInputKeydown($event, 'minute')\" aria-label=\"Minute input\" />\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Decrease minute\" (click)=\"adjustMinute(-1)\"\n            tabindex=\"-1\">\u25BC</button>\n        </div>\n\n        <!-- Second Spinner (Optional) -->\n        @if (showSeconds()) {\n        <span class=\"time-separator\">:</span>\n        <div class=\"time-spinner\">\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Increase second\" (click)=\"adjustSecond(1)\"\n            tabindex=\"-1\">\u25B2</button>\n          <input type=\"text\" inputmode=\"numeric\" class=\"spinner-input\" [value]=\"displaySecond()\"\n            (input)=\"onSecondInput($event)\" (blur)=\"onSecondBlur($event)\"\n            (keydown)=\"onTimeInputKeydown($event, 'second')\" aria-label=\"Second input\" />\n          <button type=\"button\" class=\"spinner-btn\" aria-label=\"Decrease second\" (click)=\"adjustSecond(-1)\"\n            tabindex=\"-1\">\u25BC</button>\n        </div>\n        }\n\n        <!-- Meridiem Toggle (12h format) -->\n        @if (!use24Hour()) {\n        <button type=\"button\" class=\"meridiem-toggle-btn\" (click)=\"toggleMeridiem()\">\n          {{ meridiem() }}\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Footer Actions -->\n    <div class=\"datepicker-footer\" [class.datetime-footer]=\"showTime()\">\n      @if (showTime()) {\n      <button type=\"button\" class=\"datepicker-now-btn\" [disabled]=\"isNowDisabled()\" (click)=\"selectNow()\">\n        Now\n      </button>\n      <button type=\"button\" class=\"datepicker-apply-btn\" (click)=\"applySelection()\">\n        Apply\n      </button>\n      } @else {\n      <button type=\"button\" class=\"datepicker-today-btn\" [disabled]=\"isTodayDisabled()\" (click)=\"selectToday()\">\n        Today\n      </button>\n      }\n    </div>\n  </div>\n</ng-template>\n</div>", styles: [":host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--datepicker-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--datepicker-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--datepicker-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--datepicker-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--datepicker-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--datepicker-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--datepicker-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--datepicker-radius: var(--talos-border-radius, .375rem);--datepicker-height: var(--talos-control-height, 2.25rem);--datepicker-padding-x: var(--talos-control-padding-x, .625rem);--datepicker-font-size: var(--talos-control-font-size, .8125rem);--datepicker-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--datepicker-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--datepicker-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));--datepicker-primary: var(--talos-primary-color, var(--primary-color, #2563eb));--datepicker-primary-hover: var(--talos-primary-hover, var(--primary-hover, #1d4ed8));--datepicker-primary-light: var(--talos-primary-light, var(--primary-light, #eff6ff));--datepicker-primary-light-hover: var(--talos-primary-light-hover, var(--primary-light-hover, #dbeafe))}:host.datepicker-sm{--datepicker-height: 2rem;--datepicker-padding-x: .5rem;--datepicker-font-size: .8125rem;--datepicker-radius: .25rem}:host.datepicker-md{--datepicker-height: 2.25rem;--datepicker-padding-x: .625rem;--datepicker-font-size: .8125rem;--datepicker-radius: .375rem}:host.datepicker-lg{--datepicker-height: 2.625rem;--datepicker-padding-x: .75rem;--datepicker-font-size: .875rem;--datepicker-radius: .375rem}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .datepicker-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.datepicker-control-container{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label{position:absolute;left:calc(var(--datepicker-padding-x, .625rem) + 1.25rem + .375rem);top:calc(var(--datepicker-height) / 2);transform:translateY(-50%);font-size:var(--datepicker-font-size, .8125rem);font-weight:500;color:var(--datepicker-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--datepicker-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1),left .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated{top:0;left:var(--datepicker-padding-x, .625rem);transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-floated) .talos-floating-label.is-floated{color:var(--datepicker-primary, #2563eb)}.datepicker-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--datepicker-height);min-height:var(--datepicker-height);padding:0 var(--datepicker-padding-x);background-color:var(--datepicker-bg);border:1px solid var(--datepicker-border);border-radius:var(--datepicker-radius);color:var(--datepicker-color);font-size:var(--datepicker-font-size);line-height:1.25rem;cursor:text;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.datepicker-trigger:hover:not([aria-disabled=true]){border-color:var(--datepicker-border-hover)}.datepicker-trigger:focus-within,.datepicker-trigger:focus-visible,:host(.is-open) .datepicker-trigger{border-color:var(--datepicker-border-focus);box-shadow:var(--datepicker-shadow-focus)}.datepicker-value-container{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem}.datepicker-icon{width:1rem;height:1rem;color:var(--talos-text-muted, #64748b);flex-shrink:0;cursor:pointer}.datepicker-input{flex:1;min-width:0;width:100%;height:100%;background:transparent;border:none;outline:none;padding:0;margin:0;font-family:inherit;font-size:var(--datepicker-font-size);font-weight:500;color:var(--datepicker-color);line-height:1.25rem}.datepicker-input::placeholder{color:var(--datepicker-placeholder-color);opacity:1;font-weight:400}.datepicker-input:disabled{cursor:not-allowed}.datepicker-actions{display:flex;align-items:center;margin-left:.375rem;flex-shrink:0}.datepicker-clear-btn{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;padding:0;background:transparent;border:none;border-radius:50%;color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:color .15s ease,background-color .15s ease}.datepicker-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.datepicker-clear-btn svg{width:.75rem;height:.75rem}.datepicker-dropdown-panel{--datepicker-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, var(--card-bg, #ffffff)));--datepicker-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--datepicker-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));--datepicker-radius: var(--talos-border-radius, var(--border-radius, .375rem));--datepicker-color: var(--talos-text-color, var(--text-color, #0f172a));--datepicker-primary: var(--talos-primary-color, var(--primary-color, #2563eb));--datepicker-primary-hover: var(--talos-primary-hover, var(--primary-hover, #1d4ed8));--datepicker-primary-light: var(--talos-primary-light, var(--primary-light, #eff6ff));--datepicker-primary-light-hover: var(--talos-primary-light-hover, var(--primary-light-hover, #dbeafe));z-index:1000;width:18.5rem;background-color:var(--datepicker-dropdown-bg);border:1px solid var(--datepicker-dropdown-border);border-radius:var(--datepicker-radius);box-shadow:var(--datepicker-dropdown-shadow);color:var(--datepicker-color);padding:.75rem;display:flex;flex-direction:column;box-sizing:border-box;animation:datepickerSlideIn .12s cubic-bezier(0,0,.2,1)}@keyframes datepickerSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.625rem}.datepicker-view-btn{background:transparent;border:none;font-size:.875rem;font-weight:600;color:var(--datepicker-color);padding:.25rem .5rem;border-radius:.25rem;cursor:pointer;transition:background-color .15s ease}.datepicker-view-btn:hover{background-color:var(--datepicker-primary-light, #f1f5f9)}.datepicker-nav-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;background:transparent;border:1px solid transparent;border-radius:.25rem;color:var(--talos-text-muted, #64748b);cursor:pointer;transition:background-color .15s ease,color .15s ease}.datepicker-nav-btn:hover{background-color:var(--datepicker-primary-light, #f1f5f9);color:var(--datepicker-color)}.datepicker-nav-btn svg{width:1rem;height:1rem}.datepicker-body{display:flex;flex-direction:column}.datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:.375rem}.datepicker-weekdays .weekday-cell{font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #94a3b8);padding:.25rem 0;text-transform:uppercase}.datepicker-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem}.day-cell{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;margin:0 auto;font-size:.8125rem;font-weight:400;color:var(--datepicker-color);background:transparent;border:1px solid transparent;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.day-cell:hover:not(:disabled){background-color:var(--datepicker-primary-light, #f1f5f9)}.day-cell.is-other-month{color:var(--talos-text-muted, #cbd5e1);opacity:.5}.day-cell.is-today{font-weight:700;color:var(--datepicker-primary);border-color:var(--datepicker-primary-hover, #bfdbfe)}.day-cell.is-selected{background-color:var(--datepicker-primary)!important;color:#fff!important;font-weight:600}.day-cell.is-focused:not(.is-selected){background-color:var(--datepicker-primary-light);border-color:var(--datepicker-primary)}.day-cell:disabled,.day-cell.is-disabled{color:var(--talos-text-muted, #cbd5e1);cursor:not-allowed;background-color:transparent;opacity:.35}.datepicker-months-grid,.datepicker-years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.375rem 0}.month-cell,.year-cell{height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:500;color:var(--datepicker-color);background:transparent;border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.375rem;cursor:pointer;transition:all .15s ease}.month-cell:hover,.year-cell:hover{background-color:var(--datepicker-primary-light, #f1f5f9);border-color:var(--talos-border-hover, #cbd5e1)}.month-cell.is-current,.year-cell.is-current{font-weight:700;color:var(--datepicker-primary);border-color:var(--datepicker-primary-hover, #bfdbfe)}.month-cell.is-selected,.year-cell.is-selected{background-color:var(--datepicker-primary)!important;color:#fff!important;border-color:var(--datepicker-primary)!important}.time-picker-section{display:flex;align-items:center;justify-content:space-between;margin-top:.625rem;padding-top:.625rem;border-top:1px solid var(--talos-border-color, #f1f5f9)}.time-picker-label{font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}.time-picker-controls{display:flex;align-items:center;gap:.25rem}.time-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.25rem;padding:.125rem;width:2.25rem}.spinner-btn{background:transparent;border:none;font-size:.625rem;color:var(--talos-text-muted, #64748b);cursor:pointer;padding:0;line-height:1;width:100%;text-align:center}.spinner-btn:hover{color:var(--datepicker-primary)}.spinner-input{width:100%;background:transparent;border:none;outline:none;font-size:.8125rem;font-weight:600;color:var(--datepicker-color);text-align:center;line-height:1.1;padding:.125rem 0;font-family:inherit;border-radius:.125rem;transition:background-color .15s ease,box-shadow .15s ease}.spinner-input:focus{background-color:var(--talos-card-bg, #ffffff);box-shadow:0 0 0 1px var(--datepicker-primary)}.time-separator{font-weight:700;color:var(--talos-text-muted, #64748b);font-size:.875rem}.meridiem-toggle-btn{height:2.125rem;padding:0 .5rem;font-size:.75rem;font-weight:600;color:var(--datepicker-primary);background-color:var(--datepicker-primary-light);border:1px solid var(--talos-border-color, #bfdbfe);border-radius:.25rem;cursor:pointer;transition:all .15s ease}.meridiem-toggle-btn:hover{background-color:var(--datepicker-primary-light-hover, #dbeafe)}.datepicker-footer{display:flex;align-items:center;justify-content:flex-end;margin-top:.625rem;padding-top:.5rem;border-top:1px solid var(--talos-border-color, #f1f5f9)}.datepicker-footer.datetime-footer{justify-content:space-between}.datepicker-today-btn,.datepicker-now-btn{background:transparent;border:none;font-size:.75rem;font-weight:600;color:var(--datepicker-primary);cursor:pointer;padding:.25rem .5rem;border-radius:.25rem}.datepicker-today-btn:hover,.datepicker-now-btn:hover{background-color:var(--datepicker-primary-light)}.datepicker-now-btn{color:var(--talos-text-muted, #64748b)}.datepicker-now-btn:hover{background-color:var(--datepicker-primary-light, #f1f5f9);color:var(--datepicker-color)}.datepicker-apply-btn{background-color:var(--datepicker-primary);color:#fff;border:none;font-size:.75rem;font-weight:600;cursor:pointer;padding:.25rem .75rem;border-radius:.25rem;transition:background-color .15s ease}.datepicker-apply-btn:hover{background-color:var(--datepicker-primary-hover)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], use24Hour: [{ type: i0.Input, args: [{ isSignal: true, alias: "use24Hour", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], filterDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerEl: [{
+                type: ViewChild,
+                args: ['triggerEl']
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatePickerComponent };
+//# sourceMappingURL=weeehaoooz-talos-ui-form-date-picker.mjs.map