@oneluiz/dual-datepicker 4.0.0 → 4.0.2

package/fesm2022/oneluiz-dual-datepicker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, signal, computed, makeEnvironmentProviders, APP_INITIALIZER, Inject, EventEmitter, effect, forwardRef, HostListener, Output, Input, Component } from '@angular/core';
+import { InjectionToken, Injectable, inject, signal, computed, makeEnvironmentProviders, APP_INITIALIZER, Optional, Inject, EventEmitter, effect, forwardRef, HostListener, Output, Input, Component } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -195,10 +195,10 @@ class SystemClock {
     now() {
         return new Date();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SystemClock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SystemClock, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SystemClock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SystemClock, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SystemClock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SystemClock, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -555,10 +555,10 @@ class NativeDateAdapter {
         const startsWithMonday = mondayStartLocales.some(loc => normalizedLocale.startsWith(loc.toLowerCase()));
         return startsWithMonday ? 1 : 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NativeDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NativeDateAdapter, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NativeDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NativeDateAdapter, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NativeDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NativeDateAdapter, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -899,10 +899,10 @@ class PresetRegistry {
     clear() {
         this.presets.clear();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetRegistry, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PresetRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PresetRegistry, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PresetRegistry, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1048,10 +1048,10 @@ class PresetEngine {
     hasPreset(key) {
         return this.registry.has(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetEngine, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PresetEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PresetEngine, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetEngine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PresetEngine, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1127,26 +1127,28 @@ class DualDateRangeStore {
         catch {
             this.adapter = new NativeDateAdapter();
         }
+        // Update _rightMonth to correct value after adapter is available
+        this._rightMonth.set(this.getNextMonth(new Date()));
     }
     // Configuration
     config = signal({
         enableTimePicker: false,
         defaultStartTime: '00:00',
         defaultEndTime: '23:59'
-    });
+    }, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     // Core state - using signals
-    _startDate = signal(null);
-    _endDate = signal(null);
-    _leftMonth = signal(new Date());
-    _rightMonth = signal(this.getNextMonth(new Date()));
-    _selectingStart = signal(true);
+    _startDate = signal(null, ...(ngDevMode ? [{ debugName: "_startDate" }] : /* istanbul ignore next */ []));
+    _endDate = signal(null, ...(ngDevMode ? [{ debugName: "_endDate" }] : /* istanbul ignore next */ []));
+    _leftMonth = signal(new Date(), ...(ngDevMode ? [{ debugName: "_leftMonth" }] : /* istanbul ignore next */ []));
+    _rightMonth = signal(new Date(), ...(ngDevMode ? [{ debugName: "_rightMonth" }] : /* istanbul ignore next */ [])); // Temporary value, updated in constructor
+    _selectingStart = signal(true, ...(ngDevMode ? [{ debugName: "_selectingStart" }] : /* istanbul ignore next */ []));
     // Time state
-    _startTime = signal('00:00');
-    _endTime = signal('23:59');
+    _startTime = signal('00:00', ...(ngDevMode ? [{ debugName: "_startTime" }] : /* istanbul ignore next */ []));
+    _endTime = signal('23:59', ...(ngDevMode ? [{ debugName: "_endTime" }] : /* istanbul ignore next */ []));
     // Pending state for requireApply mode
-    _pendingStart = signal(null);
-    _pendingEnd = signal(null);
-    _hasPendingChanges = signal(false);
+    _pendingStart = signal(null, ...(ngDevMode ? [{ debugName: "_pendingStart" }] : /* istanbul ignore next */ []));
+    _pendingEnd = signal(null, ...(ngDevMode ? [{ debugName: "_pendingEnd" }] : /* istanbul ignore next */ []));
+    _hasPendingChanges = signal(false, ...(ngDevMode ? [{ debugName: "_hasPendingChanges" }] : /* istanbul ignore next */ []));
     // Public read-only signals
     startDate = this._startDate.asReadonly();
     endDate = this._endDate.asReadonly();
@@ -1170,7 +1172,7 @@ class DualDateRangeStore {
             result.endTime = this._endTime();
         }
         return result;
-    });
+    }, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
     // Computed: validation state
     isValid = computed(() => {
         const start = this._startDate();
@@ -1181,7 +1183,7 @@ class DualDateRangeStore {
             return false;
         const boundsValidation = validateRangeBounds(start, end, cfg.minDate, cfg.maxDate);
         return boundsValidation.valid;
-    });
+    }, ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
     // Computed: range text for display
     rangeText = computed(() => {
         const start = this._startDate();
@@ -1193,7 +1195,7 @@ class DualDateRangeStore {
         if (!end)
             return `${this.formatDateShort(start)}`;
         return `${this.formatDateShort(start)} - ${this.formatDateShort(end)}`;
-    });
+    }, ...(ngDevMode ? [{ debugName: "rangeText" }] : /* istanbul ignore next */ []));
     /**
      * Configure the store
      */
@@ -1389,13 +1391,13 @@ class DualDateRangeStore {
     formatDateShort(date) {
         const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
         const month = this.adapter.getMonth(date);
-        const day = this.adapter.getDay(date);
+        const day = this.adapter.getDate(date); // FIX: use getDate() not getDay()
         return `${day} ${months[month]}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DualDateRangeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DualDateRangeStore, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DualDateRangeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DualDateRangeStore, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DualDateRangeStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DualDateRangeStore, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1969,7 +1971,7 @@ function providePresetPackage(packageName, presets) {
 class CalendarGridFactory {
     adapter;
     constructor(adapter) {
-        this.adapter = adapter;
+        this.adapter = adapter ?? new NativeDateAdapter();
     }
     /**
      * Create a calendar grid for a given month
@@ -2038,13 +2040,15 @@ class CalendarGridFactory {
         }
         return offset;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarGridFactory, deps: [{ token: DATE_ADAPTER }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarGridFactory, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CalendarGridFactory, deps: [{ token: DATE_ADAPTER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CalendarGridFactory, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarGridFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CalendarGridFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
                     args: [DATE_ADAPTER]
                 }] }] });
@@ -2170,10 +2174,10 @@ class CalendarGridCache {
         const key = this.buildKey(monthDate, weekStart, locale);
         return this.cache.has(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarGridCache, deps: [{ token: CalendarGridFactory }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarGridCache, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CalendarGridCache, deps: [{ token: CalendarGridFactory }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CalendarGridCache, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarGridCache, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CalendarGridCache, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: CalendarGridFactory }] });
@@ -2349,10 +2353,10 @@ class RangeHighlighter {
         const max = startISO > hoverISO ? startISO : hoverISO;
         return { min, max };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeHighlighter, deps: [{ token: DATE_ADAPTER }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeHighlighter, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RangeHighlighter, deps: [{ token: DATE_ADAPTER }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RangeHighlighter, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeHighlighter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RangeHighlighter, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -2544,10 +2548,10 @@ class RangeHighlighterCache {
         const key = this.buildKey(grid, params);
         return this.cache.has(key.full);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeHighlighterCache, deps: [{ token: RangeHighlighter }, { token: DATE_ADAPTER }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeHighlighterCache, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RangeHighlighterCache, deps: [{ token: RangeHighlighter }, { token: DATE_ADAPTER }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RangeHighlighterCache, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeHighlighterCache, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RangeHighlighterCache, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: RangeHighlighter }, { type: undefined, decorators: [{
@@ -2892,15 +2896,15 @@ class DualDatepickerComponent {
     // Headless store for date range state (v3.5.0+)
     rangeStore = inject(DualDateRangeStore);
     // UI-only signals
-    showDatePicker = signal(false);
-    currentMonth = signal(this.dateAdapter.normalize(new Date()));
-    previousMonth = signal(this.dateAdapter.normalize(new Date()));
-    currentMonthDays = signal([]);
-    previousMonthDays = signal([]);
-    isDisabled = signal(false);
-    showStartTimePicker = signal(false);
-    showEndTimePicker = signal(false);
-    hoverDate = signal(null);
+    showDatePicker = signal(false, ...(ngDevMode ? [{ debugName: "showDatePicker" }] : /* istanbul ignore next */ []));
+    currentMonth = signal(this.dateAdapter.normalize(new Date()), ...(ngDevMode ? [{ debugName: "currentMonth" }] : /* istanbul ignore next */ []));
+    previousMonth = signal(this.dateAdapter.normalize(new Date()), ...(ngDevMode ? [{ debugName: "previousMonth" }] : /* istanbul ignore next */ []));
+    currentMonthDays = signal([], ...(ngDevMode ? [{ debugName: "currentMonthDays" }] : /* istanbul ignore next */ []));
+    previousMonthDays = signal([], ...(ngDevMode ? [{ debugName: "previousMonthDays" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    showStartTimePicker = signal(false, ...(ngDevMode ? [{ debugName: "showStartTimePicker" }] : /* istanbul ignore next */ []));
+    showEndTimePicker = signal(false, ...(ngDevMode ? [{ debugName: "showEndTimePicker" }] : /* istanbul ignore next */ []));
+    hoverDate = signal(null, ...(ngDevMode ? [{ debugName: "hoverDate" }] : /* istanbul ignore next */ []));
     /**
      * Virtual Weeks State (v3.9.0+)
      *
@@ -2910,8 +2914,8 @@ class DualDatepickerComponent {
      *
      * Reset to 0 when month changes for consistent UX.
      */
-    previousMonthWeekStart = signal(0);
-    currentMonthWeekStart = signal(0);
+    previousMonthWeekStart = signal(0, ...(ngDevMode ? [{ debugName: "previousMonthWeekStart" }] : /* istanbul ignore next */ []));
+    currentMonthWeekStart = signal(0, ...(ngDevMode ? [{ debugName: "currentMonthWeekStart" }] : /* istanbul ignore next */ []));
     /**
      * Computed: Visible weeks for windowed rendering (v3.9.0+)
      *
@@ -2932,7 +2936,7 @@ class DualDatepickerComponent {
         }
         const visibleWeeks = getVisibleWeeks(allWeeks, this.previousMonthWeekStart(), this.virtualWeeks.windowSize);
         return visibleWeeks.flat();
-    });
+    }, ...(ngDevMode ? [{ debugName: "previousMonthVisibleDays" }] : /* istanbul ignore next */ []));
     currentMonthVisibleDays = computed(() => {
         const allDays = this.currentMonthDays();
         if (!this.virtualWeeks || !isVirtualWeeksEnabled(this.virtualWeeks.windowSize, 6)) {
@@ -2945,7 +2949,7 @@ class DualDatepickerComponent {
         }
         const visibleWeeks = getVisibleWeeks(allWeeks, this.currentMonthWeekStart(), this.virtualWeeks.windowSize);
         return visibleWeeks.flat();
-    });
+    }, ...(ngDevMode ? [{ debugName: "currentMonthVisibleDays" }] : /* istanbul ignore next */ []));
     // Computed time properties from store
     get startHour() {
         const time = this.rangeStore.startTime();
@@ -2972,18 +2976,18 @@ class DualDatepickerComponent {
         this.rangeStore.setEndTime(timeStr);
     }
     // Multi-range support (UI-specific)
-    selectedRanges = signal([]);
-    currentRangeIndex = signal(-1);
+    selectedRanges = signal([], ...(ngDevMode ? [{ debugName: "selectedRanges" }] : /* istanbul ignore next */ []));
+    currentRangeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "currentRangeIndex" }] : /* istanbul ignore next */ []));
     // Keyboard navigation (UI-specific)
-    focusedDay = signal(null);
+    focusedDay = signal(null, ...(ngDevMode ? [{ debugName: "focusedDay" }] : /* istanbul ignore next */ []));
     // Computed values
-    currentMonthName = computed(() => this.getMonthName(this.currentMonth()));
-    previousMonthName = computed(() => this.getMonthName(this.previousMonth()));
-    weekDayNames = computed(() => this.getDayNames());
+    currentMonthName = computed(() => this.getMonthName(this.currentMonth()), ...(ngDevMode ? [{ debugName: "currentMonthName" }] : /* istanbul ignore next */ []));
+    previousMonthName = computed(() => this.getMonthName(this.previousMonth()), ...(ngDevMode ? [{ debugName: "previousMonthName" }] : /* istanbul ignore next */ []));
+    weekDayNames = computed(() => this.getDayNames(), ...(ngDevMode ? [{ debugName: "weekDayNames" }] : /* istanbul ignore next */ []));
     // Computed from store
-    dateRangeText = computed(() => this.rangeStore.rangeText());
-    selectingStartDate = computed(() => this.rangeStore.selectingStart());
-    hasPendingChanges = computed(() => this.rangeStore.hasPendingChanges());
+    dateRangeText = computed(() => this.rangeStore.rangeText(), ...(ngDevMode ? [{ debugName: "dateRangeText" }] : /* istanbul ignore next */ []));
+    selectingStartDate = computed(() => this.rangeStore.selectingStart(), ...(ngDevMode ? [{ debugName: "selectingStartDate" }] : /* istanbul ignore next */ []));
+    hasPendingChanges = computed(() => this.rangeStore.hasPendingChanges(), ...(ngDevMode ? [{ debugName: "hasPendingChanges" }] : /* istanbul ignore next */ []));
     // Computed for template access to pending dates (requireApply mode)
     get pendingStartDate() {
         // In requireApply mode, store keeps pending values
@@ -3992,8 +3996,8 @@ class DualDatepickerComponent {
     setDisabledState(isDisabled) {
         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", enableKeyboardNavigation: "enableKeyboardNavigation", presets: "presets", theme: "theme", inputBackgroundColor: "inputBackgroundColor", inputTextColor: "inputTextColor", inputBorderColor: "inputBorderColor", inputBorderColorHover: "inputBorderColorHover", inputBorderColorFocus: "inputBorderColorFocus", inputPadding: "inputPadding", locale: "locale", disabledDates: "disabledDates", displayFormat: "displayFormat", requireApply: "requireApply", enableTimePicker: "enableTimePicker", timeFormat: "timeFormat", minuteStep: "minuteStep", defaultStartTime: "defaultStartTime", defaultEndTime: "defaultEndTime", virtualWeeks: "virtualWeeks" }, outputs: { dateRangeChange: "dateRangeChange", dateRangeSelected: "dateRangeSelected", multiDateRangeChange: "multiDateRangeChange", multiDateRangeSelected: "multiDateRangeSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "keydown": "handleKeyboardNavigation($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DualDatepickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", 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", theme: "theme", inputBackgroundColor: "inputBackgroundColor", inputTextColor: "inputTextColor", inputBorderColor: "inputBorderColor", inputBorderColorHover: "inputBorderColorHover", inputBorderColorFocus: "inputBorderColorFocus", inputPadding: "inputPadding", locale: "locale", disabledDates: "disabledDates", displayFormat: "displayFormat", requireApply: "requireApply", enableTimePicker: "enableTimePicker", timeFormat: "timeFormat", minuteStep: "minuteStep", defaultStartTime: "defaultStartTime", defaultEndTime: "defaultEndTime", virtualWeeks: "virtualWeeks" }, 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),
@@ -4014,9 +4018,9 @@ class DualDatepickerComponent {
                 },
                 deps: [PresetRegistry]
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-wrapper\" \n  [class]=\"'theme-' + theme\"\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 previousMonthVisibleDays(); 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 currentMonthVisibleDays(); 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    <!-- Time Picker -->\n    @if (enableTimePicker) {\n    <div class=\"time-picker-container\">\n      <!-- Start Time -->\n      <div class=\"time-picker-section\">\n        <div class=\"time-picker-label\">Start Time</div>\n        <div class=\"time-picker-inputs\">\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementStartHour()\"\n              title=\"Increment hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"startHour.toString().padStart(2, '0')\"\n              readonly\n              title=\"Start hour\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementStartHour()\"\n              title=\"Decrement hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          <span class=\"time-separator\">:</span>\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementStartMinute()\"\n              title=\"Increment minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"startMinute.toString().padStart(2, '0')\"\n              readonly\n              title=\"Start minute\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementStartMinute()\"\n              title=\"Decrement minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          @if (timeFormat === '12h') {\n          <div class=\"time-period\">\n            {{ startHour >= 12 ? 'PM' : 'AM' }}\n          </div>\n          }\n        </div>\n      </div>\n\n      <!-- Separator -->\n      <div class=\"time-separator-vertical\"></div>\n\n      <!-- End Time -->\n      <div class=\"time-picker-section\">\n        <div class=\"time-picker-label\">End Time</div>\n        <div class=\"time-picker-inputs\">\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementEndHour()\"\n              title=\"Increment hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"endHour.toString().padStart(2, '0')\"\n              readonly\n              title=\"End hour\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementEndHour()\"\n              title=\"Decrement hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          <span class=\"time-separator\">:</span>\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementEndMinute()\"\n              title=\"Increment minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"endMinute.toString().padStart(2, '0')\"\n              readonly\n              title=\"End minute\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementEndMinute()\"\n              title=\"Decrement minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          @if (timeFormat === '12h') {\n          <div class=\"time-period\">\n            {{ endHour >= 12 ? 'PM' : 'AM' }}\n          </div>\n          }\n        </div>\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;contain:layout paint}.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;contain:layout paint}.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}.time-picker-container{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;margin:12px 0;background-color:#f9fafb}.time-picker-container .time-picker-section{display:flex;flex-direction:column;gap:8px;flex:1;align-items:center}.time-picker-container .time-picker-section .time-picker-label{font-size:.875rem;font-weight:600;color:#374151;text-align:center}.time-picker-container .time-picker-section .time-picker-inputs{display:flex;align-items:center;gap:8px}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group{display:flex;flex-direction:column;gap:4px;align-items:center}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-input{width:48px;padding:8px 6px;text-align:center;font-size:1.25rem;font-weight:600;color:#1f2937;background-color:#fff;border:2px solid #e5e7eb;border-radius:6px;outline:none;transition:all .15s ease;cursor:default;-webkit-user-select:none;user-select:none}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-input:focus{border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn{padding:4px 8px;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .15s ease}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn:hover{background-color:var(--primary-color, #3b82f6);border-color:var(--primary-color, #3b82f6);color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn:active{transform:translateY(0);box-shadow:none}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn svg{pointer-events:none}.time-picker-container .time-picker-section .time-picker-inputs .time-separator{font-size:1.5rem;font-weight:700;color:#9ca3af;margin:0 4px}.time-picker-container .time-picker-section .time-picker-inputs .time-period{font-size:.875rem;font-weight:600;color:#6b7280;padding:8px 12px;background-color:#f3f4f6;border-radius:6px;min-width:48px;text-align:center}.time-picker-container .time-separator-vertical{width:1px;height:80px;background-color:#e5e7eb}\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  [class]=\"'theme-' + theme\"\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 previousMonthVisibleDays(); 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 currentMonthVisibleDays(); 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    <!-- Time Picker -->\n    @if (enableTimePicker) {\n    <div class=\"time-picker-container\">\n      <!-- Start Time -->\n      <div class=\"time-picker-section\">\n        <div class=\"time-picker-label\">Start Time</div>\n        <div class=\"time-picker-inputs\">\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementStartHour()\"\n              title=\"Increment hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"startHour.toString().padStart(2, '0')\"\n              readonly\n              title=\"Start hour\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementStartHour()\"\n              title=\"Decrement hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          <span class=\"time-separator\">:</span>\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementStartMinute()\"\n              title=\"Increment minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"startMinute.toString().padStart(2, '0')\"\n              readonly\n              title=\"Start minute\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementStartMinute()\"\n              title=\"Decrement minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          @if (timeFormat === '12h') {\n          <div class=\"time-period\">\n            {{ startHour >= 12 ? 'PM' : 'AM' }}\n          </div>\n          }\n        </div>\n      </div>\n\n      <!-- Separator -->\n      <div class=\"time-separator-vertical\"></div>\n\n      <!-- End Time -->\n      <div class=\"time-picker-section\">\n        <div class=\"time-picker-label\">End Time</div>\n        <div class=\"time-picker-inputs\">\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementEndHour()\"\n              title=\"Increment hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"endHour.toString().padStart(2, '0')\"\n              readonly\n              title=\"End hour\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementEndHour()\"\n              title=\"Decrement hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          <span class=\"time-separator\">:</span>\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementEndMinute()\"\n              title=\"Increment minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"endMinute.toString().padStart(2, '0')\"\n              readonly\n              title=\"End minute\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementEndMinute()\"\n              title=\"Decrement minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          @if (timeFormat === '12h') {\n          <div class=\"time-period\">\n            {{ endHour >= 12 ? 'PM' : 'AM' }}\n          </div>\n          }\n        </div>\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;contain:layout paint}.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;contain:layout paint}.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}.time-picker-container{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;margin:12px 0;background-color:#f9fafb}.time-picker-container .time-picker-section{display:flex;flex-direction:column;gap:8px;flex:1;align-items:center}.time-picker-container .time-picker-section .time-picker-label{font-size:.875rem;font-weight:600;color:#374151;text-align:center}.time-picker-container .time-picker-section .time-picker-inputs{display:flex;align-items:center;gap:8px}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group{display:flex;flex-direction:column;gap:4px;align-items:center}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-input{width:48px;padding:8px 6px;text-align:center;font-size:1.25rem;font-weight:600;color:#1f2937;background-color:#fff;border:2px solid #e5e7eb;border-radius:6px;outline:none;transition:all .15s ease;cursor:default;-webkit-user-select:none;user-select:none}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-input:focus{border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn{padding:4px 8px;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .15s ease}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn:hover{background-color:var(--primary-color, #3b82f6);border-color:var(--primary-color, #3b82f6);color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn:active{transform:translateY(0);box-shadow:none}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn svg{pointer-events:none}.time-picker-container .time-picker-section .time-picker-inputs .time-separator{font-size:1.5rem;font-weight:700;color:#9ca3af;margin:0 4px}.time-picker-container .time-picker-section .time-picker-inputs .time-period{font-size:.875rem;font-weight:600;color:#6b7280;padding:8px 12px;background-color:#f3f4f6;border-radius:6px;min-width:48px;text-align:center}.time-picker-container .time-separator-vertical{width:1px;height:80px;background-color:#e5e7eb}\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DualDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-dual-datepicker', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], providers: [
                         {
@@ -4039,7 +4043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             },
                             deps: [PresetRegistry]
                         }
-                    ], template: "<div class=\"datepicker-wrapper\" \n  [class]=\"'theme-' + theme\"\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 previousMonthVisibleDays(); 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 currentMonthVisibleDays(); 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    <!-- Time Picker -->\n    @if (enableTimePicker) {\n    <div class=\"time-picker-container\">\n      <!-- Start Time -->\n      <div class=\"time-picker-section\">\n        <div class=\"time-picker-label\">Start Time</div>\n        <div class=\"time-picker-inputs\">\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementStartHour()\"\n              title=\"Increment hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"startHour.toString().padStart(2, '0')\"\n              readonly\n              title=\"Start hour\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementStartHour()\"\n              title=\"Decrement hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          <span class=\"time-separator\">:</span>\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementStartMinute()\"\n              title=\"Increment minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"startMinute.toString().padStart(2, '0')\"\n              readonly\n              title=\"Start minute\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementStartMinute()\"\n              title=\"Decrement minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          @if (timeFormat === '12h') {\n          <div class=\"time-period\">\n            {{ startHour >= 12 ? 'PM' : 'AM' }}\n          </div>\n          }\n        </div>\n      </div>\n\n      <!-- Separator -->\n      <div class=\"time-separator-vertical\"></div>\n\n      <!-- End Time -->\n      <div class=\"time-picker-section\">\n        <div class=\"time-picker-label\">End Time</div>\n        <div class=\"time-picker-inputs\">\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementEndHour()\"\n              title=\"Increment hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"endHour.toString().padStart(2, '0')\"\n              readonly\n              title=\"End hour\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementEndHour()\"\n              title=\"Decrement hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          <span class=\"time-separator\">:</span>\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementEndMinute()\"\n              title=\"Increment minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"endMinute.toString().padStart(2, '0')\"\n              readonly\n              title=\"End minute\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementEndMinute()\"\n              title=\"Decrement minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          @if (timeFormat === '12h') {\n          <div class=\"time-period\">\n            {{ endHour >= 12 ? 'PM' : 'AM' }}\n          </div>\n          }\n        </div>\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;contain:layout paint}.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;contain:layout paint}.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}.time-picker-container{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;margin:12px 0;background-color:#f9fafb}.time-picker-container .time-picker-section{display:flex;flex-direction:column;gap:8px;flex:1;align-items:center}.time-picker-container .time-picker-section .time-picker-label{font-size:.875rem;font-weight:600;color:#374151;text-align:center}.time-picker-container .time-picker-section .time-picker-inputs{display:flex;align-items:center;gap:8px}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group{display:flex;flex-direction:column;gap:4px;align-items:center}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-input{width:48px;padding:8px 6px;text-align:center;font-size:1.25rem;font-weight:600;color:#1f2937;background-color:#fff;border:2px solid #e5e7eb;border-radius:6px;outline:none;transition:all .15s ease;cursor:default;-webkit-user-select:none;user-select:none}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-input:focus{border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn{padding:4px 8px;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .15s ease}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn:hover{background-color:var(--primary-color, #3b82f6);border-color:var(--primary-color, #3b82f6);color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn:active{transform:translateY(0);box-shadow:none}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn svg{pointer-events:none}.time-picker-container .time-picker-section .time-picker-inputs .time-separator{font-size:1.5rem;font-weight:700;color:#9ca3af;margin:0 4px}.time-picker-container .time-picker-section .time-picker-inputs .time-period{font-size:.875rem;font-weight:600;color:#6b7280;padding:8px 12px;background-color:#f3f4f6;border-radius:6px;min-width:48px;text-align:center}.time-picker-container .time-separator-vertical{width:1px;height:80px;background-color:#e5e7eb}\n"] }]
+                    ], template: "<div class=\"datepicker-wrapper\" \n  [class]=\"'theme-' + theme\"\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 previousMonthVisibleDays(); 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 currentMonthVisibleDays(); 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    <!-- Time Picker -->\n    @if (enableTimePicker) {\n    <div class=\"time-picker-container\">\n      <!-- Start Time -->\n      <div class=\"time-picker-section\">\n        <div class=\"time-picker-label\">Start Time</div>\n        <div class=\"time-picker-inputs\">\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementStartHour()\"\n              title=\"Increment hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"startHour.toString().padStart(2, '0')\"\n              readonly\n              title=\"Start hour\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementStartHour()\"\n              title=\"Decrement hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          <span class=\"time-separator\">:</span>\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementStartMinute()\"\n              title=\"Increment minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"startMinute.toString().padStart(2, '0')\"\n              readonly\n              title=\"Start minute\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementStartMinute()\"\n              title=\"Decrement minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          @if (timeFormat === '12h') {\n          <div class=\"time-period\">\n            {{ startHour >= 12 ? 'PM' : 'AM' }}\n          </div>\n          }\n        </div>\n      </div>\n\n      <!-- Separator -->\n      <div class=\"time-separator-vertical\"></div>\n\n      <!-- End Time -->\n      <div class=\"time-picker-section\">\n        <div class=\"time-picker-label\">End Time</div>\n        <div class=\"time-picker-inputs\">\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementEndHour()\"\n              title=\"Increment hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"endHour.toString().padStart(2, '0')\"\n              readonly\n              title=\"End hour\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementEndHour()\"\n              title=\"Decrement hour\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          <span class=\"time-separator\">:</span>\n          <div class=\"time-input-group\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-up\" \n              (click)=\"incrementEndMinute()\"\n              title=\"Increment minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\"/>\n              </svg>\n            </button>\n            <input\n              type=\"text\"\n              class=\"time-input\"\n              [value]=\"endMinute.toString().padStart(2, '0')\"\n              readonly\n              title=\"End minute\">\n            <button \n              type=\"button\" \n              class=\"time-btn time-btn-down\" \n              (click)=\"decrementEndMinute()\"\n              title=\"Decrement minute\">\n              <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                <path d=\"M7.247 11.14l-4.796-5.481C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\"/>\n              </svg>\n            </button>\n          </div>\n          @if (timeFormat === '12h') {\n          <div class=\"time-period\">\n            {{ endHour >= 12 ? 'PM' : 'AM' }}\n          </div>\n          }\n        </div>\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;contain:layout paint}.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;contain:layout paint}.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}.time-picker-container{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;margin:12px 0;background-color:#f9fafb}.time-picker-container .time-picker-section{display:flex;flex-direction:column;gap:8px;flex:1;align-items:center}.time-picker-container .time-picker-section .time-picker-label{font-size:.875rem;font-weight:600;color:#374151;text-align:center}.time-picker-container .time-picker-section .time-picker-inputs{display:flex;align-items:center;gap:8px}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group{display:flex;flex-direction:column;gap:4px;align-items:center}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-input{width:48px;padding:8px 6px;text-align:center;font-size:1.25rem;font-weight:600;color:#1f2937;background-color:#fff;border:2px solid #e5e7eb;border-radius:6px;outline:none;transition:all .15s ease;cursor:default;-webkit-user-select:none;user-select:none}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-input:focus{border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn{padding:4px 8px;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .15s ease}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn:hover{background-color:var(--primary-color, #3b82f6);border-color:var(--primary-color, #3b82f6);color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn:active{transform:translateY(0);box-shadow:none}.time-picker-container .time-picker-section .time-picker-inputs .time-input-group .time-btn svg{pointer-events:none}.time-picker-container .time-picker-section .time-picker-inputs .time-separator{font-size:1.5rem;font-weight:700;color:#9ca3af;margin:0 4px}.time-picker-container .time-picker-section .time-picker-inputs .time-period{font-size:.875rem;font-weight:600;color:#6b7280;padding:8px 12px;background-color:#f3f4f6;border-radius:6px;min-width:48px;text-align:center}.time-picker-container .time-separator-vertical{width:1px;height:80px;background-color:#e5e7eb}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { placeholder: [{
                 type: Input
             }], startDate: [{