@weeehaoooz/talos-ui 0.1.0 → 0.1.2

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

@@ -1,896 +0,0 @@
-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