@oneluiz/dual-datepicker 3.1.0 → 3.2.0

package/fesm2022/oneluiz-dual-datepicker.mjs

@@ -27,6 +27,11 @@ class NativeDateAdapter extends DateAdapter {
             return new Date(value);
         }
         if (typeof value === 'string' || typeof value === 'number') {
+            // Fix timezone issues: parse YYYY-MM-DD as local date, not UTC
+            if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
+                const [year, month, day] = value.split('-').map(Number);
+                return new Date(year, month - 1, day);
+            }
             const date = new Date(value);
             return this.isValid(date) ? date : null;
         }
@@ -135,6 +140,7 @@ class DualDatepickerComponent {
     closeOnSelection = true;
     closeOnPresetSelection = true;
     closeOnClickOutside = true;
+    enableKeyboardNavigation = true;
     presets = [];
     inputBackgroundColor = '#fff';
     inputTextColor = '#495057';
@@ -143,6 +149,9 @@ class DualDatepickerComponent {
     inputBorderColorFocus = '#80bdff';
     inputPadding = '0.375rem 0.75rem';
     locale = {};
+    disabledDates;
+    displayFormat = 'D MMM'; // Format for displaying dates in input
+    requireApply = false; // Require Apply button confirmation
     dateRangeChange = new EventEmitter();
     dateRangeSelected = new EventEmitter();
     multiDateRangeChange = new EventEmitter();
@@ -158,6 +167,12 @@ class DualDatepickerComponent {
     currentMonthDays = signal([]);
     previousMonthDays = signal([]);
     isDisabled = signal(false);
+    // Apply/Confirm support
+    pendingStartDate = '';
+    pendingEndDate = '';
+    hasPendingChanges = signal(false);
+    // Hover range preview
+    hoverDate = signal(null);
     // Multi-range support
     selectedRanges = signal([]);
     currentRangeIndex = signal(-1);
@@ -193,6 +208,9 @@ class DualDatepickerComponent {
         }
     }
     handleKeyboardNavigation(event) {
+        if (!this.enableKeyboardNavigation) {
+            return;
+        }
         if (!this.showDatePicker()) {
             // When picker is closed, allow Enter/Space to open it
             if (event.key === 'Enter' || event.key === ' ') {
@@ -265,19 +283,63 @@ class DualDatepickerComponent {
     initializeFocus() {
         // Set initial focus to start date, end date, or first available day
         if (this.startDate) {
-            const startMonth = this.isDateInMonth(this.startDate, this.previousMonth()) ? 0 : 1;
-            this.focusedDay.set({ date: this.startDate, monthIndex: startMonth });
+            const inPrevMonth = this.isDateInMonth(this.startDate, this.previousMonth());
+            const inCurrMonth = this.isDateInMonth(this.startDate, this.currentMonth());
+            if (inPrevMonth || inCurrMonth) {
+                this.focusedDay.set({ date: this.startDate, monthIndex: inPrevMonth ? 0 : 1 });
+            }
+            else {
+                // startDate is not visible, focus on today if visible
+                const today = this.dateAdapter.format(this.dateAdapter.today(), 'yyyy-MM-dd');
+                const inCurrMonth = this.isDateInMonth(today, this.currentMonth());
+                if (inCurrMonth) {
+                    this.focusedDay.set({ date: today, monthIndex: 1 });
+                }
+                else {
+                    const currentMonthDays = this.currentMonthDays();
+                    const firstDay = currentMonthDays.find(day => day.isCurrentMonth);
+                    if (firstDay) {
+                        this.focusedDay.set({ date: firstDay.date, monthIndex: 1 });
+                    }
+                }
+            }
         }
         else if (this.endDate) {
-            const endMonth = this.isDateInMonth(this.endDate, this.previousMonth()) ? 0 : 1;
-            this.focusedDay.set({ date: this.endDate, monthIndex: endMonth });
+            const inPrevMonth = this.isDateInMonth(this.endDate, this.previousMonth());
+            const inCurrMonth = this.isDateInMonth(this.endDate, this.currentMonth());
+            if (inPrevMonth || inCurrMonth) {
+                this.focusedDay.set({ date: this.endDate, monthIndex: inPrevMonth ? 0 : 1 });
+            }
+            else {
+                // endDate is not visible, focus on today if visible
+                const today = this.dateAdapter.format(this.dateAdapter.today(), 'yyyy-MM-dd');
+                const inCurrMonth = this.isDateInMonth(today, this.currentMonth());
+                if (inCurrMonth) {
+                    this.focusedDay.set({ date: today, monthIndex: 1 });
+                }
+                else {
+                    const currentMonthDays = this.currentMonthDays();
+                    const firstDay = currentMonthDays.find(day => day.isCurrentMonth);
+                    if (firstDay) {
+                        this.focusedDay.set({ date: firstDay.date, monthIndex: 1 });
+                    }
+                }
+            }
         }
         else {
-            // Focus first day of current month
-            const currentMonthDays = this.currentMonthDays();
-            const firstDay = currentMonthDays.find(day => day.isCurrentMonth);
-            if (firstDay) {
-                this.focusedDay.set({ date: firstDay.date, monthIndex: 1 });
+            // Focus on today if visible, otherwise first day of current month
+            const today = this.dateAdapter.format(this.dateAdapter.today(), 'yyyy-MM-dd');
+            const inCurrMonth = this.isDateInMonth(today, this.currentMonth());
+            if (inCurrMonth) {
+                this.focusedDay.set({ date: today, monthIndex: 1 });
+            }
+            else {
+                // Today is not in current month, focus on first day of current month
+                const currentMonthDays = this.currentMonthDays();
+                const firstDay = currentMonthDays.find(day => day.isCurrentMonth);
+                if (firstDay) {
+                    this.focusedDay.set({ date: firstDay.date, monthIndex: 1 });
+                }
             }
         }
     }
@@ -303,8 +365,8 @@ class DualDatepickerComponent {
         const newDate = this.dateAdapter.addDays(currentDate, direction);
         const newDateStr = this.formatDate(newDate);
         // Determine which month the new date belongs to
-        const inPrevMonth = this.isDateInMonth(newDateStr, this.previousMonth());
-        const inCurrMonth = this.isDateInMonth(newDateStr, this.currentMonth());
+        let inPrevMonth = this.isDateInMonth(newDateStr, this.previousMonth());
+        let inCurrMonth = this.isDateInMonth(newDateStr, this.currentMonth());
         if (inPrevMonth || inCurrMonth) {
             this.focusedDay.set({
                 date: newDateStr,
@@ -319,7 +381,13 @@ class DualDatepickerComponent {
             else {
                 this.changeMonth(-1);
             }
-            this.focusedDay.set({ date: newDateStr, monthIndex: direction > 0 ? 0 : 1 });
+            // Recalculate after month change
+            inPrevMonth = this.isDateInMonth(newDateStr, this.previousMonth());
+            inCurrMonth = this.isDateInMonth(newDateStr, this.currentMonth());
+            this.focusedDay.set({
+                date: newDateStr,
+                monthIndex: inPrevMonth ? 0 : (inCurrMonth ? 1 : 0)
+            });
         }
     }
     moveFocusVertical(direction) {
@@ -333,8 +401,8 @@ class DualDatepickerComponent {
             return;
         const newDate = this.dateAdapter.addDays(currentDate, direction * 7); // Move by week
         const newDateStr = this.formatDate(newDate);
-        const inPrevMonth = this.isDateInMonth(newDateStr, this.previousMonth());
-        const inCurrMonth = this.isDateInMonth(newDateStr, this.currentMonth());
+        let inPrevMonth = this.isDateInMonth(newDateStr, this.previousMonth());
+        let inCurrMonth = this.isDateInMonth(newDateStr, this.currentMonth());
         if (inPrevMonth || inCurrMonth) {
             this.focusedDay.set({
                 date: newDateStr,
@@ -349,7 +417,13 @@ class DualDatepickerComponent {
             else {
                 this.changeMonth(-1);
             }
-            this.focusedDay.set({ date: newDateStr, monthIndex: direction > 0 ? 0 : 1 });
+            // Recalculate after month change
+            inPrevMonth = this.isDateInMonth(newDateStr, this.previousMonth());
+            inCurrMonth = this.isDateInMonth(newDateStr, this.currentMonth());
+            this.focusedDay.set({
+                date: newDateStr,
+                monthIndex: inPrevMonth ? 0 : (inCurrMonth ? 1 : 0)
+            });
         }
     }
     moveFocusToFirstDay() {
@@ -452,8 +526,25 @@ class DualDatepickerComponent {
         const date = this.dateAdapter.parse(dateStr);
         if (!date)
             return '';
-        const monthNames = this.locale.monthNamesShort || this.defaultMonthNamesShort;
-        return `${this.dateAdapter.getDate(date)} ${monthNames[this.dateAdapter.getMonth(date)]}`;
+        const year = this.dateAdapter.getYear(date);
+        const month = this.dateAdapter.getMonth(date);
+        const day = this.dateAdapter.getDate(date);
+        const monthNames = this.locale.monthNames || this.defaultMonthNames;
+        const monthNamesShort = this.locale.monthNamesShort || this.defaultMonthNamesShort;
+        // Replace format tokens with values
+        let formatted = this.displayFormat;
+        // Year tokens
+        formatted = formatted.replace(/YYYY/g, String(year));
+        formatted = formatted.replace(/YY/g, String(year).slice(-2));
+        // Month tokens (order matters: MMMM before MMM before MM before M)
+        formatted = formatted.replace(/MMMM/g, monthNames[month]);
+        formatted = formatted.replace(/MMM/g, monthNamesShort[month]);
+        formatted = formatted.replace(/MM/g, String(month + 1).padStart(2, '0'));
+        formatted = formatted.replace(/M/g, String(month + 1));
+        // Day tokens (order matters: DD before D)
+        formatted = formatted.replace(/DD/g, String(day).padStart(2, '0'));
+        formatted = formatted.replace(/D/g, String(day));
+        return formatted;
     }
     updateDateRangeText() {
         if (this.startDate && this.endDate) {
@@ -475,18 +566,24 @@ class DualDatepickerComponent {
             const previousMonthDate = this.dateAdapter.createDate(year, month - 1, 1);
             this.previousMonth.set(previousMonthDate);
             this.generateCalendars();
-            // Initialize keyboard focus
-            this.initializeFocus();
+            // Initialize keyboard focus only if keyboard navigation is enabled
+            if (this.enableKeyboardNavigation) {
+                this.initializeFocus();
+            }
         }
         else {
             // Clear focus when closing
-            this.focusedDay.set(null);
+            if (this.enableKeyboardNavigation) {
+                this.focusedDay.set(null);
+            }
         }
         this.onTouched();
     }
     closeDatePicker() {
         this.showDatePicker.set(false);
-        this.focusedDay.set(null);
+        if (this.enableKeyboardNavigation) {
+            this.focusedDay.set(null);
+        }
         this.onTouched();
     }
     generateCalendars() {
@@ -507,13 +604,22 @@ class DualDatepickerComponent {
         for (let day = 1; day <= daysInMonth; day++) {
             const dayDate = this.dateAdapter.createDate(year, month, day);
             const dateStr = this.formatDate(dayDate);
+            // Check if date is in pending range (for requireApply mode)
+            const isPendingStart = this.requireApply && this.pendingStartDate === dateStr;
+            const isPendingEnd = this.requireApply && this.pendingEndDate === dateStr;
+            const inPendingRange = this.requireApply && this.pendingStartDate && this.pendingEndDate &&
+                dateStr >= this.pendingStartDate && dateStr <= this.pendingEndDate;
+            // Check if date is in hover preview range
+            const inHoverRange = this.isInHoverRange(dateStr);
             monthDays.push({
                 day: day,
                 date: dateStr,
                 isCurrentMonth: true,
-                isStart: this.startDate === dateStr,
-                isEnd: this.endDate === dateStr,
-                inRange: this.isInRange(dateStr)
+                isStart: this.startDate === dateStr || isPendingStart,
+                isEnd: this.endDate === dateStr || isPendingEnd,
+                inRange: this.isInRange(dateStr) || inPendingRange,
+                inHoverRange: inHoverRange,
+                isDisabled: this.isDateDisabled(dayDate)
             });
         }
         return monthDays;
@@ -531,8 +637,74 @@ class DualDatepickerComponent {
             return dateStr >= this.startDate && dateStr <= this.endDate;
         }
     }
+    isDateDisabled(date) {
+        if (!this.disabledDates)
+            return false;
+        if (typeof this.disabledDates === 'function') {
+            // If it's a function, call it with the date
+            return this.disabledDates(date);
+        }
+        else if (Array.isArray(this.disabledDates)) {
+            // If it's an array, check if the date matches any disabled date
+            return this.disabledDates.some(disabledDate => {
+                return this.dateAdapter.getYear(date) === this.dateAdapter.getYear(disabledDate) &&
+                    this.dateAdapter.getMonth(date) === this.dateAdapter.getMonth(disabledDate) &&
+                    this.dateAdapter.getDate(date) === this.dateAdapter.getDate(disabledDate);
+            });
+        }
+        return false;
+    }
+    isInHoverRange(dateStr) {
+        const hover = this.hoverDate();
+        if (!hover)
+            return false;
+        // In multiRange mode, only show hover preview when selecting end date
+        if (this.multiRange) {
+            if (this.selectingStartDate())
+                return false;
+            if (!this.startDate)
+                return false;
+            const minDate = this.startDate < hover ? this.startDate : hover;
+            const maxDate = this.startDate > hover ? this.startDate : hover;
+            return dateStr >= minDate && dateStr <= maxDate;
+        }
+        else {
+            // In single range mode with requireApply
+            if (this.requireApply) {
+                if (this.selectingStartDate())
+                    return false;
+                if (!this.pendingStartDate)
+                    return false;
+                const minDate = this.pendingStartDate < hover ? this.pendingStartDate : hover;
+                const maxDate = this.pendingStartDate > hover ? this.pendingStartDate : hover;
+                return dateStr >= minDate && dateStr <= maxDate;
+            }
+            else {
+                // In single range mode without requireApply
+                if (this.selectingStartDate())
+                    return false;
+                if (!this.startDate)
+                    return false;
+                const minDate = this.startDate < hover ? this.startDate : hover;
+                const maxDate = this.startDate > hover ? this.startDate : hover;
+                return dateStr >= minDate && dateStr <= maxDate;
+            }
+        }
+    }
+    onDayHover(dayObj) {
+        if (!dayObj.isCurrentMonth || this.isDisabled() || dayObj.isDisabled) {
+            this.hoverDate.set(null);
+            return;
+        }
+        this.hoverDate.set(dayObj.date);
+        this.generateCalendars();
+    }
+    clearDayHover() {
+        this.hoverDate.set(null);
+        this.generateCalendars();
+    }
     selectDay(dayObj) {
-        if (!dayObj.isCurrentMonth || this.isDisabled())
+        if (!dayObj.isCurrentMonth || this.isDisabled() || dayObj.isDisabled)
             return;
         if (this.multiRange) {
             // Multi-range mode: add ranges to array
@@ -576,32 +748,83 @@ class DualDatepickerComponent {
         }
         else {
             // Single range mode (original behavior)
-            if (this.selectingStartDate()) {
-                this.startDate = dayObj.date;
-                this.endDate = '';
-                this.dateRangeText.set('');
-                this.selectingStartDate.set(false);
-                this.emitChange();
+            if (this.requireApply) {
+                // Apply mode: use pending dates, don't emit until Apply is clicked
+                if (this.selectingStartDate()) {
+                    this.pendingStartDate = dayObj.date;
+                    this.pendingEndDate = '';
+                    this.selectingStartDate.set(false);
+                    this.hasPendingChanges.set(true);
+                }
+                else {
+                    if (dayObj.date < this.pendingStartDate) {
+                        this.pendingEndDate = this.pendingStartDate;
+                        this.pendingStartDate = dayObj.date;
+                    }
+                    else {
+                        this.pendingEndDate = dayObj.date;
+                    }
+                    this.selectingStartDate.set(true);
+                    this.hasPendingChanges.set(true);
+                }
+                this.generateCalendars();
             }
             else {
-                if (dayObj.date < this.startDate) {
-                    this.endDate = this.startDate;
+                // Immediate mode: emit changes immediately
+                if (this.selectingStartDate()) {
                     this.startDate = dayObj.date;
+                    this.endDate = '';
+                    this.dateRangeText.set('');
+                    this.selectingStartDate.set(false);
+                    this.emitChange();
                 }
                 else {
-                    this.endDate = dayObj.date;
-                }
-                this.updateDateRangeText();
-                if (this.closeOnSelection) {
-                    this.showDatePicker.set(false);
+                    if (dayObj.date < this.startDate) {
+                        this.endDate = this.startDate;
+                        this.startDate = dayObj.date;
+                    }
+                    else {
+                        this.endDate = dayObj.date;
+                    }
+                    this.updateDateRangeText();
+                    if (this.closeOnSelection) {
+                        this.showDatePicker.set(false);
+                    }
+                    this.selectingStartDate.set(true);
+                    this.emitChange();
+                    this.emitSelection();
                 }
-                this.selectingStartDate.set(true);
-                this.emitChange();
-                this.emitSelection();
+                this.generateCalendars();
             }
-            this.generateCalendars();
         }
     }
+    applySelection() {
+        if (!this.hasPendingChanges())
+            return;
+        // Apply pending dates
+        this.startDate = this.pendingStartDate;
+        this.endDate = this.pendingEndDate;
+        this.updateDateRangeText();
+        // Clear pending state
+        this.pendingStartDate = '';
+        this.pendingEndDate = '';
+        this.hasPendingChanges.set(false);
+        // Emit changes
+        this.emitChange();
+        this.emitSelection();
+        // Close picker
+        this.showDatePicker.set(false);
+        this.selectingStartDate.set(true);
+    }
+    cancelSelection() {
+        // Discard pending changes
+        this.pendingStartDate = '';
+        this.pendingEndDate = '';
+        this.hasPendingChanges.set(false);
+        this.selectingStartDate.set(true);
+        // Regenerate calendars to clear pending visual state
+        this.generateCalendars();
+    }
     changeMonth(direction) {
         const currentMonthValue = this.currentMonth();
         const year = this.dateAdapter.getYear(currentMonthValue);
@@ -733,7 +956,7 @@ class DualDatepickerComponent {
         this.isDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DualDatepickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DualDatepickerComponent, isStandalone: true, selector: "ngx-dual-datepicker", inputs: { placeholder: "placeholder", startDate: "startDate", endDate: "endDate", showPresets: "showPresets", showClearButton: "showClearButton", multiRange: "multiRange", closeOnSelection: "closeOnSelection", closeOnPresetSelection: "closeOnPresetSelection", closeOnClickOutside: "closeOnClickOutside", presets: "presets", inputBackgroundColor: "inputBackgroundColor", inputTextColor: "inputTextColor", inputBorderColor: "inputBorderColor", inputBorderColorHover: "inputBorderColorHover", inputBorderColorFocus: "inputBorderColorFocus", inputPadding: "inputPadding", locale: "locale" }, outputs: { dateRangeChange: "dateRangeChange", dateRangeSelected: "dateRangeSelected", multiDateRangeChange: "multiDateRangeChange", multiDateRangeSelected: "multiDateRangeSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "keydown": "handleKeyboardNavigation($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DualDatepickerComponent, isStandalone: true, selector: "ngx-dual-datepicker", inputs: { placeholder: "placeholder", startDate: "startDate", endDate: "endDate", showPresets: "showPresets", showClearButton: "showClearButton", multiRange: "multiRange", closeOnSelection: "closeOnSelection", closeOnPresetSelection: "closeOnPresetSelection", closeOnClickOutside: "closeOnClickOutside", enableKeyboardNavigation: "enableKeyboardNavigation", presets: "presets", inputBackgroundColor: "inputBackgroundColor", inputTextColor: "inputTextColor", inputBorderColor: "inputBorderColor", inputBorderColorHover: "inputBorderColorHover", inputBorderColorFocus: "inputBorderColorFocus", inputPadding: "inputPadding", locale: "locale", disabledDates: "disabledDates", displayFormat: "displayFormat", requireApply: "requireApply" }, outputs: { dateRangeChange: "dateRangeChange", dateRangeSelected: "dateRangeSelected", multiDateRangeChange: "multiDateRangeChange", multiDateRangeSelected: "multiDateRangeSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "keydown": "handleKeyboardNavigation($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DualDatepickerComponent),
@@ -743,7 +966,7 @@ class DualDatepickerComponent {
                 provide: DATE_ADAPTER,
                 useClass: NativeDateAdapter
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-wrapper\" \n  [style.--input-border-hover]=\"inputBorderColorHover\"\n  [style.--input-border-focus]=\"inputBorderColorFocus\">\n  <input \n    type=\"text\" \n    class=\"datepicker-input\" \n    [value]=\"dateRangeText()\" \n    (click)=\"toggleDatePicker()\" \n    [placeholder]=\"placeholder\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.aria-expanded]=\"showDatePicker()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    role=\"combobox\"\n    [ngStyle]=\"{\n      'background-color': inputBackgroundColor,\n      'color': inputTextColor,\n      'border-color': inputBorderColor,\n      'padding': inputPadding\n    }\"\n    readonly>\n\n  @if (showDatePicker()) {\n  <div class=\"date-picker-dropdown\">\n    @if (showPresets) {\n    <div class=\"date-picker-presets\">\n      @for (preset of presets; track preset.label) {\n      <button type=\"button\" (click)=\"selectPresetRange(preset)\">{{ preset.label }}</button>\n      }\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"closeDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    @if (!showPresets) {\n    <div class=\"date-picker-header-only-close\">\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"closeDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    <!-- Calendars -->\n    <div class=\"date-picker-calendars\">\n      <!-- Previous month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" (click)=\"changeMonth(-1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ previousMonthName() }}</span>\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of weekDayNames(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (dayObj of previousMonthDays(); track dayObj.date || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!dayObj.isCurrentMonth\"\n              [class.selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [class.in-range]=\"dayObj.inRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.keyboard-focused]=\"hasKeyboardFocus(dayObj.date, 0)\"\n              [attr.tabindex]=\"dayObj.isCurrentMonth && hasKeyboardFocus(dayObj.date, 0) ? 0 : -1\"\n              [attr.aria-label]=\"formatDateDisplay(dayObj.date)\"\n              [attr.aria-selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [attr.aria-current]=\"dayObj.isStart ? 'date' : null\"\n              (click)=\"selectDay(dayObj)\"\n              [disabled]=\"!dayObj.isCurrentMonth\">\n              {{ dayObj.day }}\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Current month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ currentMonthName() }}</span>\n          <button type=\"button\" (click)=\"changeMonth(1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of weekDayNames(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (dayObj of currentMonthDays(); track dayObj.date || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!dayObj.isCurrentMonth\"\n              [class.selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [class.in-range]=\"dayObj.inRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.keyboard-focused]=\"hasKeyboardFocus(dayObj.date, 1)\"\n              [attr.tabindex]=\"dayObj.isCurrentMonth && hasKeyboardFocus(dayObj.date, 1) ? 0 : -1\"\n              [attr.aria-label]=\"formatDateDisplay(dayObj.date)\"\n              [attr.aria-selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [attr.aria-current]=\"dayObj.isStart ? 'date' : null\"\n              (click)=\"selectDay(dayObj)\"\n              [disabled]=\"!dayObj.isCurrentMonth\">\n              {{ dayObj.day }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Multi-Range List -->\n    @if (multiRange && selectedRanges().length > 0) {\n    <div class=\"multi-range-list\">\n      <div class=\"multi-range-header\">\n        <span class=\"multi-range-title\">Selected Ranges ({{ selectedRanges().length }})</span>\n      </div>\n      <div class=\"multi-range-items\">\n        @for (range of selectedRanges(); track $index) {\n        <div class=\"multi-range-item\">\n          <span class=\"multi-range-text\">{{ range.rangeText }}</span>\n          <button \n            type=\"button\" \n            class=\"btn-remove-range\" \n            (click)=\"removeRange($index)\"\n            title=\"Remove this range\">\n            <svg width=\"14\" height=\"14\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"/>\n            </svg>\n          </button>\n        </div>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Footer with clear button -->\n    @if (showClearButton || multiRange) {\n    <div class=\"date-picker-footer\">\n      @if (multiRange) {\n        <div class=\"multi-range-footer-actions\">\n          <button type=\"button\" class=\"btn-clear\" (click)=\"clear()\" title=\"Clear all ranges\">\n            Clear All\n          </button>\n          <button type=\"button\" class=\"btn-done\" (click)=\"closeDatePicker()\" title=\"Done selecting\">\n            Done\n          </button>\n        </div>\n      }\n      @if (!multiRange && showClearButton) {\n        <button type=\"button\" class=\"btn-clear\" (click)=\"clear()\" title=\"Clear selection\">\n          Clear\n        </button>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".datepicker-wrapper{position:relative;width:100%}.datepicker-wrapper .datepicker-input{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datepicker-wrapper .datepicker-input:hover{border-color:var(--input-border-hover, #ced4da)}.datepicker-wrapper .datepicker-input:focus{border-color:var(--input-border-focus, #80bdff);box-shadow:0 0 0 .2rem #007bff40;outline:0}.datepicker-wrapper .datepicker-input::placeholder{color:#6c757d;opacity:1}.datepicker-wrapper .datepicker-input:disabled,.datepicker-wrapper .datepicker-input[readonly]{background-color:#e9ecef;opacity:1}.date-picker-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e1e4e8;border-radius:8px;box-shadow:0 4px 12px #00000014,0 0 1px #00000014;padding:16px;z-index:1060;min-width:680px}@media (max-width: 768px){.date-picker-dropdown{min-width:100%;left:0;right:0}}.date-picker-header-only-close{display:flex;justify-content:flex-end;margin-bottom:12px}.date-picker-header-only-close .btn-close-calendar{background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s ease;font-size:1.5rem;line-height:1}.date-picker-header-only-close .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-header-only-close .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-presets{display:flex;gap:6px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb;align-items:center}@media (max-width: 768px){.date-picker-presets{flex-wrap:wrap}}.date-picker-presets button{font-size:.75rem;padding:6px 14px;border:none;background-color:#f9fafb;color:#374151;border-radius:6px;transition:all .15s ease;font-weight:500;cursor:pointer;border:1px solid #e5e7eb}.date-picker-presets button:hover{background-color:#f3f4f6;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 4px #0000000f}.date-picker-presets button:active{transform:translateY(0);box-shadow:none}.date-picker-presets .btn-close-calendar{margin-left:auto;background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;font-size:1.5rem;line-height:1}.date-picker-presets .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-presets .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-calendars{display:flex;gap:32px}@media (max-width: 768px){.date-picker-calendars{flex-direction:column;gap:16px}}.date-picker-calendar{flex:1}.date-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}.date-picker-header span{font-size:.813rem;font-weight:600;color:#111827}.date-picker-header button{padding:4px;color:#6b7280;text-decoration:none;border-radius:6px;transition:all .15s ease;border:none;background:transparent;cursor:pointer}.date-picker-header button:hover{background-color:#f3f4f6;color:#111827}.date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}.date-picker-weekdays span{text-align:center;font-size:.625rem;font-weight:600;color:#6b7280;padding:6px}.date-picker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.date-picker-day{aspect-ratio:1;border:none;background:transparent;border-radius:50%;font-size:.75rem;cursor:pointer;transition:all .15s ease;color:#374151;font-weight:400;position:relative}.date-picker-day:hover:not(:disabled):not(.selected){background-color:#f3f4f6;color:#111827}.date-picker-day.empty{visibility:hidden}.date-picker-day.selected{background-color:#222;color:#fff;font-weight:600}.date-picker-day.in-range{background-color:#f9fafb;border-radius:0}.date-picker-day:disabled{cursor:not-allowed;opacity:.3}.date-picker-day.keyboard-focused{outline:2px solid #3b82f6;outline-offset:2px;z-index:1}.date-picker-day.keyboard-focused:not(.selected){background-color:#eff6ff}.date-picker-day:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;z-index:1}.date-picker-footer{padding:12px;border-top:1px solid #e1e4e8;display:flex;justify-content:center;gap:8px}.date-picker-footer .btn-clear{padding:8px 16px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;font-size:.875rem;font-weight:500;color:#24292f;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-clear:hover{background-color:#f3f4f6;border-color:#8c959f;transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.date-picker-footer .btn-clear:active{transform:translateY(0);box-shadow:none;background-color:#e9ecef}.date-picker-footer .btn-done{padding:8px 16px;background-color:#222;border:1px solid #222;border-radius:6px;font-size:.875rem;font-weight:500;color:#fff;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-done:hover{background-color:#000;border-color:#000;transform:translateY(-1px);box-shadow:0 2px 4px #00000026}.date-picker-footer .btn-done:active{transform:translateY(0);box-shadow:none}.date-picker-footer .multi-range-footer-actions{display:flex;gap:8px;width:100%;justify-content:space-between}.multi-range-list{border-top:1px solid #e1e4e8;border-bottom:1px solid #e1e4e8;padding:12px;margin-top:12px}.multi-range-list .multi-range-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.multi-range-list .multi-range-header .multi-range-title{font-size:.8125rem;font-weight:600;color:#24292f;text-transform:uppercase;letter-spacing:.025em}.multi-range-list .multi-range-items{display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto}.multi-range-list .multi-range-items::-webkit-scrollbar{width:6px}.multi-range-list .multi-range-items::-webkit-scrollbar-track{background:#f1f3f4;border-radius:4px}.multi-range-list .multi-range-items::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.multi-range-list .multi-range-items::-webkit-scrollbar-thumb:hover{background:#a0aec0}.multi-range-list .multi-range-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;transition:all .15s ease}.multi-range-list .multi-range-item:hover{background-color:#f3f4f6;border-color:#8c959f}.multi-range-list .multi-range-item .multi-range-text{font-size:.875rem;color:#24292f;font-weight:500}.multi-range-list .multi-range-item .btn-remove-range{padding:4px;background-color:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .15s ease}.multi-range-list .multi-range-item .btn-remove-range:hover{background-color:#fee;border-color:#fcc;color:#dc2626}.multi-range-list .multi-range-item .btn-remove-range:hover svg{transform:scale(1.1)}.multi-range-list .multi-range-item .btn-remove-range:active{transform:scale(.95)}.multi-range-list .multi-range-item .btn-remove-range svg{transition:transform .15s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-wrapper\" \n  [style.--input-border-hover]=\"inputBorderColorHover\"\n  [style.--input-border-focus]=\"inputBorderColorFocus\">\n  <input \n    type=\"text\" \n    class=\"datepicker-input\" \n    [value]=\"dateRangeText()\" \n    (click)=\"toggleDatePicker()\" \n    [placeholder]=\"placeholder\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.aria-expanded]=\"showDatePicker()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    role=\"combobox\"\n    [ngStyle]=\"{\n      'background-color': inputBackgroundColor,\n      'color': inputTextColor,\n      'border-color': inputBorderColor,\n      'padding': inputPadding\n    }\"\n    readonly>\n\n  @if (showDatePicker()) {\n  <div class=\"date-picker-dropdown\">\n    @if (showPresets) {\n    <div class=\"date-picker-presets\">\n      @for (preset of presets; track preset.label) {\n      <button type=\"button\" (click)=\"selectPresetRange(preset)\">{{ preset.label }}</button>\n      }\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"closeDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    @if (!showPresets) {\n    <div class=\"date-picker-header-only-close\">\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"closeDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    <!-- Calendars -->\n    <div class=\"date-picker-calendars\">\n      <!-- Previous month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" (click)=\"changeMonth(-1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ previousMonthName() }}</span>\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of weekDayNames(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (dayObj of previousMonthDays(); track dayObj.date || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!dayObj.isCurrentMonth\"\n              [class.selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [class.in-range]=\"dayObj.inRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.in-hover-range]=\"dayObj.inHoverRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.disabled]=\"dayObj.isDisabled\"\n              [class.keyboard-focused]=\"enableKeyboardNavigation && hasKeyboardFocus(dayObj.date, 0)\"\n              [attr.tabindex]=\"enableKeyboardNavigation && dayObj.isCurrentMonth && hasKeyboardFocus(dayObj.date, 0) ? 0 : -1\"\n              [attr.aria-label]=\"formatDateDisplay(dayObj.date)\"\n              [attr.aria-selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [attr.aria-current]=\"dayObj.isStart ? 'date' : null\"\n              [attr.aria-disabled]=\"dayObj.isDisabled\"\n              (click)=\"selectDay(dayObj)\"\n              (mouseenter)=\"onDayHover(dayObj)\"\n              (mouseleave)=\"clearDayHover()\"\n              [disabled]=\"!dayObj.isCurrentMonth || dayObj.isDisabled\">\n              {{ dayObj.day }}\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Current month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ currentMonthName() }}</span>\n          <button type=\"button\" (click)=\"changeMonth(1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of weekDayNames(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (dayObj of currentMonthDays(); track dayObj.date || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!dayObj.isCurrentMonth\"\n              [class.selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [class.in-range]=\"dayObj.inRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.in-hover-range]=\"dayObj.inHoverRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.disabled]=\"dayObj.isDisabled\"\n              [class.keyboard-focused]=\"enableKeyboardNavigation && hasKeyboardFocus(dayObj.date, 1)\"\n              [attr.tabindex]=\"enableKeyboardNavigation && dayObj.isCurrentMonth && hasKeyboardFocus(dayObj.date, 1) ? 0 : -1\"\n              [attr.aria-label]=\"formatDateDisplay(dayObj.date)\"\n              [attr.aria-selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [attr.aria-current]=\"dayObj.isStart ? 'date' : null\"\n              [attr.aria-disabled]=\"dayObj.isDisabled\"\n              (click)=\"selectDay(dayObj)\"\n              (mouseenter)=\"onDayHover(dayObj)\"\n              (mouseleave)=\"clearDayHover()\"\n              [disabled]=\"!dayObj.isCurrentMonth || dayObj.isDisabled\">\n              {{ dayObj.day }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Multi-Range List -->\n    @if (multiRange && selectedRanges().length > 0) {\n    <div class=\"multi-range-list\">\n      <div class=\"multi-range-header\">\n        <span class=\"multi-range-title\">Selected Ranges ({{ selectedRanges().length }})</span>\n      </div>\n      <div class=\"multi-range-items\">\n        @for (range of selectedRanges(); track $index) {\n        <div class=\"multi-range-item\">\n          <span class=\"multi-range-text\">{{ range.rangeText }}</span>\n          <button \n            type=\"button\" \n            class=\"btn-remove-range\" \n            (click)=\"removeRange($index)\"\n            title=\"Remove this range\">\n            <svg width=\"14\" height=\"14\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"/>\n            </svg>\n          </button>\n        </div>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Footer with buttons -->\n    @if (showClearButton || multiRange || requireApply) {\n    <div class=\"date-picker-footer\">\n      @if (requireApply && !multiRange) {\n        <div class=\"apply-footer-actions\">\n          <button \n            type=\"button\" \n            class=\"btn-cancel\" \n            (click)=\"cancelSelection()\" \n            [disabled]=\"!hasPendingChanges()\"\n            title=\"Cancel selection\">\n            Cancel\n          </button>\n          <button \n            type=\"button\" \n            class=\"btn-apply\" \n            (click)=\"applySelection()\" \n            [disabled]=\"!hasPendingChanges() || !pendingStartDate || !pendingEndDate\"\n            title=\"Apply selection\">\n            Apply\n          </button>\n        </div>\n      }\n      @if (multiRange) {\n        <div class=\"multi-range-footer-actions\">\n          <button type=\"button\" class=\"btn-clear\" (click)=\"clear()\" title=\"Clear all ranges\">\n            Clear All\n          </button>\n          <button type=\"button\" class=\"btn-done\" (click)=\"closeDatePicker()\" title=\"Done selecting\">\n            Done\n          </button>\n        </div>\n      }\n      @if (!multiRange && !requireApply && showClearButton) {\n        <button type=\"button\" class=\"btn-clear\" (click)=\"clear()\" title=\"Clear selection\">\n          Clear\n        </button>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".datepicker-wrapper{position:relative;width:100%}.datepicker-wrapper .datepicker-input{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datepicker-wrapper .datepicker-input:hover{border-color:var(--input-border-hover, #ced4da)}.datepicker-wrapper .datepicker-input:focus{border-color:var(--input-border-focus, #80bdff);box-shadow:0 0 0 .2rem #007bff40;outline:0}.datepicker-wrapper .datepicker-input::placeholder{color:#6c757d;opacity:1}.datepicker-wrapper .datepicker-input:disabled,.datepicker-wrapper .datepicker-input[readonly]{background-color:#e9ecef;opacity:1}.date-picker-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e1e4e8;border-radius:8px;box-shadow:0 4px 12px #00000014,0 0 1px #00000014;padding:16px;z-index:1060;min-width:680px}@media (max-width: 768px){.date-picker-dropdown{min-width:100%;left:0;right:0}}.date-picker-header-only-close{display:flex;justify-content:flex-end;margin-bottom:12px}.date-picker-header-only-close .btn-close-calendar{background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s ease;font-size:1.5rem;line-height:1}.date-picker-header-only-close .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-header-only-close .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-presets{display:flex;gap:6px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb;align-items:center}@media (max-width: 768px){.date-picker-presets{flex-wrap:wrap}}.date-picker-presets button{font-size:.75rem;padding:6px 14px;border:none;background-color:#f9fafb;color:#374151;border-radius:6px;transition:all .15s ease;font-weight:500;cursor:pointer;border:1px solid #e5e7eb}.date-picker-presets button:hover{background-color:#f3f4f6;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 4px #0000000f}.date-picker-presets button:active{transform:translateY(0);box-shadow:none}.date-picker-presets .btn-close-calendar{margin-left:auto;background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;font-size:1.5rem;line-height:1}.date-picker-presets .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-presets .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-calendars{display:flex;gap:32px}@media (max-width: 768px){.date-picker-calendars{flex-direction:column;gap:16px}}.date-picker-calendar{flex:1}.date-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}.date-picker-header span{font-size:.813rem;font-weight:600;color:#111827}.date-picker-header button{padding:4px;color:#6b7280;text-decoration:none;border-radius:6px;transition:all .15s ease;border:none;background:transparent;cursor:pointer}.date-picker-header button:hover{background-color:#f3f4f6;color:#111827}.date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}.date-picker-weekdays span{text-align:center;font-size:.625rem;font-weight:600;color:#6b7280;padding:6px}.date-picker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.date-picker-day{aspect-ratio:1;border:none;background:transparent;border-radius:50%;font-size:.75rem;cursor:pointer;transition:all .15s ease;color:#374151;font-weight:400;position:relative}.date-picker-day:hover:not(:disabled):not(.selected){background-color:#f3f4f6;color:#111827}.date-picker-day.empty{visibility:hidden}.date-picker-day.selected{background-color:#222;color:#fff;font-weight:600}.date-picker-day.in-range{background-color:#f9fafb;border-radius:0}.date-picker-day.in-hover-range{background-color:#e0e7ff;border-radius:0;opacity:.7;position:relative}.date-picker-day.in-hover-range:after{content:\"\";position:absolute;inset:0;border:1px dashed #6366f1;pointer-events:none}.date-picker-day:disabled{cursor:not-allowed;opacity:.3}.date-picker-day.disabled{cursor:not-allowed;opacity:.4;color:#9ca3af;background-color:#f9fafb;text-decoration:line-through}.date-picker-day.disabled:hover{background-color:#f9fafb;color:#9ca3af}.date-picker-day.keyboard-focused{outline:2px solid #3b82f6;outline-offset:2px;z-index:1}.date-picker-day.keyboard-focused:not(.selected){background-color:#eff6ff}.date-picker-day:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;z-index:1}.date-picker-footer{padding:12px;border-top:1px solid #e1e4e8;display:flex;justify-content:center;gap:8px}.date-picker-footer .btn-clear{padding:8px 16px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;font-size:.875rem;font-weight:500;color:#24292f;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-clear:hover{background-color:#f3f4f6;border-color:#8c959f;transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.date-picker-footer .btn-clear:active{transform:translateY(0);box-shadow:none;background-color:#e9ecef}.date-picker-footer .btn-done{padding:8px 16px;background-color:#222;border:1px solid #222;border-radius:6px;font-size:.875rem;font-weight:500;color:#fff;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-done:hover{background-color:#000;border-color:#000;transform:translateY(-1px);box-shadow:0 2px 4px #00000026}.date-picker-footer .btn-done:active{transform:translateY(0);box-shadow:none}.date-picker-footer .btn-apply{padding:8px 24px;background-color:#2563eb;border:1px solid #2563eb;border-radius:6px;font-size:.875rem;font-weight:600;color:#fff;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-apply:hover:not(:disabled){background-color:#1d4ed8;border-color:#1d4ed8;transform:translateY(-1px);box-shadow:0 2px 8px #2563eb40}.date-picker-footer .btn-apply:active:not(:disabled){transform:translateY(0);box-shadow:none}.date-picker-footer .btn-apply:disabled{opacity:.5;cursor:not-allowed}.date-picker-footer .btn-cancel{padding:8px 24px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;font-size:.875rem;font-weight:500;color:#24292f;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-cancel:hover:not(:disabled){background-color:#f3f4f6;border-color:#8c959f;transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.date-picker-footer .btn-cancel:active:not(:disabled){transform:translateY(0);box-shadow:none;background-color:#e9ecef}.date-picker-footer .btn-cancel:disabled{opacity:.5;cursor:not-allowed}.date-picker-footer .apply-footer-actions{display:flex;gap:8px;width:100%;justify-content:flex-end}.date-picker-footer .multi-range-footer-actions{display:flex;gap:8px;width:100%;justify-content:space-between}.multi-range-list{border-top:1px solid #e1e4e8;border-bottom:1px solid #e1e4e8;padding:12px;margin-top:12px}.multi-range-list .multi-range-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.multi-range-list .multi-range-header .multi-range-title{font-size:.8125rem;font-weight:600;color:#24292f;text-transform:uppercase;letter-spacing:.025em}.multi-range-list .multi-range-items{display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto}.multi-range-list .multi-range-items::-webkit-scrollbar{width:6px}.multi-range-list .multi-range-items::-webkit-scrollbar-track{background:#f1f3f4;border-radius:4px}.multi-range-list .multi-range-items::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.multi-range-list .multi-range-items::-webkit-scrollbar-thumb:hover{background:#a0aec0}.multi-range-list .multi-range-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;transition:all .15s ease}.multi-range-list .multi-range-item:hover{background-color:#f3f4f6;border-color:#8c959f}.multi-range-list .multi-range-item .multi-range-text{font-size:.875rem;color:#24292f;font-weight:500}.multi-range-list .multi-range-item .btn-remove-range{padding:4px;background-color:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .15s ease}.multi-range-list .multi-range-item .btn-remove-range:hover{background-color:#fee;border-color:#fcc;color:#dc2626}.multi-range-list .multi-range-item .btn-remove-range:hover svg{transform:scale(1.1)}.multi-range-list .multi-range-item .btn-remove-range:active{transform:scale(.95)}.multi-range-list .multi-range-item .btn-remove-range svg{transition:transform .15s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DualDatepickerComponent, decorators: [{
             type: Component,
@@ -757,7 +980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             provide: DATE_ADAPTER,
                             useClass: NativeDateAdapter
                         }
-                    ], template: "<div class=\"datepicker-wrapper\" \n  [style.--input-border-hover]=\"inputBorderColorHover\"\n  [style.--input-border-focus]=\"inputBorderColorFocus\">\n  <input \n    type=\"text\" \n    class=\"datepicker-input\" \n    [value]=\"dateRangeText()\" \n    (click)=\"toggleDatePicker()\" \n    [placeholder]=\"placeholder\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.aria-expanded]=\"showDatePicker()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    role=\"combobox\"\n    [ngStyle]=\"{\n      'background-color': inputBackgroundColor,\n      'color': inputTextColor,\n      'border-color': inputBorderColor,\n      'padding': inputPadding\n    }\"\n    readonly>\n\n  @if (showDatePicker()) {\n  <div class=\"date-picker-dropdown\">\n    @if (showPresets) {\n    <div class=\"date-picker-presets\">\n      @for (preset of presets; track preset.label) {\n      <button type=\"button\" (click)=\"selectPresetRange(preset)\">{{ preset.label }}</button>\n      }\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"closeDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    @if (!showPresets) {\n    <div class=\"date-picker-header-only-close\">\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"closeDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    <!-- Calendars -->\n    <div class=\"date-picker-calendars\">\n      <!-- Previous month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" (click)=\"changeMonth(-1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ previousMonthName() }}</span>\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of weekDayNames(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (dayObj of previousMonthDays(); track dayObj.date || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!dayObj.isCurrentMonth\"\n              [class.selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [class.in-range]=\"dayObj.inRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.keyboard-focused]=\"hasKeyboardFocus(dayObj.date, 0)\"\n              [attr.tabindex]=\"dayObj.isCurrentMonth && hasKeyboardFocus(dayObj.date, 0) ? 0 : -1\"\n              [attr.aria-label]=\"formatDateDisplay(dayObj.date)\"\n              [attr.aria-selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [attr.aria-current]=\"dayObj.isStart ? 'date' : null\"\n              (click)=\"selectDay(dayObj)\"\n              [disabled]=\"!dayObj.isCurrentMonth\">\n              {{ dayObj.day }}\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Current month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ currentMonthName() }}</span>\n          <button type=\"button\" (click)=\"changeMonth(1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of weekDayNames(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (dayObj of currentMonthDays(); track dayObj.date || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!dayObj.isCurrentMonth\"\n              [class.selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [class.in-range]=\"dayObj.inRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.keyboard-focused]=\"hasKeyboardFocus(dayObj.date, 1)\"\n              [attr.tabindex]=\"dayObj.isCurrentMonth && hasKeyboardFocus(dayObj.date, 1) ? 0 : -1\"\n              [attr.aria-label]=\"formatDateDisplay(dayObj.date)\"\n              [attr.aria-selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [attr.aria-current]=\"dayObj.isStart ? 'date' : null\"\n              (click)=\"selectDay(dayObj)\"\n              [disabled]=\"!dayObj.isCurrentMonth\">\n              {{ dayObj.day }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Multi-Range List -->\n    @if (multiRange && selectedRanges().length > 0) {\n    <div class=\"multi-range-list\">\n      <div class=\"multi-range-header\">\n        <span class=\"multi-range-title\">Selected Ranges ({{ selectedRanges().length }})</span>\n      </div>\n      <div class=\"multi-range-items\">\n        @for (range of selectedRanges(); track $index) {\n        <div class=\"multi-range-item\">\n          <span class=\"multi-range-text\">{{ range.rangeText }}</span>\n          <button \n            type=\"button\" \n            class=\"btn-remove-range\" \n            (click)=\"removeRange($index)\"\n            title=\"Remove this range\">\n            <svg width=\"14\" height=\"14\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"/>\n            </svg>\n          </button>\n        </div>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Footer with clear button -->\n    @if (showClearButton || multiRange) {\n    <div class=\"date-picker-footer\">\n      @if (multiRange) {\n        <div class=\"multi-range-footer-actions\">\n          <button type=\"button\" class=\"btn-clear\" (click)=\"clear()\" title=\"Clear all ranges\">\n            Clear All\n          </button>\n          <button type=\"button\" class=\"btn-done\" (click)=\"closeDatePicker()\" title=\"Done selecting\">\n            Done\n          </button>\n        </div>\n      }\n      @if (!multiRange && showClearButton) {\n        <button type=\"button\" class=\"btn-clear\" (click)=\"clear()\" title=\"Clear selection\">\n          Clear\n        </button>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".datepicker-wrapper{position:relative;width:100%}.datepicker-wrapper .datepicker-input{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datepicker-wrapper .datepicker-input:hover{border-color:var(--input-border-hover, #ced4da)}.datepicker-wrapper .datepicker-input:focus{border-color:var(--input-border-focus, #80bdff);box-shadow:0 0 0 .2rem #007bff40;outline:0}.datepicker-wrapper .datepicker-input::placeholder{color:#6c757d;opacity:1}.datepicker-wrapper .datepicker-input:disabled,.datepicker-wrapper .datepicker-input[readonly]{background-color:#e9ecef;opacity:1}.date-picker-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e1e4e8;border-radius:8px;box-shadow:0 4px 12px #00000014,0 0 1px #00000014;padding:16px;z-index:1060;min-width:680px}@media (max-width: 768px){.date-picker-dropdown{min-width:100%;left:0;right:0}}.date-picker-header-only-close{display:flex;justify-content:flex-end;margin-bottom:12px}.date-picker-header-only-close .btn-close-calendar{background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s ease;font-size:1.5rem;line-height:1}.date-picker-header-only-close .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-header-only-close .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-presets{display:flex;gap:6px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb;align-items:center}@media (max-width: 768px){.date-picker-presets{flex-wrap:wrap}}.date-picker-presets button{font-size:.75rem;padding:6px 14px;border:none;background-color:#f9fafb;color:#374151;border-radius:6px;transition:all .15s ease;font-weight:500;cursor:pointer;border:1px solid #e5e7eb}.date-picker-presets button:hover{background-color:#f3f4f6;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 4px #0000000f}.date-picker-presets button:active{transform:translateY(0);box-shadow:none}.date-picker-presets .btn-close-calendar{margin-left:auto;background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;font-size:1.5rem;line-height:1}.date-picker-presets .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-presets .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-calendars{display:flex;gap:32px}@media (max-width: 768px){.date-picker-calendars{flex-direction:column;gap:16px}}.date-picker-calendar{flex:1}.date-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}.date-picker-header span{font-size:.813rem;font-weight:600;color:#111827}.date-picker-header button{padding:4px;color:#6b7280;text-decoration:none;border-radius:6px;transition:all .15s ease;border:none;background:transparent;cursor:pointer}.date-picker-header button:hover{background-color:#f3f4f6;color:#111827}.date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}.date-picker-weekdays span{text-align:center;font-size:.625rem;font-weight:600;color:#6b7280;padding:6px}.date-picker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.date-picker-day{aspect-ratio:1;border:none;background:transparent;border-radius:50%;font-size:.75rem;cursor:pointer;transition:all .15s ease;color:#374151;font-weight:400;position:relative}.date-picker-day:hover:not(:disabled):not(.selected){background-color:#f3f4f6;color:#111827}.date-picker-day.empty{visibility:hidden}.date-picker-day.selected{background-color:#222;color:#fff;font-weight:600}.date-picker-day.in-range{background-color:#f9fafb;border-radius:0}.date-picker-day:disabled{cursor:not-allowed;opacity:.3}.date-picker-day.keyboard-focused{outline:2px solid #3b82f6;outline-offset:2px;z-index:1}.date-picker-day.keyboard-focused:not(.selected){background-color:#eff6ff}.date-picker-day:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;z-index:1}.date-picker-footer{padding:12px;border-top:1px solid #e1e4e8;display:flex;justify-content:center;gap:8px}.date-picker-footer .btn-clear{padding:8px 16px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;font-size:.875rem;font-weight:500;color:#24292f;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-clear:hover{background-color:#f3f4f6;border-color:#8c959f;transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.date-picker-footer .btn-clear:active{transform:translateY(0);box-shadow:none;background-color:#e9ecef}.date-picker-footer .btn-done{padding:8px 16px;background-color:#222;border:1px solid #222;border-radius:6px;font-size:.875rem;font-weight:500;color:#fff;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-done:hover{background-color:#000;border-color:#000;transform:translateY(-1px);box-shadow:0 2px 4px #00000026}.date-picker-footer .btn-done:active{transform:translateY(0);box-shadow:none}.date-picker-footer .multi-range-footer-actions{display:flex;gap:8px;width:100%;justify-content:space-between}.multi-range-list{border-top:1px solid #e1e4e8;border-bottom:1px solid #e1e4e8;padding:12px;margin-top:12px}.multi-range-list .multi-range-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.multi-range-list .multi-range-header .multi-range-title{font-size:.8125rem;font-weight:600;color:#24292f;text-transform:uppercase;letter-spacing:.025em}.multi-range-list .multi-range-items{display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto}.multi-range-list .multi-range-items::-webkit-scrollbar{width:6px}.multi-range-list .multi-range-items::-webkit-scrollbar-track{background:#f1f3f4;border-radius:4px}.multi-range-list .multi-range-items::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.multi-range-list .multi-range-items::-webkit-scrollbar-thumb:hover{background:#a0aec0}.multi-range-list .multi-range-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;transition:all .15s ease}.multi-range-list .multi-range-item:hover{background-color:#f3f4f6;border-color:#8c959f}.multi-range-list .multi-range-item .multi-range-text{font-size:.875rem;color:#24292f;font-weight:500}.multi-range-list .multi-range-item .btn-remove-range{padding:4px;background-color:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .15s ease}.multi-range-list .multi-range-item .btn-remove-range:hover{background-color:#fee;border-color:#fcc;color:#dc2626}.multi-range-list .multi-range-item .btn-remove-range:hover svg{transform:scale(1.1)}.multi-range-list .multi-range-item .btn-remove-range:active{transform:scale(.95)}.multi-range-list .multi-range-item .btn-remove-range svg{transition:transform .15s ease}\n"] }]
+                    ], template: "<div class=\"datepicker-wrapper\" \n  [style.--input-border-hover]=\"inputBorderColorHover\"\n  [style.--input-border-focus]=\"inputBorderColorFocus\">\n  <input \n    type=\"text\" \n    class=\"datepicker-input\" \n    [value]=\"dateRangeText()\" \n    (click)=\"toggleDatePicker()\" \n    [placeholder]=\"placeholder\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.aria-expanded]=\"showDatePicker()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    role=\"combobox\"\n    [ngStyle]=\"{\n      'background-color': inputBackgroundColor,\n      'color': inputTextColor,\n      'border-color': inputBorderColor,\n      'padding': inputPadding\n    }\"\n    readonly>\n\n  @if (showDatePicker()) {\n  <div class=\"date-picker-dropdown\">\n    @if (showPresets) {\n    <div class=\"date-picker-presets\">\n      @for (preset of presets; track preset.label) {\n      <button type=\"button\" (click)=\"selectPresetRange(preset)\">{{ preset.label }}</button>\n      }\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"closeDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    @if (!showPresets) {\n    <div class=\"date-picker-header-only-close\">\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"closeDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    <!-- Calendars -->\n    <div class=\"date-picker-calendars\">\n      <!-- Previous month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" (click)=\"changeMonth(-1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ previousMonthName() }}</span>\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of weekDayNames(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (dayObj of previousMonthDays(); track dayObj.date || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!dayObj.isCurrentMonth\"\n              [class.selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [class.in-range]=\"dayObj.inRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.in-hover-range]=\"dayObj.inHoverRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.disabled]=\"dayObj.isDisabled\"\n              [class.keyboard-focused]=\"enableKeyboardNavigation && hasKeyboardFocus(dayObj.date, 0)\"\n              [attr.tabindex]=\"enableKeyboardNavigation && dayObj.isCurrentMonth && hasKeyboardFocus(dayObj.date, 0) ? 0 : -1\"\n              [attr.aria-label]=\"formatDateDisplay(dayObj.date)\"\n              [attr.aria-selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [attr.aria-current]=\"dayObj.isStart ? 'date' : null\"\n              [attr.aria-disabled]=\"dayObj.isDisabled\"\n              (click)=\"selectDay(dayObj)\"\n              (mouseenter)=\"onDayHover(dayObj)\"\n              (mouseleave)=\"clearDayHover()\"\n              [disabled]=\"!dayObj.isCurrentMonth || dayObj.isDisabled\">\n              {{ dayObj.day }}\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Current month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ currentMonthName() }}</span>\n          <button type=\"button\" (click)=\"changeMonth(1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of weekDayNames(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (dayObj of currentMonthDays(); track dayObj.date || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!dayObj.isCurrentMonth\"\n              [class.selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [class.in-range]=\"dayObj.inRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.in-hover-range]=\"dayObj.inHoverRange && !dayObj.isStart && !dayObj.isEnd\"\n              [class.disabled]=\"dayObj.isDisabled\"\n              [class.keyboard-focused]=\"enableKeyboardNavigation && hasKeyboardFocus(dayObj.date, 1)\"\n              [attr.tabindex]=\"enableKeyboardNavigation && dayObj.isCurrentMonth && hasKeyboardFocus(dayObj.date, 1) ? 0 : -1\"\n              [attr.aria-label]=\"formatDateDisplay(dayObj.date)\"\n              [attr.aria-selected]=\"dayObj.isStart || dayObj.isEnd\"\n              [attr.aria-current]=\"dayObj.isStart ? 'date' : null\"\n              [attr.aria-disabled]=\"dayObj.isDisabled\"\n              (click)=\"selectDay(dayObj)\"\n              (mouseenter)=\"onDayHover(dayObj)\"\n              (mouseleave)=\"clearDayHover()\"\n              [disabled]=\"!dayObj.isCurrentMonth || dayObj.isDisabled\">\n              {{ dayObj.day }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Multi-Range List -->\n    @if (multiRange && selectedRanges().length > 0) {\n    <div class=\"multi-range-list\">\n      <div class=\"multi-range-header\">\n        <span class=\"multi-range-title\">Selected Ranges ({{ selectedRanges().length }})</span>\n      </div>\n      <div class=\"multi-range-items\">\n        @for (range of selectedRanges(); track $index) {\n        <div class=\"multi-range-item\">\n          <span class=\"multi-range-text\">{{ range.rangeText }}</span>\n          <button \n            type=\"button\" \n            class=\"btn-remove-range\" \n            (click)=\"removeRange($index)\"\n            title=\"Remove this range\">\n            <svg width=\"14\" height=\"14\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"/>\n            </svg>\n          </button>\n        </div>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Footer with buttons -->\n    @if (showClearButton || multiRange || requireApply) {\n    <div class=\"date-picker-footer\">\n      @if (requireApply && !multiRange) {\n        <div class=\"apply-footer-actions\">\n          <button \n            type=\"button\" \n            class=\"btn-cancel\" \n            (click)=\"cancelSelection()\" \n            [disabled]=\"!hasPendingChanges()\"\n            title=\"Cancel selection\">\n            Cancel\n          </button>\n          <button \n            type=\"button\" \n            class=\"btn-apply\" \n            (click)=\"applySelection()\" \n            [disabled]=\"!hasPendingChanges() || !pendingStartDate || !pendingEndDate\"\n            title=\"Apply selection\">\n            Apply\n          </button>\n        </div>\n      }\n      @if (multiRange) {\n        <div class=\"multi-range-footer-actions\">\n          <button type=\"button\" class=\"btn-clear\" (click)=\"clear()\" title=\"Clear all ranges\">\n            Clear All\n          </button>\n          <button type=\"button\" class=\"btn-done\" (click)=\"closeDatePicker()\" title=\"Done selecting\">\n            Done\n          </button>\n        </div>\n      }\n      @if (!multiRange && !requireApply && showClearButton) {\n        <button type=\"button\" class=\"btn-clear\" (click)=\"clear()\" title=\"Clear selection\">\n          Clear\n        </button>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".datepicker-wrapper{position:relative;width:100%}.datepicker-wrapper .datepicker-input{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datepicker-wrapper .datepicker-input:hover{border-color:var(--input-border-hover, #ced4da)}.datepicker-wrapper .datepicker-input:focus{border-color:var(--input-border-focus, #80bdff);box-shadow:0 0 0 .2rem #007bff40;outline:0}.datepicker-wrapper .datepicker-input::placeholder{color:#6c757d;opacity:1}.datepicker-wrapper .datepicker-input:disabled,.datepicker-wrapper .datepicker-input[readonly]{background-color:#e9ecef;opacity:1}.date-picker-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e1e4e8;border-radius:8px;box-shadow:0 4px 12px #00000014,0 0 1px #00000014;padding:16px;z-index:1060;min-width:680px}@media (max-width: 768px){.date-picker-dropdown{min-width:100%;left:0;right:0}}.date-picker-header-only-close{display:flex;justify-content:flex-end;margin-bottom:12px}.date-picker-header-only-close .btn-close-calendar{background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s ease;font-size:1.5rem;line-height:1}.date-picker-header-only-close .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-header-only-close .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-presets{display:flex;gap:6px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb;align-items:center}@media (max-width: 768px){.date-picker-presets{flex-wrap:wrap}}.date-picker-presets button{font-size:.75rem;padding:6px 14px;border:none;background-color:#f9fafb;color:#374151;border-radius:6px;transition:all .15s ease;font-weight:500;cursor:pointer;border:1px solid #e5e7eb}.date-picker-presets button:hover{background-color:#f3f4f6;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 4px #0000000f}.date-picker-presets button:active{transform:translateY(0);box-shadow:none}.date-picker-presets .btn-close-calendar{margin-left:auto;background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;font-size:1.5rem;line-height:1}.date-picker-presets .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-presets .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-calendars{display:flex;gap:32px}@media (max-width: 768px){.date-picker-calendars{flex-direction:column;gap:16px}}.date-picker-calendar{flex:1}.date-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}.date-picker-header span{font-size:.813rem;font-weight:600;color:#111827}.date-picker-header button{padding:4px;color:#6b7280;text-decoration:none;border-radius:6px;transition:all .15s ease;border:none;background:transparent;cursor:pointer}.date-picker-header button:hover{background-color:#f3f4f6;color:#111827}.date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}.date-picker-weekdays span{text-align:center;font-size:.625rem;font-weight:600;color:#6b7280;padding:6px}.date-picker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.date-picker-day{aspect-ratio:1;border:none;background:transparent;border-radius:50%;font-size:.75rem;cursor:pointer;transition:all .15s ease;color:#374151;font-weight:400;position:relative}.date-picker-day:hover:not(:disabled):not(.selected){background-color:#f3f4f6;color:#111827}.date-picker-day.empty{visibility:hidden}.date-picker-day.selected{background-color:#222;color:#fff;font-weight:600}.date-picker-day.in-range{background-color:#f9fafb;border-radius:0}.date-picker-day.in-hover-range{background-color:#e0e7ff;border-radius:0;opacity:.7;position:relative}.date-picker-day.in-hover-range:after{content:\"\";position:absolute;inset:0;border:1px dashed #6366f1;pointer-events:none}.date-picker-day:disabled{cursor:not-allowed;opacity:.3}.date-picker-day.disabled{cursor:not-allowed;opacity:.4;color:#9ca3af;background-color:#f9fafb;text-decoration:line-through}.date-picker-day.disabled:hover{background-color:#f9fafb;color:#9ca3af}.date-picker-day.keyboard-focused{outline:2px solid #3b82f6;outline-offset:2px;z-index:1}.date-picker-day.keyboard-focused:not(.selected){background-color:#eff6ff}.date-picker-day:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;z-index:1}.date-picker-footer{padding:12px;border-top:1px solid #e1e4e8;display:flex;justify-content:center;gap:8px}.date-picker-footer .btn-clear{padding:8px 16px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;font-size:.875rem;font-weight:500;color:#24292f;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-clear:hover{background-color:#f3f4f6;border-color:#8c959f;transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.date-picker-footer .btn-clear:active{transform:translateY(0);box-shadow:none;background-color:#e9ecef}.date-picker-footer .btn-done{padding:8px 16px;background-color:#222;border:1px solid #222;border-radius:6px;font-size:.875rem;font-weight:500;color:#fff;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-done:hover{background-color:#000;border-color:#000;transform:translateY(-1px);box-shadow:0 2px 4px #00000026}.date-picker-footer .btn-done:active{transform:translateY(0);box-shadow:none}.date-picker-footer .btn-apply{padding:8px 24px;background-color:#2563eb;border:1px solid #2563eb;border-radius:6px;font-size:.875rem;font-weight:600;color:#fff;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-apply:hover:not(:disabled){background-color:#1d4ed8;border-color:#1d4ed8;transform:translateY(-1px);box-shadow:0 2px 8px #2563eb40}.date-picker-footer .btn-apply:active:not(:disabled){transform:translateY(0);box-shadow:none}.date-picker-footer .btn-apply:disabled{opacity:.5;cursor:not-allowed}.date-picker-footer .btn-cancel{padding:8px 24px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;font-size:.875rem;font-weight:500;color:#24292f;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-cancel:hover:not(:disabled){background-color:#f3f4f6;border-color:#8c959f;transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.date-picker-footer .btn-cancel:active:not(:disabled){transform:translateY(0);box-shadow:none;background-color:#e9ecef}.date-picker-footer .btn-cancel:disabled{opacity:.5;cursor:not-allowed}.date-picker-footer .apply-footer-actions{display:flex;gap:8px;width:100%;justify-content:flex-end}.date-picker-footer .multi-range-footer-actions{display:flex;gap:8px;width:100%;justify-content:space-between}.multi-range-list{border-top:1px solid #e1e4e8;border-bottom:1px solid #e1e4e8;padding:12px;margin-top:12px}.multi-range-list .multi-range-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.multi-range-list .multi-range-header .multi-range-title{font-size:.8125rem;font-weight:600;color:#24292f;text-transform:uppercase;letter-spacing:.025em}.multi-range-list .multi-range-items{display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto}.multi-range-list .multi-range-items::-webkit-scrollbar{width:6px}.multi-range-list .multi-range-items::-webkit-scrollbar-track{background:#f1f3f4;border-radius:4px}.multi-range-list .multi-range-items::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.multi-range-list .multi-range-items::-webkit-scrollbar-thumb:hover{background:#a0aec0}.multi-range-list .multi-range-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;transition:all .15s ease}.multi-range-list .multi-range-item:hover{background-color:#f3f4f6;border-color:#8c959f}.multi-range-list .multi-range-item .multi-range-text{font-size:.875rem;color:#24292f;font-weight:500}.multi-range-list .multi-range-item .btn-remove-range{padding:4px;background-color:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .15s ease}.multi-range-list .multi-range-item .btn-remove-range:hover{background-color:#fee;border-color:#fcc;color:#dc2626}.multi-range-list .multi-range-item .btn-remove-range:hover svg{transform:scale(1.1)}.multi-range-list .multi-range-item .btn-remove-range:active{transform:scale(.95)}.multi-range-list .multi-range-item .btn-remove-range svg{transition:transform .15s ease}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { placeholder: [{
                 type: Input
             }], startDate: [{
@@ -776,6 +999,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], closeOnClickOutside: [{
                 type: Input
+            }], enableKeyboardNavigation: [{
+                type: Input
             }], presets: [{
                 type: Input
             }], inputBackgroundColor: [{
@@ -792,6 +1017,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], locale: [{
                 type: Input
+            }], disabledDates: [{
+                type: Input
+            }], displayFormat: [{
+                type: Input
+            }], requireApply: [{
+                type: Input
             }], dateRangeChange: [{
                 type: Output
             }], dateRangeSelected: [{