@weeehaoooz/talos-ui 0.1.0 → 0.1.2

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

@@ -1,872 +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 { startOfMonth, addMonths, isValid, startOfDay, endOfDay, startOfWeek, addDays, subDays, endOfWeek, subWeeks, endOfMonth, subMonths, endOfYear, startOfYear, subYears, isAfter, isBefore, set, getHours, getMinutes, getSeconds, addWeeks, addYears, isSameMonth, isSameDay, differenceInCalendarDays, getDate } from 'date-fns';
-import { parseFlexibleDate, formatDate } from '@weeehaoooz/talos-ui/core';
-
-let uniqueDateRangePickerId = 0;
-class DateRangePickerComponent {
-    elementRef = inject((ElementRef));
-    // Signal Inputs
-    placeholder = input('Select date range', /* @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 */ [])); // Default resolved via computed if empty
-    valueFormat = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ [])); // Default resolved via computed if empty
-    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 */ []));
-    minSpan = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "minSpan" }] : /* istanbul ignore next */ [])); // in days
-    maxSpan = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxSpan" }] : /* istanbul ignore next */ [])); // in days
-    firstDayOfWeek = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ [])); // 0 = Sun, 1 = Mon
-    presets = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
-    presetType = input('all', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "presetType" }] : /* istanbul ignore next */ []));
-    filterDate = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filterDate" }] : /* istanbul ignore next */ []));
-    // Signal Outputs
-    rangeChange = output();
-    opened = output();
-    closed = output();
-    // Element Refs
-    triggerEl;
-    startInputEl;
-    endInputEl;
-    // CDK Overlay Connected Positions
-    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
-        }
-    ];
-    // Accessibility IDs
-    componentId = `talos-daterangepicker-${uniqueDateRangePickerId++}`;
-    dialogId = `${this.componentId}-dialog`;
-    // Internal Committed Selection Signals
-    selectedStartDate = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedStartDate" }] : /* istanbul ignore next */ []));
-    selectedEndDate = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedEndDate" }] : /* istanbul ignore next */ []));
-    // Draft Selection Signals (Active while picking in overlay)
-    draftStartDate = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "draftStartDate" }] : /* istanbul ignore next */ []));
-    draftEndDate = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "draftEndDate" }] : /* istanbul ignore next */ []));
-    hoverDate = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hoverDate" }] : /* istanbul ignore next */ []));
-    // Draft Time Signals
-    draftStartHour = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "draftStartHour" }] : /* istanbul ignore next */ []));
-    draftStartMinute = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "draftStartMinute" }] : /* istanbul ignore next */ []));
-    draftStartSecond = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "draftStartSecond" }] : /* istanbul ignore next */ []));
-    draftEndHour = signal(23, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "draftEndHour" }] : /* istanbul ignore next */ []));
-    draftEndMinute = signal(59, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "draftEndMinute" }] : /* istanbul ignore next */ []));
-    draftEndSecond = signal(59, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "draftEndSecond" }] : /* istanbul ignore next */ []));
-    // View state signals
-    viewDate = signal(startOfMonth(new Date()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
-    isOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* 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 */ []));
-    activePresetLabel = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activePresetLabel" }] : /* istanbul ignore next */ []));
-    // Input Text Signals for bottom action bar & trigger display
-    startInputText = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "startInputText" }] : /* istanbul ignore next */ []));
-    endInputText = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "endInputText" }] : /* istanbul ignore next */ []));
-    // Computeds
-    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.formattedTriggerValue();
-    }, /* @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 */ []));
-    viewDateRight = computed(() => {
-        return addMonths(this.viewDate(), 1);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewDateRight" }] : /* 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 */ []));
-    formattedTriggerValue = computed(() => {
-        const start = this.selectedStartDate();
-        const end = this.selectedEndDate();
-        const fmt = this.effectiveDisplayFormat();
-        if (start && isValid(start) && end && isValid(end)) {
-            return `${formatDate(start, fmt)}  —  ${formatDate(end, fmt)}`;
-        }
-        else if (start && isValid(start)) {
-            return `${formatDate(start, fmt)}  —  ...`;
-        }
-        return '';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "formattedTriggerValue" }] : /* 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 */ []));
-    // Effective Presets List
-    effectivePresets = computed(() => {
-        const custom = this.presets();
-        if (custom && custom.length > 0)
-            return custom;
-        const type = this.presetType();
-        const firstDay = (this.firstDayOfWeek() % 7);
-        const calendarPresets = [
-            {
-                label: 'Today',
-                key: 'today',
-                getValue: () => ({
-                    startDate: startOfDay(new Date()),
-                    endDate: endOfDay(new Date())
-                })
-            },
-            {
-                label: 'Yesterday',
-                key: 'yesterday',
-                getValue: () => ({
-                    startDate: startOfDay(subDays(new Date(), 1)),
-                    endDate: endOfDay(subDays(new Date(), 1))
-                })
-            },
-            {
-                label: 'This week',
-                key: 'this_week',
-                getValue: () => ({
-                    startDate: startOfWeek(new Date(), { weekStartsOn: firstDay }),
-                    endDate: endOfWeek(new Date(), { weekStartsOn: firstDay })
-                })
-            },
-            {
-                label: 'Last week',
-                key: 'last_week',
-                getValue: () => ({
-                    startDate: startOfWeek(subWeeks(new Date(), 1), { weekStartsOn: firstDay }),
-                    endDate: endOfWeek(subWeeks(new Date(), 1), { weekStartsOn: firstDay })
-                })
-            },
-            {
-                label: 'This month',
-                key: 'this_month',
-                getValue: () => ({
-                    startDate: startOfMonth(new Date()),
-                    endDate: endOfMonth(new Date())
-                })
-            },
-            {
-                label: 'Last month',
-                key: 'last_month',
-                getValue: () => ({
-                    startDate: startOfMonth(subMonths(new Date(), 1)),
-                    endDate: endOfMonth(subMonths(new Date(), 1))
-                })
-            },
-            {
-                label: 'This year',
-                key: 'this_year',
-                getValue: () => ({
-                    startDate: startOfYear(new Date()),
-                    endDate: endOfYear(new Date())
-                })
-            },
-            {
-                label: 'Last year',
-                key: 'last_year',
-                getValue: () => ({
-                    startDate: startOfYear(subYears(new Date(), 1)),
-                    endDate: endOfYear(subYears(new Date(), 1))
-                })
-            }
-        ];
-        const durationPresets = [
-            { label: '+1 Day', isDuration: true, duration: { days: 1 } },
-            { label: '+2 Days', isDuration: true, duration: { days: 2 } },
-            { label: '+3 Days', isDuration: true, duration: { days: 3 } },
-            { label: '+1 Week', isDuration: true, duration: { weeks: 1 } },
-            { label: '+2 Weeks', isDuration: true, duration: { weeks: 2 } },
-            { label: '+1 Month', isDuration: true, duration: { months: 1 } },
-            { label: '+3 Months', isDuration: true, duration: { months: 3 } }
-        ];
-        if (type === 'calendar')
-            return calendarPresets;
-        if (type === 'duration')
-            return durationPresets;
-        return [...calendarPresets, ...durationPresets];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectivePresets" }] : /* istanbul ignore next */ []));
-    // Days Grid for Left Calendar Month
-    leftCalendarDays = computed(() => {
-        return this.buildCalendarDays(this.viewDate());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "leftCalendarDays" }] : /* istanbul ignore next */ []));
-    // Days Grid for Right Calendar Month
-    rightCalendarDays = computed(() => {
-        return this.buildCalendarDays(this.viewDateRight());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rightCalendarDays" }] : /* istanbul ignore next */ []));
-    isPrevDisabled = computed(() => {
-        const min = this.parsedMinDate();
-        if (!min)
-            return false;
-        return !isAfter(startOfMonth(this.viewDate()), startOfMonth(min));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isPrevDisabled" }] : /* istanbul ignore next */ []));
-    isNextDisabled = computed(() => {
-        const max = this.parsedMaxDate();
-        if (!max)
-            return false;
-        return !isBefore(endOfMonth(this.viewDateRight()), endOfMonth(max));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isNextDisabled" }] : /* istanbul ignore next */ []));
-    leftHeaderLabel = computed(() => {
-        return formatDate(this.viewDate(), 'MMMM yyyy');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "leftHeaderLabel" }] : /* istanbul ignore next */ []));
-    rightHeaderLabel = computed(() => {
-        return formatDate(this.viewDateRight(), 'MMMM yyyy');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rightHeaderLabel" }] : /* istanbul ignore next */ []));
-    // ControlValueAccessor Callbacks
-    onChange = () => { };
-    onTouched = () => { };
-    constructor() {
-        // Keep draft inputs synced with draft dates
-        effect(() => {
-            const start = this.draftStartDate();
-            const end = this.draftEndDate();
-            const fmt = this.effectiveDisplayFormat();
-            if (start && isValid(start)) {
-                const fullStart = set(start, {
-                    hours: this.draftStartHour(),
-                    minutes: this.draftStartMinute(),
-                    seconds: this.draftStartSecond()
-                });
-                this.startInputText.set(formatDate(fullStart, fmt));
-            }
-            else {
-                this.startInputText.set('');
-            }
-            if (end && isValid(end)) {
-                const fullEnd = set(end, {
-                    hours: this.draftEndHour(),
-                    minutes: this.draftEndMinute(),
-                    seconds: this.draftEndSecond()
-                });
-                this.endInputText.set(formatDate(fullEnd, fmt));
-            }
-            else {
-                this.endInputText.set('');
-            }
-        });
-    }
-    // ControlValueAccessor Implementation
-    writeValue(val) {
-        if (!val || typeof val !== 'object') {
-            this.selectedStartDate.set(null);
-            this.selectedEndDate.set(null);
-            return;
-        }
-        let startRaw = null;
-        let endRaw = null;
-        if (Array.isArray(val)) {
-            startRaw = val[0];
-            endRaw = val[1];
-        }
-        else if (val && ('startDate' in val || 'endDate' in val)) {
-            const rangeVal = val;
-            startRaw = rangeVal.startDate;
-            endRaw = rangeVal.endDate;
-        }
-        const parsedStart = parseFlexibleDate(startRaw, [this.effectiveValueFormat(), this.effectiveDisplayFormat()]);
-        const parsedEnd = parseFlexibleDate(endRaw, [this.effectiveValueFormat(), this.effectiveDisplayFormat()]);
-        if (parsedStart && isValid(parsedStart)) {
-            this.selectedStartDate.set(parsedStart);
-            this.viewDate.set(startOfMonth(parsedStart));
-            if (this.showTime()) {
-                this.draftStartHour.set(getHours(parsedStart));
-                this.draftStartMinute.set(getMinutes(parsedStart));
-                this.draftStartSecond.set(getSeconds(parsedStart));
-            }
-        }
-        else {
-            this.selectedStartDate.set(null);
-        }
-        if (parsedEnd && isValid(parsedEnd)) {
-            this.selectedEndDate.set(parsedEnd);
-            if (this.showTime()) {
-                this.draftEndHour.set(getHours(parsedEnd));
-                this.draftEndMinute.set(getMinutes(parsedEnd));
-                this.draftEndSecond.set(getSeconds(parsedEnd));
-            }
-        }
-        else {
-            this.selectedEndDate.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);
-        const selStart = this.selectedStartDate();
-        const selEnd = this.selectedEndDate();
-        if (selStart && isValid(selStart)) {
-            this.draftStartDate.set(selStart);
-            this.viewDate.set(startOfMonth(selStart));
-            this.draftStartHour.set(getHours(selStart));
-            this.draftStartMinute.set(getMinutes(selStart));
-            this.draftStartSecond.set(getSeconds(selStart));
-        }
-        else {
-            this.draftStartDate.set(null);
-            this.viewDate.set(startOfMonth(new Date()));
-            this.draftStartHour.set(0);
-            this.draftStartMinute.set(0);
-            this.draftStartSecond.set(0);
-        }
-        if (selEnd && isValid(selEnd)) {
-            this.draftEndDate.set(selEnd);
-            this.draftEndHour.set(getHours(selEnd));
-            this.draftEndMinute.set(getMinutes(selEnd));
-            this.draftEndSecond.set(getSeconds(selEnd));
-        }
-        else {
-            this.draftEndDate.set(null);
-            this.draftEndHour.set(23);
-            this.draftEndMinute.set(59);
-            this.draftEndSecond.set(59);
-        }
-        this.hoverDate.set(null);
-        this.opened.emit();
-    }
-    close() {
-        if (!this.isOpen())
-            return;
-        this.isOpen.set(false);
-        this.markAsTouched();
-        this.closed.emit();
-    }
-    // Dual Calendar Month Navigation
-    prevMonth() {
-        if (this.isPrevDisabled())
-            return;
-        this.viewDate.update((d) => subMonths(d, 1));
-    }
-    nextMonth() {
-        if (this.isNextDisabled())
-            return;
-        this.viewDate.update((d) => addMonths(d, 1));
-    }
-    // Day Selection Logic
-    selectDay(day) {
-        if (day.isDisabled)
-            return;
-        this.activePresetLabel.set(null);
-        const start = this.draftStartDate();
-        const end = this.draftEndDate();
-        if (!start || (start && end)) {
-            // Step 1: Set new Start Date & clear End Date
-            const newStart = set(day.date, {
-                hours: this.draftStartHour(),
-                minutes: this.draftStartMinute(),
-                seconds: this.draftStartSecond()
-            });
-            this.draftStartDate.set(newStart);
-            this.draftEndDate.set(null);
-        }
-        else {
-            // Step 2: Set End Date
-            const targetDate = day.date;
-            if (isBefore(startOfDay(targetDate), startOfDay(start))) {
-                // If clicked date is before start date, swap them
-                const newStart = set(targetDate, {
-                    hours: this.draftStartHour(),
-                    minutes: this.draftStartMinute(),
-                    seconds: this.draftStartSecond()
-                });
-                const newEnd = set(start, {
-                    hours: this.draftEndHour(),
-                    minutes: this.draftEndMinute(),
-                    seconds: this.draftEndSecond()
-                });
-                this.draftStartDate.set(newStart);
-                this.draftEndDate.set(newEnd);
-            }
-            else {
-                const newEnd = set(targetDate, {
-                    hours: this.draftEndHour(),
-                    minutes: this.draftEndMinute(),
-                    seconds: this.draftEndSecond()
-                });
-                this.draftEndDate.set(newEnd);
-            }
-        }
-    }
-    onDayHover(day) {
-        if (this.draftStartDate() && !this.draftEndDate()) {
-            this.hoverDate.set(day.date);
-        }
-        else {
-            this.hoverDate.set(null);
-        }
-    }
-    // Preset Selection
-    applyPreset(preset) {
-        this.activePresetLabel.set(preset.label);
-        let newStart = null;
-        let newEnd = null;
-        if (preset.isDuration || preset.duration) {
-            const baseStart = this.draftStartDate() || startOfDay(new Date());
-            newStart = set(baseStart, {
-                hours: this.draftStartHour(),
-                minutes: this.draftStartMinute(),
-                seconds: this.draftStartSecond()
-            });
-            let calculatedEnd = baseStart;
-            if (preset.duration?.days)
-                calculatedEnd = addDays(calculatedEnd, preset.duration.days);
-            if (preset.duration?.weeks)
-                calculatedEnd = addWeeks(calculatedEnd, preset.duration.weeks);
-            if (preset.duration?.months)
-                calculatedEnd = addMonths(calculatedEnd, preset.duration.months);
-            if (preset.duration?.years)
-                calculatedEnd = addYears(calculatedEnd, preset.duration.years);
-            newEnd = set(calculatedEnd, {
-                hours: this.draftEndHour(),
-                minutes: this.draftEndMinute(),
-                seconds: this.draftEndSecond()
-            });
-        }
-        else if (preset.getValue) {
-            const range = preset.getValue(this.draftStartDate());
-            newStart = range.startDate;
-            newEnd = range.endDate;
-        }
-        if (newStart && isValid(newStart)) {
-            this.draftStartDate.set(newStart);
-            this.viewDate.set(startOfMonth(newStart));
-        }
-        if (newEnd && isValid(newEnd)) {
-            this.draftEndDate.set(newEnd);
-        }
-    }
-    // Apply & Cancel Overlay Actions
-    applySelection() {
-        const start = this.draftStartDate();
-        const end = this.draftEndDate();
-        if (!start) {
-            this.selectedStartDate.set(null);
-            this.selectedEndDate.set(null);
-            this.emitValue(null);
-            this.close();
-            return;
-        }
-        const finalStart = set(start, {
-            hours: this.draftStartHour(),
-            minutes: this.draftStartMinute(),
-            seconds: this.draftStartSecond()
-        });
-        const finalEnd = set(end || start, {
-            hours: this.draftEndHour(),
-            minutes: this.draftEndMinute(),
-            seconds: this.draftEndSecond()
-        });
-        // Ensure start is before or equal to end
-        if (isBefore(finalEnd, finalStart)) {
-            this.selectedStartDate.set(finalEnd);
-            this.selectedEndDate.set(finalStart);
-            this.emitValue({ startDate: finalEnd, endDate: finalStart });
-        }
-        else {
-            this.selectedStartDate.set(finalStart);
-            this.selectedEndDate.set(finalEnd);
-            this.emitValue({ startDate: finalStart, endDate: finalEnd });
-        }
-        this.close();
-    }
-    cancelSelection() {
-        this.close();
-    }
-    onClear(event) {
-        event.stopPropagation();
-        if (this.effectiveDisabled())
-            return;
-        this.selectedStartDate.set(null);
-        this.selectedEndDate.set(null);
-        this.draftStartDate.set(null);
-        this.draftEndDate.set(null);
-        this.emitValue(null);
-    }
-    // Time Manipulations (Start & End)
-    adjustStartHour(delta) {
-        this.draftStartHour.update((h) => (h + delta + 24) % 24);
-    }
-    adjustStartMinute(delta) {
-        const step = this.minuteStep();
-        this.draftStartMinute.update((m) => (m + delta * step + 60) % 60);
-    }
-    adjustEndHour(delta) {
-        this.draftEndHour.update((h) => (h + delta + 24) % 24);
-    }
-    adjustEndMinute(delta) {
-        const step = this.minuteStep();
-        this.draftEndMinute.update((m) => (m + delta * step + 60) % 60);
-    }
-    toggleStartMeridiem() {
-        this.draftStartHour.update((h) => (h >= 12 ? h - 12 : h + 12));
-    }
-    toggleEndMeridiem() {
-        this.draftEndHour.update((h) => (h >= 12 ? h - 12 : h + 12));
-    }
-    // Direct Typing Handlers for Start & End Input Fields in Footer
-    onStartInputChange(event) {
-        const val = event.target.value;
-        this.startInputText.set(val);
-        if (!val.trim()) {
-            this.draftStartDate.set(null);
-            return;
-        }
-        const parsed = parseFlexibleDate(val, [this.effectiveDisplayFormat(), this.effectiveValueFormat()]);
-        if (parsed && isValid(parsed)) {
-            this.draftStartDate.set(parsed);
-            this.draftStartHour.set(getHours(parsed));
-            this.draftStartMinute.set(getMinutes(parsed));
-            this.draftStartSecond.set(getSeconds(parsed));
-            this.viewDate.set(startOfMonth(parsed));
-        }
-    }
-    onStartInputBlur(event) {
-        const start = this.draftStartDate();
-        const fmt = this.effectiveDisplayFormat();
-        if (start && isValid(start)) {
-            const fullStart = set(start, {
-                hours: this.draftStartHour(),
-                minutes: this.draftStartMinute(),
-                seconds: this.draftStartSecond()
-            });
-            this.startInputText.set(formatDate(fullStart, fmt));
-        }
-        else {
-            this.startInputText.set('');
-        }
-    }
-    onEndInputChange(event) {
-        const val = event.target.value;
-        this.endInputText.set(val);
-        if (!val.trim()) {
-            this.draftEndDate.set(null);
-            return;
-        }
-        const parsed = parseFlexibleDate(val, [this.effectiveDisplayFormat(), this.effectiveValueFormat()]);
-        if (parsed && isValid(parsed)) {
-            this.draftEndDate.set(parsed);
-            this.draftEndHour.set(getHours(parsed));
-            this.draftEndMinute.set(getMinutes(parsed));
-            this.draftEndSecond.set(getSeconds(parsed));
-        }
-    }
-    onEndInputBlur(event) {
-        const end = this.draftEndDate();
-        const fmt = this.effectiveDisplayFormat();
-        if (end && isValid(end)) {
-            const fullEnd = set(end, {
-                hours: this.draftEndHour(),
-                minutes: this.draftEndMinute(),
-                seconds: this.draftEndSecond()
-            });
-            this.endInputText.set(formatDate(fullEnd, fmt));
-        }
-        else {
-            this.endInputText.set('');
-        }
-    }
-    onFooterInputKeyDown(event) {
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            this.applySelection();
-        }
-    }
-    // Helper Calendar Builder
-    buildCalendarDays(viewMonth) {
-        const start = this.draftStartDate();
-        const end = this.draftEndDate();
-        const hover = this.hoverDate();
-        const min = this.parsedMinDate();
-        const max = this.parsedMaxDate();
-        const filter = this.filterDate();
-        const firstDay = (this.firstDayOfWeek() % 7);
-        const minS = this.minSpan();
-        const maxS = this.maxSpan();
-        const days = [];
-        const monthStart = startOfMonth(viewMonth);
-        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, viewMonth);
-            const isToday = isSameDay(current, today);
-            const isSelectedStart = !!(start && isSameDay(current, start));
-            const isSelectedEnd = !!(end && isSameDay(current, end));
-            let isInRange = false;
-            if (start && end) {
-                const rangeStart = isBefore(start, end) ? start : end;
-                const rangeEnd = isBefore(start, end) ? end : start;
-                isInRange = isAfter(startOfDay(current), startOfDay(rangeStart)) && isBefore(startOfDay(current), startOfDay(rangeEnd));
-            }
-            let isHoveredRange = false;
-            if (start && !end && hover) {
-                const rangeStart = isBefore(start, hover) ? start : hover;
-                const rangeEnd = isBefore(start, hover) ? hover : start;
-                isHoveredRange = (isSameDay(current, rangeStart) || isAfter(startOfDay(current), startOfDay(rangeStart))) &&
-                    (isSameDay(current, rangeEnd) || isBefore(startOfDay(current), startOfDay(rangeEnd)));
-            }
-            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;
-            // Span validation
-            if (start && !end && (minS !== null || maxS !== null)) {
-                const diffDays = Math.abs(differenceInCalendarDays(current, start));
-                if (minS !== null && diffDays < minS)
-                    isDisabled = true;
-                if (maxS !== null && diffDays > maxS)
-                    isDisabled = true;
-            }
-            days.push({
-                date: current,
-                dayNumber: getDate(current),
-                isCurrentMonth,
-                isToday,
-                isSelectedStart,
-                isSelectedEnd,
-                isInRange,
-                isHoveredRange,
-                isDisabled,
-                isFocused: false
-            });
-        }
-        return days;
-    }
-    emitValue(range) {
-        if (!range || !range.startDate || !range.endDate) {
-            this.onChange(null);
-            this.rangeChange.emit(null);
-            return;
-        }
-        const fmt = this.effectiveValueFormat();
-        const outStart = this.formatOutputDate(range.startDate, fmt);
-        const outEnd = this.formatOutputDate(range.endDate, fmt);
-        const outVal = {
-            startDate: outStart,
-            endDate: outEnd
-        };
-        this.onChange(outVal);
-        this.rangeChange.emit(outVal);
-    }
-    formatOutputDate(date, fmt) {
-        if (fmt === 'date')
-            return date;
-        if (fmt === 'iso')
-            return date.toISOString();
-        return formatDate(date, fmt);
-    }
-    markAsTouched() {
-        if (!this.isTouched()) {
-            this.isTouched.set(true);
-            this.onTouched();
-        }
-    }
-    onKeyDown(event) {
-        if (this.effectiveDisabled())
-            return;
-        if (!this.isOpen()) {
-            if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
-                event.preventDefault();
-                this.open();
-            }
-            return;
-        }
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            this.close();
-        }
-    }
-    onDocumentClick(event) {
-        if (!this.isOpen())
-            return;
-        const target = event.target;
-        const clickedInsideHost = this.elementRef.nativeElement.contains(target);
-        const clickedInsideOverlay = target instanceof Element && !!target.closest('.daterangepicker-dropdown-panel');
-        if (!clickedInsideHost && !clickedInsideOverlay) {
-            this.close();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: DateRangePickerComponent, isStandalone: true, selector: "talos-date-range-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 }, minSpan: { classPropertyName: "minSpan", publicName: "minSpan", isSignal: true, isRequired: false, transformFunction: null }, maxSpan: { classPropertyName: "maxSpan", publicName: "maxSpan", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, presetType: { classPropertyName: "presetType", publicName: "presetType", isSignal: true, isRequired: false, transformFunction: null }, filterDate: { classPropertyName: "filterDate", publicName: "filterDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange", 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-daterangepicker-host" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DateRangePickerComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "startInputEl", first: true, predicate: ["startInputEl"], descendants: true }, { propertyName: "endInputEl", first: true, predicate: ["endInputEl"], 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  <!-- DateRangePicker Input Trigger -->\n  <div #triggerEl cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"datepicker-trigger daterangepicker-trigger\"\n    role=\"combobox\" [attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'dialog'\" [attr.aria-controls]=\"dialogId\"\n    [attr.aria-disabled]=\"effectiveDisabled()\" (click)=\"toggleOpen()\">\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\">\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      </svg>\n      <span class=\"daterangepicker-value-text\" [class.is-placeholder]=\"!formattedTriggerValue()\">\n        {{ formattedTriggerValue() || (isFloatingMode() && !isFloated() ? '' : placeholder()) }}\n      </span>\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() && formattedTriggerValue() && !effectiveDisabled()) {\n      <button type=\"button\" class=\"datepicker-clear-btn\" aria-label=\"Clear range\" title=\"Clear range\"\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<!-- Dual Calendar Dropdown Overlay 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 daterangepicker-dropdown-panel\" [id]=\"dialogId\" role=\"dialog\"\n    aria-label=\"Date Range Picker Calendar\">\n    <div class=\"daterangepicker-content\">\n\n      <!-- Presets Sidebar -->\n      @if (effectivePresets().length > 0) {\n      <aside class=\"daterangepicker-sidebar\">\n        <div class=\"preset-list\">\n          @for (preset of effectivePresets(); track preset.label) {\n          <button type=\"button\" class=\"preset-item\" [class.is-active]=\"activePresetLabel() === preset.label\"\n            (click)=\"applyPreset(preset)\">\n            {{ preset.label }}\n          </button>\n          }\n        </div>\n      </aside>\n      }\n\n      <!-- Main Dual Calendars Container -->\n      <main class=\"daterangepicker-calendars-container\">\n        <div class=\"dual-calendars-grid\">\n\n          <!-- Left Calendar Month -->\n          <div class=\"calendar-month-panel left-month\">\n            <div class=\"datepicker-header\">\n              <button type=\"button\" class=\"datepicker-nav-btn\" aria-label=\"Previous month\" title=\"Previous month\"\n                [disabled]=\"isPrevDisabled()\" (click)=\"prevMonth()\">\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              <span class=\"month-header-title\">{{ leftHeaderLabel() }}</span>\n              <div class=\"header-nav-placeholder\"></div>\n            </div>\n\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 leftCalendarDays(); track day.date.valueOf()) {\n                <button type=\"button\" class=\"day-cell range-day-cell\" [class.is-other-month]=\"!day.isCurrentMonth\"\n                  [class.is-today]=\"day.isToday\" [class.is-selected-start]=\"day.isSelectedStart\"\n                  [class.is-selected-end]=\"day.isSelectedEnd\" [class.is-in-range]=\"day.isInRange\"\n                  [class.is-hovered-range]=\"day.isHoveredRange\" [class.is-disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\" (click)=\"selectDay(day)\" (mouseenter)=\"onDayHover(day)\">\n                  {{ day.dayNumber }}\n                </button>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Vertical Separator Divider -->\n          <div class=\"calendars-divider\"></div>\n\n          <!-- Right Calendar Month -->\n          <div class=\"calendar-month-panel right-month\">\n            <div class=\"datepicker-header\">\n              <div class=\"header-nav-placeholder\"></div>\n              <span class=\"month-header-title\">{{ rightHeaderLabel() }}</span>\n              <button type=\"button\" class=\"datepicker-nav-btn\" aria-label=\"Next month\" title=\"Next month\"\n                [disabled]=\"isNextDisabled()\" (click)=\"nextMonth()\">\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            <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 rightCalendarDays(); track day.date.valueOf()) {\n                <button type=\"button\" class=\"day-cell range-day-cell\" [class.is-other-month]=\"!day.isCurrentMonth\"\n                  [class.is-today]=\"day.isToday\" [class.is-selected-start]=\"day.isSelectedStart\"\n                  [class.is-selected-end]=\"day.isSelectedEnd\" [class.is-in-range]=\"day.isInRange\"\n                  [class.is-hovered-range]=\"day.isHoveredRange\" [class.is-disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\" (click)=\"selectDay(day)\" (mouseenter)=\"onDayHover(day)\">\n                  {{ day.dayNumber }}\n                </button>\n                }\n              </div>\n            </div>\n          </div>\n\n        </div>\n\n        <!-- Optional Time Pickers Row (When showTime is true) -->\n        @if (showTime()) {\n        <div class=\"daterangepicker-time-row\">\n          <div class=\"time-picker-block\">\n            <span class=\"time-label\">Start Time:</span>\n            <div class=\"time-controls\">\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustStartHour(1)\">\u25B2</button>\n              <span class=\"time-val\">{{ draftStartHour().toString().padStart(2, '0') }}</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustStartHour(-1)\">\u25BC</button>\n              <span class=\"time-sep\">:</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustStartMinute(1)\">\u25B2</button>\n              <span class=\"time-val\">{{ draftStartMinute().toString().padStart(2, '0') }}</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustStartMinute(-1)\">\u25BC</button>\n              @if (!use24Hour()) {\n              <button type=\"button\" class=\"meridiem-toggle\" (click)=\"toggleStartMeridiem()\">\n                {{ draftStartHour() >= 12 ? 'PM' : 'AM' }}\n              </button>\n              }\n            </div>\n          </div>\n\n          <div class=\"time-picker-block\">\n            <span class=\"time-label\">End Time:</span>\n            <div class=\"time-controls\">\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustEndHour(1)\">\u25B2</button>\n              <span class=\"time-val\">{{ draftEndHour().toString().padStart(2, '0') }}</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustEndHour(-1)\">\u25BC</button>\n              <span class=\"time-sep\">:</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustEndMinute(1)\">\u25B2</button>\n              <span class=\"time-val\">{{ draftEndMinute().toString().padStart(2, '0') }}</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustEndMinute(-1)\">\u25BC</button>\n              @if (!use24Hour()) {\n              <button type=\"button\" class=\"meridiem-toggle\" (click)=\"toggleEndMeridiem()\">\n                {{ draftEndHour() >= 12 ? 'PM' : 'AM' }}\n              </button>\n              }\n            </div>\n          </div>\n        </div>\n        }\n\n        <!-- Bottom Action & Inputs Footer Bar -->\n        <footer class=\"daterangepicker-footer\">\n          <div class=\"range-display-inputs\">\n            <input #startInputEl type=\"text\" class=\"date-preview-input\" [value]=\"startInputText()\"\n              [placeholder]=\"showTime() ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'\" (input)=\"onStartInputChange($event)\"\n              (blur)=\"onStartInputBlur($event)\" (keydown)=\"onFooterInputKeyDown($event)\"\n              aria-label=\"Start date input\" />\n            <span class=\"range-sep\">\u2014</span>\n            <input #endInputEl type=\"text\" class=\"date-preview-input\" [value]=\"endInputText()\"\n              [placeholder]=\"showTime() ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'\" (input)=\"onEndInputChange($event)\"\n              (blur)=\"onEndInputBlur($event)\" (keydown)=\"onFooterInputKeyDown($event)\" aria-label=\"End date input\" />\n          </div>\n\n          <div class=\"action-buttons\">\n            <button type=\"button\" class=\"btn-range-cancel\" (click)=\"cancelSelection()\">\n              Cancel\n            </button>\n            <button type=\"button\" class=\"btn-range-apply\" (click)=\"applySelection()\">\n              Apply\n            </button>\n          </div>\n        </footer>\n\n\n      </main>\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)}:host.talos-daterangepicker-host{display:inline-block;position:relative;width:100%}.daterangepicker-trigger{cursor:pointer}.daterangepicker-trigger .daterangepicker-value-text{font-size:var(--datepicker-font-size);color:var(--datepicker-color);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.daterangepicker-trigger .daterangepicker-value-text.is-placeholder{color:var(--datepicker-placeholder-color);font-weight:400}.daterangepicker-dropdown-panel{width:auto;min-width:36rem;max-width:calc(100vw - 2rem);padding:0;overflow:hidden;box-sizing:border-box}@media(max-width:640px){.daterangepicker-dropdown-panel{min-width:100%}}.daterangepicker-content{display:flex;flex-direction:row;min-height:22rem}@media(max-width:640px){.daterangepicker-content{flex-direction:column}}.daterangepicker-sidebar{width:9.5rem;background-color:var(--talos-bg-color, #f8fafc);border-right:1px solid var(--talos-border-color, #e2e8f0);padding:.75rem .5rem;flex-shrink:0;display:flex;flex-direction:column;gap:.25rem}@media(max-width:640px){.daterangepicker-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--talos-border-color, #e2e8f0);padding:.5rem}}.daterangepicker-sidebar .preset-list{display:flex;flex-direction:column;gap:.125rem}@media(max-width:640px){.daterangepicker-sidebar .preset-list{flex-direction:row;flex-wrap:wrap}}.daterangepicker-sidebar .preset-item{display:flex;align-items:center;width:100%;padding:.4375rem .75rem;font-size:.8125rem;font-weight:500;color:var(--talos-text-muted, #475569);background:transparent;border:none;border-radius:.375rem;cursor:pointer;text-align:left;transition:background-color .15s ease,color .15s ease}.daterangepicker-sidebar .preset-item:hover{background-color:var(--datepicker-primary-light, #e2e8f0);color:var(--datepicker-color, #0f172a)}.daterangepicker-sidebar .preset-item.is-active{background-color:var(--datepicker-primary-light, var(--talos-primary-light, #eff6ff));color:var(--datepicker-primary, var(--talos-primary-color, #2563eb));font-weight:600}@media(max-width:640px){.daterangepicker-sidebar .preset-item{width:auto}}.daterangepicker-calendars-container{flex:1;display:flex;flex-direction:column;padding:1rem;box-sizing:border-box}.dual-calendars-grid{display:flex;align-items:flex-start;gap:1rem}@media(max-width:640px){.dual-calendars-grid{flex-direction:column;gap:1.5rem}}.calendar-month-panel{flex:1;width:15rem}.calendar-month-panel .month-header-title{font-size:.875rem;font-weight:600;color:var(--datepicker-color, #0f172a)}.calendar-month-panel .header-nav-placeholder{width:1.75rem;height:1.75rem}.calendars-divider{width:1px;align-self:stretch;background-color:var(--talos-border-color, #f1f5f9)}@media(max-width:640px){.calendars-divider{display:none}}.range-day-cell{border-radius:0}.range-day-cell.is-selected-start{background-color:var(--datepicker-primary, var(--talos-primary-color, #2563eb))!important;color:var(--talos-card-bg, #ffffff)!important;font-weight:600;border-top-left-radius:var(--datepicker-radius, var(--talos-border-radius, .375rem));border-bottom-left-radius:var(--datepicker-radius, var(--talos-border-radius, .375rem))}.range-day-cell.is-selected-end{background-color:var(--datepicker-primary, var(--talos-primary-color, #2563eb))!important;color:var(--talos-card-bg, #ffffff)!important;font-weight:600;border-top-right-radius:var(--datepicker-radius, var(--talos-border-radius, .375rem));border-bottom-right-radius:var(--datepicker-radius, var(--talos-border-radius, .375rem))}.range-day-cell.is-selected-start.is-selected-end{border-radius:var(--datepicker-radius, var(--talos-border-radius, .375rem))!important}.range-day-cell.is-in-range,.range-day-cell.is-hovered-range{background-color:var(--datepicker-primary-light, var(--talos-primary-light, #eff6ff))!important;color:var(--datepicker-primary, var(--talos-primary-color, #2563eb))!important}.range-day-cell.is-in-range:hover:not(:disabled),.range-day-cell.is-hovered-range:hover:not(:disabled){background-color:var(--datepicker-primary-light-hover, var(--talos-primary-light-hover, #dbeafe))!important;color:var(--datepicker-primary, var(--talos-primary-color, #2563eb))!important}.range-day-cell.is-in-range.is-other-month,.range-day-cell.is-hovered-range.is-other-month{opacity:.6}.range-day-cell.is-in-range.is-today,.range-day-cell.is-hovered-range.is-today{font-weight:700;border-color:var(--datepicker-primary, var(--talos-primary-color, #2563eb))}.daterangepicker-time-row{display:flex;align-items:center;justify-content:space-around;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--talos-border-color, #f1f5f9);gap:1rem}.daterangepicker-time-row .time-picker-block{display:flex;align-items:center;gap:.5rem}.daterangepicker-time-row .time-label{font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}.daterangepicker-time-row .time-controls{display:flex;align-items:center;gap:.25rem}.daterangepicker-time-row .time-val{font-size:.8125rem;font-weight:600;padding:.125rem .375rem;background-color:var(--talos-bg-color, #f1f5f9);color:var(--datepicker-color, #0f172a);border-radius:.25rem;min-width:1.5rem;text-align:center}.daterangepicker-time-row .time-sep{font-weight:700;color:var(--talos-text-muted, #94a3b8)}.daterangepicker-time-row .time-adjust-btn{background:transparent;border:none;font-size:.625rem;cursor:pointer;color:var(--talos-text-muted, #64748b);padding:.125rem}.daterangepicker-time-row .time-adjust-btn:hover{color:var(--datepicker-color, #0f172a)}.daterangepicker-time-row .meridiem-toggle{font-size:.75rem;font-weight:600;padding:.125rem .375rem;border:1px solid var(--talos-border-color, #cbd5e1);border-radius:.25rem;background:var(--talos-card-bg, #ffffff);color:var(--datepicker-color, #0f172a);cursor:pointer}.daterangepicker-time-row .meridiem-toggle:hover{background:var(--talos-bg-color, #f8fafc)}.daterangepicker-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--talos-border-color, #e2e8f0);gap:1rem}@media(max-width:640px){.daterangepicker-footer{flex-direction:column;align-items:stretch}}.range-display-inputs{display:flex;align-items:center;gap:.5rem}.range-display-inputs .date-preview-input{padding:.375rem .625rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:var(--datepicker-color, #0f172a);background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:.375rem;width:10.5rem;text-align:center;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.range-display-inputs .date-preview-input::placeholder{color:var(--datepicker-placeholder-color, #94a3b8);font-weight:400}.range-display-inputs .date-preview-input:focus{border-color:var(--datepicker-primary, var(--talos-primary-color, var(--primary-color, #2563eb)));box-shadow:0 0 0 2px #2563eb26}.range-display-inputs .range-sep{color:var(--talos-text-muted, #94a3b8);font-weight:600}.action-buttons{display:flex;align-items:center;gap:.5rem;margin-left:auto}@media(max-width:640px){.action-buttons{margin-left:0;justify-content:flex-end}}.action-buttons .btn-range-cancel{padding:.4375rem .875rem;font-size:.8125rem;font-weight:600;color:var(--talos-text-muted, #475569);background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:.375rem;cursor:pointer;transition:all .15s ease}.action-buttons .btn-range-cancel:hover{background-color:var(--talos-bg-color, #f8fafc);border-color:var(--talos-border-hover, #94a3b8);color:var(--datepicker-color, #0f172a)}.action-buttons .btn-range-apply{padding:.4375rem 1rem;font-size:.8125rem;font-weight:600;color:#fff;background-color:var(--datepicker-primary, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--datepicker-primary, var(--talos-primary-color, var(--primary-color, #2563eb)));border-radius:.375rem;cursor:pointer;transition:all .15s ease}.action-buttons .btn-range-apply:hover{background-color:var(--datepicker-primary-hover, var(--talos-primary-hover, #1d4ed8));border-color:var(--datepicker-primary-hover, var(--talos-primary-hover, #1d4ed8))}\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: DateRangePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'talos-date-range-picker', imports: [OverlayModule, CdkConnectedOverlay, CdkOverlayOrigin], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DateRangePickerComponent),
-                            multi: true
-                        }
-                    ], host: {
-                        'class': 'talos-daterangepicker-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  <!-- DateRangePicker Input Trigger -->\n  <div #triggerEl cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"datepicker-trigger daterangepicker-trigger\"\n    role=\"combobox\" [attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'dialog'\" [attr.aria-controls]=\"dialogId\"\n    [attr.aria-disabled]=\"effectiveDisabled()\" (click)=\"toggleOpen()\">\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\">\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      </svg>\n      <span class=\"daterangepicker-value-text\" [class.is-placeholder]=\"!formattedTriggerValue()\">\n        {{ formattedTriggerValue() || (isFloatingMode() && !isFloated() ? '' : placeholder()) }}\n      </span>\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() && formattedTriggerValue() && !effectiveDisabled()) {\n      <button type=\"button\" class=\"datepicker-clear-btn\" aria-label=\"Clear range\" title=\"Clear range\"\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<!-- Dual Calendar Dropdown Overlay 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 daterangepicker-dropdown-panel\" [id]=\"dialogId\" role=\"dialog\"\n    aria-label=\"Date Range Picker Calendar\">\n    <div class=\"daterangepicker-content\">\n\n      <!-- Presets Sidebar -->\n      @if (effectivePresets().length > 0) {\n      <aside class=\"daterangepicker-sidebar\">\n        <div class=\"preset-list\">\n          @for (preset of effectivePresets(); track preset.label) {\n          <button type=\"button\" class=\"preset-item\" [class.is-active]=\"activePresetLabel() === preset.label\"\n            (click)=\"applyPreset(preset)\">\n            {{ preset.label }}\n          </button>\n          }\n        </div>\n      </aside>\n      }\n\n      <!-- Main Dual Calendars Container -->\n      <main class=\"daterangepicker-calendars-container\">\n        <div class=\"dual-calendars-grid\">\n\n          <!-- Left Calendar Month -->\n          <div class=\"calendar-month-panel left-month\">\n            <div class=\"datepicker-header\">\n              <button type=\"button\" class=\"datepicker-nav-btn\" aria-label=\"Previous month\" title=\"Previous month\"\n                [disabled]=\"isPrevDisabled()\" (click)=\"prevMonth()\">\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              <span class=\"month-header-title\">{{ leftHeaderLabel() }}</span>\n              <div class=\"header-nav-placeholder\"></div>\n            </div>\n\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 leftCalendarDays(); track day.date.valueOf()) {\n                <button type=\"button\" class=\"day-cell range-day-cell\" [class.is-other-month]=\"!day.isCurrentMonth\"\n                  [class.is-today]=\"day.isToday\" [class.is-selected-start]=\"day.isSelectedStart\"\n                  [class.is-selected-end]=\"day.isSelectedEnd\" [class.is-in-range]=\"day.isInRange\"\n                  [class.is-hovered-range]=\"day.isHoveredRange\" [class.is-disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\" (click)=\"selectDay(day)\" (mouseenter)=\"onDayHover(day)\">\n                  {{ day.dayNumber }}\n                </button>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Vertical Separator Divider -->\n          <div class=\"calendars-divider\"></div>\n\n          <!-- Right Calendar Month -->\n          <div class=\"calendar-month-panel right-month\">\n            <div class=\"datepicker-header\">\n              <div class=\"header-nav-placeholder\"></div>\n              <span class=\"month-header-title\">{{ rightHeaderLabel() }}</span>\n              <button type=\"button\" class=\"datepicker-nav-btn\" aria-label=\"Next month\" title=\"Next month\"\n                [disabled]=\"isNextDisabled()\" (click)=\"nextMonth()\">\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            <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 rightCalendarDays(); track day.date.valueOf()) {\n                <button type=\"button\" class=\"day-cell range-day-cell\" [class.is-other-month]=\"!day.isCurrentMonth\"\n                  [class.is-today]=\"day.isToday\" [class.is-selected-start]=\"day.isSelectedStart\"\n                  [class.is-selected-end]=\"day.isSelectedEnd\" [class.is-in-range]=\"day.isInRange\"\n                  [class.is-hovered-range]=\"day.isHoveredRange\" [class.is-disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\" (click)=\"selectDay(day)\" (mouseenter)=\"onDayHover(day)\">\n                  {{ day.dayNumber }}\n                </button>\n                }\n              </div>\n            </div>\n          </div>\n\n        </div>\n\n        <!-- Optional Time Pickers Row (When showTime is true) -->\n        @if (showTime()) {\n        <div class=\"daterangepicker-time-row\">\n          <div class=\"time-picker-block\">\n            <span class=\"time-label\">Start Time:</span>\n            <div class=\"time-controls\">\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustStartHour(1)\">\u25B2</button>\n              <span class=\"time-val\">{{ draftStartHour().toString().padStart(2, '0') }}</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustStartHour(-1)\">\u25BC</button>\n              <span class=\"time-sep\">:</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustStartMinute(1)\">\u25B2</button>\n              <span class=\"time-val\">{{ draftStartMinute().toString().padStart(2, '0') }}</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustStartMinute(-1)\">\u25BC</button>\n              @if (!use24Hour()) {\n              <button type=\"button\" class=\"meridiem-toggle\" (click)=\"toggleStartMeridiem()\">\n                {{ draftStartHour() >= 12 ? 'PM' : 'AM' }}\n              </button>\n              }\n            </div>\n          </div>\n\n          <div class=\"time-picker-block\">\n            <span class=\"time-label\">End Time:</span>\n            <div class=\"time-controls\">\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustEndHour(1)\">\u25B2</button>\n              <span class=\"time-val\">{{ draftEndHour().toString().padStart(2, '0') }}</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustEndHour(-1)\">\u25BC</button>\n              <span class=\"time-sep\">:</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustEndMinute(1)\">\u25B2</button>\n              <span class=\"time-val\">{{ draftEndMinute().toString().padStart(2, '0') }}</span>\n              <button type=\"button\" class=\"time-adjust-btn\" (click)=\"adjustEndMinute(-1)\">\u25BC</button>\n              @if (!use24Hour()) {\n              <button type=\"button\" class=\"meridiem-toggle\" (click)=\"toggleEndMeridiem()\">\n                {{ draftEndHour() >= 12 ? 'PM' : 'AM' }}\n              </button>\n              }\n            </div>\n          </div>\n        </div>\n        }\n\n        <!-- Bottom Action & Inputs Footer Bar -->\n        <footer class=\"daterangepicker-footer\">\n          <div class=\"range-display-inputs\">\n            <input #startInputEl type=\"text\" class=\"date-preview-input\" [value]=\"startInputText()\"\n              [placeholder]=\"showTime() ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'\" (input)=\"onStartInputChange($event)\"\n              (blur)=\"onStartInputBlur($event)\" (keydown)=\"onFooterInputKeyDown($event)\"\n              aria-label=\"Start date input\" />\n            <span class=\"range-sep\">\u2014</span>\n            <input #endInputEl type=\"text\" class=\"date-preview-input\" [value]=\"endInputText()\"\n              [placeholder]=\"showTime() ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'\" (input)=\"onEndInputChange($event)\"\n              (blur)=\"onEndInputBlur($event)\" (keydown)=\"onFooterInputKeyDown($event)\" aria-label=\"End date input\" />\n          </div>\n\n          <div class=\"action-buttons\">\n            <button type=\"button\" class=\"btn-range-cancel\" (click)=\"cancelSelection()\">\n              Cancel\n            </button>\n            <button type=\"button\" class=\"btn-range-apply\" (click)=\"applySelection()\">\n              Apply\n            </button>\n          </div>\n        </footer>\n\n\n      </main>\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)}:host.talos-daterangepicker-host{display:inline-block;position:relative;width:100%}.daterangepicker-trigger{cursor:pointer}.daterangepicker-trigger .daterangepicker-value-text{font-size:var(--datepicker-font-size);color:var(--datepicker-color);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.daterangepicker-trigger .daterangepicker-value-text.is-placeholder{color:var(--datepicker-placeholder-color);font-weight:400}.daterangepicker-dropdown-panel{width:auto;min-width:36rem;max-width:calc(100vw - 2rem);padding:0;overflow:hidden;box-sizing:border-box}@media(max-width:640px){.daterangepicker-dropdown-panel{min-width:100%}}.daterangepicker-content{display:flex;flex-direction:row;min-height:22rem}@media(max-width:640px){.daterangepicker-content{flex-direction:column}}.daterangepicker-sidebar{width:9.5rem;background-color:var(--talos-bg-color, #f8fafc);border-right:1px solid var(--talos-border-color, #e2e8f0);padding:.75rem .5rem;flex-shrink:0;display:flex;flex-direction:column;gap:.25rem}@media(max-width:640px){.daterangepicker-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--talos-border-color, #e2e8f0);padding:.5rem}}.daterangepicker-sidebar .preset-list{display:flex;flex-direction:column;gap:.125rem}@media(max-width:640px){.daterangepicker-sidebar .preset-list{flex-direction:row;flex-wrap:wrap}}.daterangepicker-sidebar .preset-item{display:flex;align-items:center;width:100%;padding:.4375rem .75rem;font-size:.8125rem;font-weight:500;color:var(--talos-text-muted, #475569);background:transparent;border:none;border-radius:.375rem;cursor:pointer;text-align:left;transition:background-color .15s ease,color .15s ease}.daterangepicker-sidebar .preset-item:hover{background-color:var(--datepicker-primary-light, #e2e8f0);color:var(--datepicker-color, #0f172a)}.daterangepicker-sidebar .preset-item.is-active{background-color:var(--datepicker-primary-light, var(--talos-primary-light, #eff6ff));color:var(--datepicker-primary, var(--talos-primary-color, #2563eb));font-weight:600}@media(max-width:640px){.daterangepicker-sidebar .preset-item{width:auto}}.daterangepicker-calendars-container{flex:1;display:flex;flex-direction:column;padding:1rem;box-sizing:border-box}.dual-calendars-grid{display:flex;align-items:flex-start;gap:1rem}@media(max-width:640px){.dual-calendars-grid{flex-direction:column;gap:1.5rem}}.calendar-month-panel{flex:1;width:15rem}.calendar-month-panel .month-header-title{font-size:.875rem;font-weight:600;color:var(--datepicker-color, #0f172a)}.calendar-month-panel .header-nav-placeholder{width:1.75rem;height:1.75rem}.calendars-divider{width:1px;align-self:stretch;background-color:var(--talos-border-color, #f1f5f9)}@media(max-width:640px){.calendars-divider{display:none}}.range-day-cell{border-radius:0}.range-day-cell.is-selected-start{background-color:var(--datepicker-primary, var(--talos-primary-color, #2563eb))!important;color:var(--talos-card-bg, #ffffff)!important;font-weight:600;border-top-left-radius:var(--datepicker-radius, var(--talos-border-radius, .375rem));border-bottom-left-radius:var(--datepicker-radius, var(--talos-border-radius, .375rem))}.range-day-cell.is-selected-end{background-color:var(--datepicker-primary, var(--talos-primary-color, #2563eb))!important;color:var(--talos-card-bg, #ffffff)!important;font-weight:600;border-top-right-radius:var(--datepicker-radius, var(--talos-border-radius, .375rem));border-bottom-right-radius:var(--datepicker-radius, var(--talos-border-radius, .375rem))}.range-day-cell.is-selected-start.is-selected-end{border-radius:var(--datepicker-radius, var(--talos-border-radius, .375rem))!important}.range-day-cell.is-in-range,.range-day-cell.is-hovered-range{background-color:var(--datepicker-primary-light, var(--talos-primary-light, #eff6ff))!important;color:var(--datepicker-primary, var(--talos-primary-color, #2563eb))!important}.range-day-cell.is-in-range:hover:not(:disabled),.range-day-cell.is-hovered-range:hover:not(:disabled){background-color:var(--datepicker-primary-light-hover, var(--talos-primary-light-hover, #dbeafe))!important;color:var(--datepicker-primary, var(--talos-primary-color, #2563eb))!important}.range-day-cell.is-in-range.is-other-month,.range-day-cell.is-hovered-range.is-other-month{opacity:.6}.range-day-cell.is-in-range.is-today,.range-day-cell.is-hovered-range.is-today{font-weight:700;border-color:var(--datepicker-primary, var(--talos-primary-color, #2563eb))}.daterangepicker-time-row{display:flex;align-items:center;justify-content:space-around;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--talos-border-color, #f1f5f9);gap:1rem}.daterangepicker-time-row .time-picker-block{display:flex;align-items:center;gap:.5rem}.daterangepicker-time-row .time-label{font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}.daterangepicker-time-row .time-controls{display:flex;align-items:center;gap:.25rem}.daterangepicker-time-row .time-val{font-size:.8125rem;font-weight:600;padding:.125rem .375rem;background-color:var(--talos-bg-color, #f1f5f9);color:var(--datepicker-color, #0f172a);border-radius:.25rem;min-width:1.5rem;text-align:center}.daterangepicker-time-row .time-sep{font-weight:700;color:var(--talos-text-muted, #94a3b8)}.daterangepicker-time-row .time-adjust-btn{background:transparent;border:none;font-size:.625rem;cursor:pointer;color:var(--talos-text-muted, #64748b);padding:.125rem}.daterangepicker-time-row .time-adjust-btn:hover{color:var(--datepicker-color, #0f172a)}.daterangepicker-time-row .meridiem-toggle{font-size:.75rem;font-weight:600;padding:.125rem .375rem;border:1px solid var(--talos-border-color, #cbd5e1);border-radius:.25rem;background:var(--talos-card-bg, #ffffff);color:var(--datepicker-color, #0f172a);cursor:pointer}.daterangepicker-time-row .meridiem-toggle:hover{background:var(--talos-bg-color, #f8fafc)}.daterangepicker-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--talos-border-color, #e2e8f0);gap:1rem}@media(max-width:640px){.daterangepicker-footer{flex-direction:column;align-items:stretch}}.range-display-inputs{display:flex;align-items:center;gap:.5rem}.range-display-inputs .date-preview-input{padding:.375rem .625rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:var(--datepicker-color, #0f172a);background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:.375rem;width:10.5rem;text-align:center;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.range-display-inputs .date-preview-input::placeholder{color:var(--datepicker-placeholder-color, #94a3b8);font-weight:400}.range-display-inputs .date-preview-input:focus{border-color:var(--datepicker-primary, var(--talos-primary-color, var(--primary-color, #2563eb)));box-shadow:0 0 0 2px #2563eb26}.range-display-inputs .range-sep{color:var(--talos-text-muted, #94a3b8);font-weight:600}.action-buttons{display:flex;align-items:center;gap:.5rem;margin-left:auto}@media(max-width:640px){.action-buttons{margin-left:0;justify-content:flex-end}}.action-buttons .btn-range-cancel{padding:.4375rem .875rem;font-size:.8125rem;font-weight:600;color:var(--talos-text-muted, #475569);background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:.375rem;cursor:pointer;transition:all .15s ease}.action-buttons .btn-range-cancel:hover{background-color:var(--talos-bg-color, #f8fafc);border-color:var(--talos-border-hover, #94a3b8);color:var(--datepicker-color, #0f172a)}.action-buttons .btn-range-apply{padding:.4375rem 1rem;font-size:.8125rem;font-weight:600;color:#fff;background-color:var(--datepicker-primary, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--datepicker-primary, var(--talos-primary-color, var(--primary-color, #2563eb)));border-radius:.375rem;cursor:pointer;transition:all .15s ease}.action-buttons .btn-range-apply:hover{background-color:var(--datepicker-primary-hover, var(--talos-primary-hover, #1d4ed8));border-color:var(--datepicker-primary-hover, var(--talos-primary-hover, #1d4ed8))}\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 }] }], minSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSpan", required: false }] }], maxSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSpan", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], presetType: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetType", required: false }] }], filterDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDate", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerEl: [{
-                type: ViewChild,
-                args: ['triggerEl']
-            }], startInputEl: [{
-                type: ViewChild,
-                args: ['startInputEl']
-            }], endInputEl: [{
-                type: ViewChild,
-                args: ['endInputEl']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DateRangePickerComponent };
-//# sourceMappingURL=weeehaoooz-talos-ui-form-date-range-picker.mjs.map