@weeehaoooz/talos-ui 0.1.0

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

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