@oneluiz/dual-datepicker 3.9.3 → 4.0.1

package/fesm2022/oneluiz-dual-datepicker.mjs

@@ -1,134 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, signal, computed, Inject, EventEmitter, effect, APP_INITIALIZER, forwardRef, HostListener, Output, Input, Component, makeEnvironmentProviders } from '@angular/core';
+import { InjectionToken, Injectable, inject, signal, computed, makeEnvironmentProviders, APP_INITIALIZER, 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';
 
-/**
- * Abstract class for date adapters.
- * Allows the component to work with different date libraries (Date, DayJS, date-fns, Luxon, etc.)
- */
-class DateAdapter {
-}
-/**
- * Injection token for DateAdapter
- */
-const DATE_ADAPTER$1 = new InjectionToken('DATE_ADAPTER');
-
-/**
- * Date adapter implementation for native JavaScript Date objects
- * This is the default adapter used by the component
- */
-let NativeDateAdapter$1 = class NativeDateAdapter extends DateAdapter {
-    parse(value) {
-        if (!value)
-            return null;
-        if (value instanceof Date) {
-            return new Date(value);
-        }
-        if (typeof value === 'string' || typeof value === 'number') {
-            // Fix timezone issues: parse YYYY-MM-DD as local date, not UTC
-            if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
-                const [year, month, day] = value.split('-').map(Number);
-                return new Date(year, month - 1, day);
-            }
-            const date = new Date(value);
-            return this.isValid(date) ? date : null;
-        }
-        return null;
-    }
-    format(date, format = 'YYYY-MM-DD') {
-        if (!this.isValid(date))
-            return '';
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const day = String(date.getDate()).padStart(2, '0');
-        // Simple format implementation
-        switch (format) {
-            case 'YYYY-MM-DD':
-                return `${year}-${month}-${day}`;
-            case 'MM/DD/YYYY':
-                return `${month}/${day}/${year}`;
-            case 'DD/MM/YYYY':
-                return `${day}/${month}/${year}`;
-            default:
-                return `${year}-${month}-${day}`;
-        }
-    }
-    addDays(date, days) {
-        const result = this.clone(date);
-        result.setDate(result.getDate() + days);
-        return result;
-    }
-    addMonths(date, months) {
-        const result = this.clone(date);
-        result.setMonth(result.getMonth() + months);
-        return result;
-    }
-    getYear(date) {
-        return date.getFullYear();
-    }
-    getMonth(date) {
-        return date.getMonth();
-    }
-    getDate(date) {
-        return date.getDate();
-    }
-    getDay(date) {
-        return date.getDay();
-    }
-    createDate(year, month, date) {
-        return new Date(year, month, date);
-    }
-    today() {
-        return new Date();
-    }
-    isSameDay(a, b) {
-        if (!a || !b)
-            return false;
-        if (!this.isValid(a) || !this.isValid(b))
-            return false;
-        return (a.getFullYear() === b.getFullYear() &&
-            a.getMonth() === b.getMonth() &&
-            a.getDate() === b.getDate());
-    }
-    isBefore(a, b) {
-        if (!a || !b)
-            return false;
-        if (!this.isValid(a) || !this.isValid(b))
-            return false;
-        return a.getTime() < b.getTime();
-    }
-    isAfter(a, b) {
-        if (!a || !b)
-            return false;
-        if (!this.isValid(a) || !this.isValid(b))
-            return false;
-        return a.getTime() > b.getTime();
-    }
-    isBetween(date, start, end) {
-        if (!date || !start || !end)
-            return false;
-        if (!this.isValid(date) || !this.isValid(start) || !this.isValid(end))
-            return false;
-        const dateTime = date.getTime();
-        const startTime = start.getTime();
-        const endTime = end.getTime();
-        return dateTime >= startTime && dateTime <= endTime;
-    }
-    clone(date) {
-        return new Date(date.getTime());
-    }
-    isValid(date) {
-        return date instanceof Date && !isNaN(date.getTime());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NativeDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NativeDateAdapter });
-};
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NativeDateAdapter$1, decorators: [{
-            type: Injectable
-        }] });
-
 /**
  * Pure validation functions for date ranges
  * No dependencies, no side effects - just logic
@@ -320,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'
@@ -680,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'
@@ -1024,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'
@@ -1173,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'
@@ -1252,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();
@@ -1295,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();
@@ -1306,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();
@@ -1318,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
      */
@@ -1514,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'
@@ -1817,289 +1694,536 @@ const BUILT_IN_PRESETS = [
 ];
 
 /**
- * Calendar Grid Types
+ * Provider Functions for Built-in Presets
+ *
+ * Version: 3.6.0
+ *
+ * Automatic registration of built-in date range presets.
+ * These providers ensure backward compatibility by auto-registering
+ * all standard presets (TODAY, LAST_7_DAYS, THIS_MONTH, etc.)
  *
- * Defines the structure for memoized calendar month grids.
- * Separates base grid structure (cacheable) from decorations (dynamic).
+ * USAGE IN LIBRARY (Internal):
+ * Built-in presets are registered automatically via Angular providers.
+ * Library consumers don't need to do anything.
+ *
+ * USAGE IN APP (Custom Presets):
+ * ```typescript
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     // ... other providers
+ *     provideCustomPresets([
+ *       {
+ *         key: 'THIS_FISCAL_QUARTER',
+ *         resolve: (clock, adapter) => {
+ *           const now = clock.now();
+ *           // ... fiscal logic
+ *           return { start, end };
+ *         }
+ *       }
+ *     ])
+ *   ]
+ * };
+ * ```
  */
-
 /**
- * Calendar Grid Factory
+ * Initializer function that registers built-in presets
  *
- * Generates calendar month grids using DateAdapter for deterministic,
- * timezone-safe date operations.
+ * Runs at application startup (APP_INITIALIZER)
  *
- * Grid structure:
- * - Always 6 weeks x 7 days (42 cells) for layout stability
- * - Includes padding days from previous/next month
- * - No decorations (selected, disabled, etc.) - those are applied separately
+ * @param registry - PresetRegistry instance
+ * @returns Initialization function
  */
-class CalendarGridFactory {
-    adapter;
-    constructor(adapter) {
-        this.adapter = adapter;
-    }
-    /**
-     * Create a calendar grid for a given month
-     *
-     * @param monthDate - Any date within the target month (will be normalized to start of month)
-     * @param weekStart - First day of week (0 = Sunday, 1 = Monday, etc.)
-     * @param locale - Locale identifier (optional, for future use)
-     * @returns CalendarGrid - 6 weeks x 7 days grid
-     */
-    createGrid(monthDate, weekStart = 0, locale) {
-        // Normalize to start of month
-        const year = this.adapter.getYear(monthDate);
-        const month = this.adapter.getMonth(monthDate);
-        const firstDayOfMonth = new Date(year, month, 1);
-        const normalizedFirst = this.adapter.normalize(firstDayOfMonth);
-        // Get days in month (day 0 of next month = last day of current month)
-        const lastDayOfMonth = new Date(year, month + 1, 0);
-        const daysInMonth = this.adapter.getDate(lastDayOfMonth);
-        // Get first day of week offset
-        const firstDayOfWeek = this.adapter.getDay(normalizedFirst);
-        const offset = this.calculateOffset(firstDayOfWeek, weekStart);
-        // Generate 42 cells (6 weeks x 7 days)
-        const cells = [];
-        let currentDate = this.adapter.addDays(normalizedFirst, -offset);
-        for (let i = 0; i < 42; i++) {
-            const cellDate = this.adapter.normalize(currentDate);
-            const cellYear = this.adapter.getYear(cellDate);
-            const cellMonth = this.adapter.getMonth(cellDate);
-            const cellDay = this.adapter.getDate(cellDate);
-            const cellDayOfWeek = this.adapter.getDay(cellDate);
-            cells.push({
-                date: cellDate,
-                inCurrentMonth: cellYear === year && cellMonth === month,
-                iso: this.adapter.toISODate(cellDate),
-                day: cellDay,
-                month: cellMonth,
-                year: cellYear,
-                dayOfWeek: cellDayOfWeek
-            });
-            currentDate = this.adapter.addDays(currentDate, 1);
-        }
-        // Split into weeks
-        const weeks = [];
-        for (let i = 0; i < 6; i++) {
-            weeks.push(cells.slice(i * 7, (i + 1) * 7));
-        }
-        return {
-            month: { year, month },
-            weekStart,
-            locale,
-            weeks,
-            cells
-        };
-    }
-    /**
-     * Calculate offset (number of padding days from previous month)
-     *
-     * @param firstDayOfWeek - Day of week for first day of month (0-6)
-     * @param weekStart - Desired week start (0-6)
-     * @returns Number of padding days needed
-     */
-    calculateOffset(firstDayOfWeek, weekStart) {
-        let offset = firstDayOfWeek - weekStart;
-        if (offset < 0) {
-            offset += 7;
+function initializeBuiltInPresets(registry) {
+    return () => {
+        // Register all built-in presets
+        BUILT_IN_PRESETS.forEach(preset => {
+            registry.register(preset);
+        });
+        // Log registration for debugging (can be removed in production)
+        if (typeof console !== 'undefined' && console.debug) {
+            console.debug(`[ng-dual-datepicker] Registered ${BUILT_IN_PRESETS.length} built-in presets:`, BUILT_IN_PRESETS.map(p => p.key).join(', '));
         }
-        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' });
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarGridFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DATE_ADAPTER]
-                }] }] });
-
 /**
- * Cache Configuration
+ * Provide built-in date range presets
  *
- * Centralized cache limits for memory safety.
+ * This provider is automatically included in the library's root providers.
+ * Library consumers don't need to add this manually.
  *
- * @module core/calendar-grid/cache.config
- * @version 3.9.2
+ * @returns EnvironmentProviders for built-in presets
+ *
+ * @internal
  */
+function provideBuiltInPresets() {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: initializeBuiltInPresets,
+            deps: [PresetRegistry]
+        }
+    ]);
+}
 /**
- * Maximum cache entries before FIFO eviction
+ * Provide custom date range presets
  *
- * Applied to both:
- * - CalendarGridCache: Raw month grids
- * - RangeHighlighterCache: Decorated grids
+ * Use this to register your own industry-specific presets:
+ * - Fiscal presets
+ * - Hotel/hospitality presets
+ * - Logistics presets
+ * - Custom business logic
  *
- * Memory footprint:
- * - CalendarGrid (raw): ~10KB each
- * - DecoratedGrid: ~15KB each
- * - Total worst case: (10KB + 15KB) × 48 = ~1.2MB
+ * @param presets - Array of custom RangePresetPlugin implementations
+ * @returns EnvironmentProviders for custom presets
  *
- * Coverage:
- * - 48 months = 4 years of navigation
- * - Sufficient for long-running sessions
+ * @example
+ * ```typescript
+ * // Fiscal presets
+ * const FISCAL_PRESETS: RangePresetPlugin[] = [
+ *   {
+ *     key: 'THIS_FISCAL_QUARTER',
+ *     resolve: (clock, adapter) => {
+ *       const now = clock.now();
+ *       const month = adapter.getMonth(now);
  *
- * Critical for:
- * - ERP systems (invoice date selection)
- * - BI dashboards (date range filters)
- * - Hotel reservation systems (availability calendars)
- * - Point-of-sale systems (report generation)
+ *       // Fiscal year starts April (month 3)
+ *       const fiscalMonth = (month + 9) % 12;
+ *       const quarterStart = Math.floor(fiscalMonth / 3) * 3;
+ *       const calendarMonth = (quarterStart - 9 + 12) % 12;
  *
- * @constant
- * @since v3.9.2
- */
-const MAX_CACHE_ENTRIES = 48;
-
-/**
- * Calendar Grid Cache
+ *       const year = adapter.getYear(now);
+ *       const fiscalYear = month < 3 ? year - 1 : year;
  *
- * LRU cache for calendar month grids to avoid recomputing the same month grid
- * multiple times when only decorations (selected dates, hover, etc.) change.
+ *       const start = new Date(fiscalYear, calendarMonth, 1);
+ *       const end = new Date(fiscalYear, calendarMonth + 3, 0);
  *
- * Strategy:
- * - Key: year-month-weekStart-locale
- * - LRU eviction (least recently used) when limit is reached
- * - Default limit: 48 months (covers 2 years of navigation)
+ *       return {
+ *         start: adapter.normalize(start),
+ *         end: adapter.normalize(end)
+ *       };
+ *     }
+ *   },
+ *   {
+ *     key: 'FISCAL_YEAR_TO_DATE',
+ *     resolve: (clock, adapter) => {
+ *       const now = clock.now();
+ *       const month = adapter.getMonth(now);
+ *       const year = adapter.getYear(now);
  *
- * Performance impact:
- * - Eliminates ~90% of grid recalculations in typical usage
- * - Memory footprint: ~10KB per cached month (negligible)
+ *       // Fiscal year starts April 1
+ *       const fiscalYearStart = month >= 3
+ *         ? new Date(year, 3, 1)
+ *         : new Date(year - 1, 3, 1);
  *
- * Memory safety (v3.9.2):
- * - MAX_CACHE_ENTRIES prevents unbounded growth in long-running sessions
- * - Critical for: ERP, BI dashboards, hotel reservation systems
- * - FIFO eviction when limit exceeded
+ *       return {
+ *         start: adapter.normalize(fiscalYearStart),
+ *         end: adapter.normalize(now)
+ *       };
+ *     }
+ *   }
+ * ];
+ *
+ * // In app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideCustomPresets(FISCAL_PRESETS)
+ *   ]
+ * };
+ *
+ * // Use in components
+ * store.applyPreset('THIS_FISCAL_QUARTER');
+ * store.applyPreset('FISCAL_YEAR_TO_DATE');
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Hotel presets
+ * const HOTEL_PRESETS: RangePresetPlugin[] = [
+ *   {
+ *     key: 'CHECK_IN_WEEK',
+ *     resolve: (clock, adapter) => {
+ *       const now = clock.now();
+ *       const dayOfWeek = adapter.getDayOfWeek(now);
+ *
+ *       // Check-in week: Friday to Friday
+ *       const daysToNextFriday = dayOfWeek <= 5
+ *         ? 5 - dayOfWeek
+ *         : 7 - dayOfWeek + 5;
+ *
+ *       const nextFriday = adapter.addDays(now, daysToNextFriday);
+ *       const followingFriday = adapter.addDays(nextFriday, 7);
+ *
+ *       return { start: nextFriday, end: followingFriday };
+ *     }
+ *   },
+ *   {
+ *     key: 'NEXT_30_NIGHTS',
+ *     resolve: (clock, adapter) => {
+ *       const now = clock.now();
+ *       const tomorrow = adapter.addDays(now, 1);
+ *       const end = adapter.addDays(tomorrow, 30);
+ *       return { start: tomorrow, end };
+ *     }
+ *   }
+ * ];
+ *
+ * providers: [provideCustomPresets(HOTEL_PRESETS)]
+ * ```
  */
-class CalendarGridCache {
-    factory;
-    cache = new Map();
-    maxSize = MAX_CACHE_ENTRIES;
-    constructor(factory) {
-        this.factory = factory;
-    }
-    /**
-     * Get or create a calendar grid
-     *
-     * @param monthDate - Any date within the target month
-     * @param weekStart - First day of week (0 = Sunday, 1 = Monday, etc.)
-     * @param locale - Locale identifier (optional)
-     * @returns CalendarGrid - cached or newly created
-     */
-    get(monthDate, weekStart = 0, locale) {
-        const key = this.buildKey(monthDate, weekStart, locale);
-        // Check cache
-        const cached = this.cache.get(key);
-        if (cached) {
-            // Move to end (LRU)
-            this.cache.delete(key);
-            this.cache.set(key, cached);
-            return cached;
-        }
-        // Generate new grid
-        const grid = this.factory.createGrid(monthDate, weekStart, locale);
-        // Store in cache
-        this.cache.set(key, grid);
-        // Evict oldest if over limit (LRU)
-        if (this.cache.size > this.maxSize) {
-            const firstKey = this.cache.keys().next().value;
-            this.cache.delete(firstKey);
+function provideCustomPresets(presets) {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: (registry) => {
+                return () => {
+                    presets.forEach(preset => {
+                        registry.register(preset);
+                    });
+                    if (typeof console !== 'undefined' && console.debug) {
+                        console.debug(`[ng-dual-datepicker] Registered ${presets.length} custom presets:`, presets.map(p => p.key).join(', '));
+                    }
+                };
+            },
+            deps: [PresetRegistry]
         }
-        return grid;
-    }
-    /**
-     * Build cache key from month parameters
-     *
-     * Format: "year-month-weekStart-locale"
-     * Example: "2026-1-0-en" (Feb 2026, Sunday start, English)
-     */
-    buildKey(monthDate, weekStart, locale) {
-        const year = monthDate.getFullYear();
-        const month = monthDate.getMonth();
-        return `${year}-${month}-${weekStart}${locale ? '-' + locale : ''}`;
-    }
-    /**
-     * Clear entire cache (for testing or manual reset)
-     */
-    clear() {
-        this.cache.clear();
-    }
-    /**
-     * Get cache size (for debugging/testing)
-     */
-    size() {
-        return this.cache.size;
-    }
-    /**
-     * Check if a specific month is cached
-     */
-    has(monthDate, weekStart = 0, locale) {
-        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' });
+    ]);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarGridCache, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: CalendarGridFactory }] });
-
 /**
- * Range Highlighter Types
+ * Provide preset package
  *
- * Type definitions for calendar cell decorations with range highlighting.
- * Used by RangeHighlighter to cache decorated grids and avoid recomputations.
+ * Convenience function for external preset packages.
  *
- * @module core/calendar-grid/range-highlighter.types
- * @version 3.8.0
+ * @param packageName - Name of the preset package (for logging)
+ * @param presets - Array of presets from the package
+ * @returns EnvironmentProviders
+ *
+ * @example
+ * ```typescript
+ * // @acme/fiscal-presets package
+ * export function provideFiscalPresets(): EnvironmentProviders {
+ *   return providePresetPackage('@acme/fiscal-presets', FISCAL_PRESETS);
+ * }
+ *
+ * // In app
+ * import { provideFiscalPresets } from '@acme/fiscal-presets';
+ *
+ * providers: [provideFiscalPresets()]
+ * ```
  */
+function providePresetPackage(packageName, presets) {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: (registry) => {
+                return () => {
+                    presets.forEach(preset => {
+                        registry.register(preset);
+                    });
+                    if (typeof console !== 'undefined' && console.debug) {
+                        console.debug(`[${packageName}] Registered ${presets.length} presets:`, presets.map(p => p.key).join(', '));
+                    }
+                };
+            },
+            deps: [PresetRegistry]
+        }
+    ]);
+}
 
 /**
- * Range Highlighter Service
+ * PUBLIC API for @oneluiz/dual-datepicker
  *
- * Decorates calendar grids with range highlights, hover previews, and disabled states.
- * Pure computation layer - no caching (see RangeHighlighterCache for memoization).
+ * This file defines the stable public API contract.
+ * Exports from this barrel are guaranteed to follow semantic versioning.
  *
- * @module core/calendar-grid/range-highlighter
- * @version 3.8.0
+ * @public
+ * @packageDocumentation
+ * @module @oneluiz/dual-datepicker/core
+ * @since v4.0.0
  */
+// ============================================================================
+// HEADLESS STORE
+// ============================================================================
 /**
- * Range Highlighter
+ * DualDateRangeStore - Signal-based headless date range store
  *
- * Applies decorations to calendar grids:
- * - isSelectedStart, isSelectedEnd (range boundaries)
- * - isInRange (cells within selected range)
- * - isInHoverRange (hover preview)
- * - isDisabled (constraints, custom predicates)
+ * Core reactive store for managing date range state without UI dependencies.
+ * Perfect for SSR, global state, and custom UI implementations.
  *
- * Design:
- * - Pure functions (same input = same output)
- * - Uses DateAdapter for all date operations (SSR-safe)
- * - No side effects, no state
- * - Fast (~1ms for 42 cells on mobile)
+ * @public
+ * @since v3.5.0
+ */
+
+/**
+ * Calendar Grid Factory
  *
- * Usage:
- * ```typescript
- * const grid = calendarGridCache.get(monthDate, 0);
- * const decorated = rangeHighlighter.decorate(grid, {
- *   start: startDate,
- *   end: endDate,
- *   hoverDate: '2026-01-20',
- *   disabledDates: [...]
- * });
- * ```
+ * Generates calendar month grids using DateAdapter for deterministic,
+ * timezone-safe date operations.
+ *
+ * Grid structure:
+ * - Always 6 weeks x 7 days (42 cells) for layout stability
+ * - Includes padding days from previous/next month
+ * - No decorations (selected, disabled, etc.) - those are applied separately
  */
-class RangeHighlighter {
+class CalendarGridFactory {
     adapter;
     constructor(adapter) {
         this.adapter = adapter;
     }
     /**
-     * Decorate calendar grid with range highlights
+     * Create a calendar grid for a given month
      *
-     * @param grid Base calendar grid (from CalendarGridCache)
+     * @param monthDate - Any date within the target month (will be normalized to start of month)
+     * @param weekStart - First day of week (0 = Sunday, 1 = Monday, etc.)
+     * @param locale - Locale identifier (optional, for future use)
+     * @returns CalendarGrid - 6 weeks x 7 days grid
+     */
+    createGrid(monthDate, weekStart = 0, locale) {
+        // Normalize to start of month
+        const year = this.adapter.getYear(monthDate);
+        const month = this.adapter.getMonth(monthDate);
+        const firstDayOfMonth = new Date(year, month, 1);
+        const normalizedFirst = this.adapter.normalize(firstDayOfMonth);
+        // Get days in month (day 0 of next month = last day of current month)
+        const lastDayOfMonth = new Date(year, month + 1, 0);
+        const daysInMonth = this.adapter.getDate(lastDayOfMonth);
+        // Get first day of week offset
+        const firstDayOfWeek = this.adapter.getDay(normalizedFirst);
+        const offset = this.calculateOffset(firstDayOfWeek, weekStart);
+        // Generate 42 cells (6 weeks x 7 days)
+        const cells = [];
+        let currentDate = this.adapter.addDays(normalizedFirst, -offset);
+        for (let i = 0; i < 42; i++) {
+            const cellDate = this.adapter.normalize(currentDate);
+            const cellYear = this.adapter.getYear(cellDate);
+            const cellMonth = this.adapter.getMonth(cellDate);
+            const cellDay = this.adapter.getDate(cellDate);
+            const cellDayOfWeek = this.adapter.getDay(cellDate);
+            cells.push({
+                date: cellDate,
+                inCurrentMonth: cellYear === year && cellMonth === month,
+                iso: this.adapter.toISODate(cellDate),
+                day: cellDay,
+                month: cellMonth,
+                year: cellYear,
+                dayOfWeek: cellDayOfWeek
+            });
+            currentDate = this.adapter.addDays(currentDate, 1);
+        }
+        // Split into weeks
+        const weeks = [];
+        for (let i = 0; i < 6; i++) {
+            weeks.push(cells.slice(i * 7, (i + 1) * 7));
+        }
+        return {
+            month: { year, month },
+            weekStart,
+            locale,
+            weeks,
+            cells
+        };
+    }
+    /**
+     * Calculate offset (number of padding days from previous month)
+     *
+     * @param firstDayOfWeek - Day of week for first day of month (0-6)
+     * @param weekStart - Desired week start (0-6)
+     * @returns Number of padding days needed
+     */
+    calculateOffset(firstDayOfWeek, weekStart) {
+        let offset = firstDayOfWeek - weekStart;
+        if (offset < 0) {
+            offset += 7;
+        }
+        return offset;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CalendarGridFactory, deps: [{ token: DATE_ADAPTER }], 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: "21.2.5", ngImport: i0, type: CalendarGridFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_ADAPTER]
+                }] }] });
+
+/**
+ * Cache Configuration
+ *
+ * Centralized cache limits for memory safety.
+ *
+ * @module core/calendar-grid/cache.config
+ * @version 3.9.2
+ */
+/**
+ * Maximum cache entries before FIFO eviction
+ *
+ * Applied to both:
+ * - CalendarGridCache: Raw month grids
+ * - RangeHighlighterCache: Decorated grids
+ *
+ * Memory footprint:
+ * - CalendarGrid (raw): ~10KB each
+ * - DecoratedGrid: ~15KB each
+ * - Total worst case: (10KB + 15KB) × 48 = ~1.2MB
+ *
+ * Coverage:
+ * - 48 months = 4 years of navigation
+ * - Sufficient for long-running sessions
+ *
+ * Critical for:
+ * - ERP systems (invoice date selection)
+ * - BI dashboards (date range filters)
+ * - Hotel reservation systems (availability calendars)
+ * - Point-of-sale systems (report generation)
+ *
+ * @constant
+ * @since v3.9.2
+ */
+const MAX_CACHE_ENTRIES = 48;
+
+/**
+ * Calendar Grid Cache
+ *
+ * LRU cache for calendar month grids to avoid recomputing the same month grid
+ * multiple times when only decorations (selected dates, hover, etc.) change.
+ *
+ * Strategy:
+ * - Key: year-month-weekStart-locale
+ * - LRU eviction (least recently used) when limit is reached
+ * - Default limit: 48 months (covers 2 years of navigation)
+ *
+ * Performance impact:
+ * - Eliminates ~90% of grid recalculations in typical usage
+ * - Memory footprint: ~10KB per cached month (negligible)
+ *
+ * Memory safety (v3.9.2):
+ * - MAX_CACHE_ENTRIES prevents unbounded growth in long-running sessions
+ * - Critical for: ERP, BI dashboards, hotel reservation systems
+ * - FIFO eviction when limit exceeded
+ */
+class CalendarGridCache {
+    factory;
+    cache = new Map();
+    maxSize = MAX_CACHE_ENTRIES;
+    constructor(factory) {
+        this.factory = factory;
+    }
+    /**
+     * Get or create a calendar grid
+     *
+     * @param monthDate - Any date within the target month
+     * @param weekStart - First day of week (0 = Sunday, 1 = Monday, etc.)
+     * @param locale - Locale identifier (optional)
+     * @returns CalendarGrid - cached or newly created
+     */
+    get(monthDate, weekStart = 0, locale) {
+        const key = this.buildKey(monthDate, weekStart, locale);
+        // Check cache
+        const cached = this.cache.get(key);
+        if (cached) {
+            // Move to end (LRU)
+            this.cache.delete(key);
+            this.cache.set(key, cached);
+            return cached;
+        }
+        // Generate new grid
+        const grid = this.factory.createGrid(monthDate, weekStart, locale);
+        // Store in cache
+        this.cache.set(key, grid);
+        // Evict oldest if over limit (LRU)
+        if (this.cache.size > this.maxSize) {
+            const firstKey = this.cache.keys().next().value;
+            this.cache.delete(firstKey);
+        }
+        return grid;
+    }
+    /**
+     * Build cache key from month parameters
+     *
+     * Format: "year-month-weekStart-locale"
+     * Example: "2026-1-0-en" (Feb 2026, Sunday start, English)
+     */
+    buildKey(monthDate, weekStart, locale) {
+        const year = monthDate.getFullYear();
+        const month = monthDate.getMonth();
+        return `${year}-${month}-${weekStart}${locale ? '-' + locale : ''}`;
+    }
+    /**
+     * Clear entire cache (for testing or manual reset)
+     */
+    clear() {
+        this.cache.clear();
+    }
+    /**
+     * Get cache size (for debugging/testing)
+     */
+    size() {
+        return this.cache.size;
+    }
+    /**
+     * Check if a specific month is cached
+     */
+    has(monthDate, weekStart = 0, locale) {
+        const key = this.buildKey(monthDate, weekStart, locale);
+        return this.cache.has(key);
+    }
+    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: "21.2.5", ngImport: i0, type: CalendarGridCache, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: CalendarGridFactory }] });
+
+/**
+ * Range Highlighter Service
+ *
+ * Decorates calendar grids with range highlights, hover previews, and disabled states.
+ * Pure computation layer - no caching (see RangeHighlighterCache for memoization).
+ *
+ * @module core/calendar-grid/range-highlighter
+ * @version 3.8.0
+ */
+/**
+ * Range Highlighter
+ *
+ * Applies decorations to calendar grids:
+ * - isSelectedStart, isSelectedEnd (range boundaries)
+ * - isInRange (cells within selected range)
+ * - isInHoverRange (hover preview)
+ * - isDisabled (constraints, custom predicates)
+ *
+ * Design:
+ * - Pure functions (same input = same output)
+ * - Uses DateAdapter for all date operations (SSR-safe)
+ * - No side effects, no state
+ * - Fast (~1ms for 42 cells on mobile)
+ *
+ * Usage:
+ * ```typescript
+ * const grid = calendarGridCache.get(monthDate, 0);
+ * const decorated = rangeHighlighter.decorate(grid, {
+ *   start: startDate,
+ *   end: endDate,
+ *   hoverDate: '2026-01-20',
+ *   disabledDates: [...]
+ * });
+ * ```
+ */
+class RangeHighlighter {
+    adapter;
+    constructor(adapter) {
+        this.adapter = adapter;
+    }
+    /**
+     * Decorate calendar grid with range highlights
+     *
+     * @param grid Base calendar grid (from CalendarGridCache)
      * @param params Decoration parameters (start, end, hover, disabled, etc.)
      * @returns Decorated grid with computed properties
      */
@@ -2227,10 +2351,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: [{
@@ -2422,10 +2546,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: [{
@@ -2433,16 +2557,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     args: [DATE_ADAPTER]
                 }] }] });
 
-/**
- * Virtual Weeks Types
- *
- * Type definitions for windowed week rendering (virtual scrolling).
- * Reduces DOM nodes by rendering only visible weeks instead of full month.
- *
- * @module core/calendar-grid/virtual-weeks.types
- * @version 3.9.0
- */
-
 /**
  * Virtual Weeks Logic (Pure Functions)
  *
@@ -2593,59 +2707,118 @@ function isVirtualWeeksEnabled(windowSize, totalWeeks) {
 }
 
 /**
- * Calendar Grid Module
+ * Fixed Clock for Deterministic Testing
  *
- * Performance-optimized calendar month grid generation with memoization.
- *
- * v3.7.0: Grid Structure Cache
- * - CalendarGridFactory for deterministic 42-cell grids
- * - CalendarGridCache with LRU (24 months)
- *
- * v3.8.0: Range Highlight Cache
- * - RangeHighlighter for decoration logic
- * - RangeHighlighterCache with LRU (48 grids)
- * - Separates grid structure from decorations
- *
- * v3.9.0: Virtual Weeks (Windowed Rendering)
- * - Virtual-weeks logic for reduced DOM complexity
- * - Render only visible weeks (configurable window)
- * - ~50% reduction in DOM nodes with windowSize=3
- *
- * v3.9.2: Cache Bounds (Memory Safety)
- * - MAX_CACHE_ENTRIES = 48 prevents unbounded growth
- * - FIFO eviction for long-running sessions
- * - Critical for ERP, BI, hotel systems
+ * Implements DateClock interface with a fixed date.
  *
  * Usage:
  * ```typescript
- * constructor(
- *   private gridCache: CalendarGridCache,
- *   private highlighterCache: RangeHighlighterCache
- * ) {}
- *
- * const grid = this.gridCache.get(monthDate, weekStart);
- * const decorated = this.highlighterCache.get(grid, {
- *   start, end, hoverDate, disabledDates
- * });
- *
- * // Optional: Windowed rendering (v3.9.0+)
- * const windowSize = 3; // Render only 3 weeks
- * const visibleWeeks = getVisibleWeeks(
- *   decorated.weeks,
- *   weekStartIndex,
- *   windowSize
- * );
- * // decorated.cells[0].iso => '2026-02-01'
- * // decorated.cells[0].isInRange => true
+ * const clock = new FixedClock(new Date(2026, 1, 21)); // Feb 21, 2026
+ * const now = clock.now(); // Always returns Feb 21, 2026 (cloned)
  * ```
+ *
+ * Why clone?
+ * - Prevents test pollution if consumer mutates the returned date
+ * - Each call to now() returns a fresh Date instance
  */
-
+class FixedClock {
+    fixedDate;
+    constructor(fixedDate) {
+        this.fixedDate = fixedDate;
+    }
+    /**
+     * Returns a cloned copy of the fixed date
+     *
+     * Cloning prevents test pollution from mutations
+     */
+    now() {
+        return new Date(this.fixedDate);
+    }
+}
+
+/**
+ * Date Test Helpers
+ *
+ * Utilities for creating deterministic dates in tests.
+ */
+/**
+ * Create a Date in local timezone
+ *
+ * @param year - Full year (e.g., 2026)
+ * @param month - Month 1-12 (natural notation)
+ * @param day - Day of month 1-31
+ * @returns Date at 00:00:00.000 local time
+ *
+ * @example
+ * makeDate(2026, 2, 21) // Feb 21, 2026 00:00:00.000
+ */
+function makeDate(year, month, day) {
+    return new Date(year, month - 1, day); // month-1 because Date uses 0-indexed months
+}
+/**
+ * Create ISO date string (YYYY-MM-DD)
+ *
+ * @param year - Full year (e.g., 2026)
+ * @param month - Month 1-12 (natural notation)
+ * @param day - Day of month 1-31
+ * @returns ISO date string
+ *
+ * @example
+ * iso(2026, 2, 21) // '2026-02-21'
+ */
+function iso(year, month, day) {
+    const y = String(year).padStart(4, '0');
+    const m = String(month).padStart(2, '0');
+    const d = String(day).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+}
+/**
+ * Compare two dates for equality (ignoring time)
+ *
+ * @param a - First date
+ * @param b - Second date
+ * @returns true if same calendar day
+ */
+function isSameCalendarDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+
+/**
+ * Testing Utilities
+ *
+ * Helpers for deterministic date range testing.
+ */
+
+/**
+ * INTERNAL API for @oneluiz/dual-datepicker
+ *
+ * This file exports implementation details required by the component itself.
+ * These exports are NOT part of the public API and may change without notice.
+ *
+ * ⚠️ DO NOT import from this file in your application code.
+ * ⚠️ Use the public API from '@oneluiz/dual-datepicker/core' instead.
+ *
+ * @internal
+ * @packageDocumentation
+ * @since v4.0.0
+ */
+/**
+ * CalendarGridFactory - Deterministic grid generation
+ *
+ * Creates normalized 42-cell grids (6 weeks × 7 days).
+ * Pure function approach with no side effects.
+ *
+ * @internal
+ */
+
 class DualDatepickerComponent {
     elementRef;
     placeholder = 'Select date range';
     set startDate(value) {
         if (value) {
-            const date = this.dateAdapter.parse(value);
+            const date = this.dateAdapter.parseISODate(value);
             if (date)
                 this.rangeStore.setStart(date);
         }
@@ -2656,7 +2829,7 @@ class DualDatepickerComponent {
     }
     set endDate(value) {
         if (value) {
-            const date = this.dateAdapter.parse(value);
+            const date = this.dateAdapter.parseISODate(value);
             if (date)
                 this.rangeStore.setEnd(date);
         }
@@ -2713,7 +2886,7 @@ class DualDatepickerComponent {
     multiDateRangeChange = new EventEmitter();
     multiDateRangeSelected = new EventEmitter();
     // Date adapter injection
-    dateAdapter = inject(DATE_ADAPTER$1);
+    dateAdapter = inject(DATE_ADAPTER);
     // Calendar grid cache (v3.7.0+) - memoizes month grid generation
     gridCache = inject(CalendarGridCache);
     // Range highlighter cache (v3.8.0+) - memoizes decorations
@@ -2721,15 +2894,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.today());
-    previousMonth = signal(this.dateAdapter.today());
-    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+)
      *
@@ -2739,8 +2912,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+)
      *
@@ -2761,7 +2934,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)) {
@@ -2774,7 +2947,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();
@@ -2801,18 +2974,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
@@ -2936,7 +3109,7 @@ class DualDatepickerComponent {
             }
             else {
                 // startDate is not visible, focus on today if visible
-                const today = this.dateAdapter.format(this.dateAdapter.today(), 'yyyy-MM-dd');
+                const today = this.dateAdapter.toISODate(this.dateAdapter.normalize(new Date()));
                 const inCurrMonth = this.isDateInMonth(today, this.currentMonth());
                 if (inCurrMonth) {
                     this.focusedDay.set({ date: today, monthIndex: 1 });
@@ -2958,7 +3131,7 @@ class DualDatepickerComponent {
             }
             else {
                 // endDate is not visible, focus on today if visible
-                const today = this.dateAdapter.format(this.dateAdapter.today(), 'yyyy-MM-dd');
+                const today = this.dateAdapter.toISODate(this.dateAdapter.normalize(new Date()));
                 const inCurrMonth = this.isDateInMonth(today, this.currentMonth());
                 if (inCurrMonth) {
                     this.focusedDay.set({ date: today, monthIndex: 1 });
@@ -2974,7 +3147,7 @@ class DualDatepickerComponent {
         }
         else {
             // Focus on today if visible, otherwise first day of current month
-            const today = this.dateAdapter.format(this.dateAdapter.today(), 'yyyy-MM-dd');
+            const today = this.dateAdapter.toISODate(this.dateAdapter.normalize(new Date()));
             const inCurrMonth = this.isDateInMonth(today, this.currentMonth());
             if (inCurrMonth) {
                 this.focusedDay.set({ date: today, monthIndex: 1 });
@@ -2990,7 +3163,7 @@ class DualDatepickerComponent {
         }
     }
     isDateInMonth(dateStr, monthDate) {
-        const date = this.dateAdapter.parse(dateStr);
+        const date = this.dateAdapter.parseISODate(dateStr);
         if (!date)
             return false;
         const year = this.dateAdapter.getYear(date);
@@ -3005,7 +3178,7 @@ class DualDatepickerComponent {
             this.initializeFocus();
             return;
         }
-        const currentDate = this.dateAdapter.parse(focused.date);
+        const currentDate = this.dateAdapter.parseISODate(focused.date);
         if (!currentDate)
             return;
         const newDate = this.dateAdapter.addDays(currentDate, direction);
@@ -3042,7 +3215,7 @@ class DualDatepickerComponent {
             this.initializeFocus();
             return;
         }
-        const currentDate = this.dateAdapter.parse(focused.date);
+        const currentDate = this.dateAdapter.parseISODate(focused.date);
         if (!currentDate)
             return;
         const newDate = this.dateAdapter.addDays(currentDate, direction * 7); // Move by week
@@ -3093,17 +3266,17 @@ class DualDatepickerComponent {
             this.initializeFocus();
             return;
         }
-        const currentDate = this.dateAdapter.parse(focused.date);
+        const currentDate = this.dateAdapter.parseISODate(focused.date);
         if (!currentDate)
             return;
         const currentYear = this.dateAdapter.getYear(currentDate);
         const currentMonth = this.dateAdapter.getMonth(currentDate);
         const currentDay = this.dateAdapter.getDate(currentDate);
-        const newDate = this.dateAdapter.createDate(currentYear + direction, currentMonth, currentDay);
+        const newDate = this.dateAdapter.normalize(new Date(currentYear + direction, currentMonth, currentDay));
         const newDateStr = this.formatDate(newDate);
         // Update months to show the new year
-        this.currentMonth.set(this.dateAdapter.createDate(currentYear + direction, currentMonth, 1));
-        this.previousMonth.set(this.dateAdapter.createDate(currentYear + direction, currentMonth - 1, 1));
+        this.currentMonth.set(this.dateAdapter.normalize(new Date(currentYear + direction, currentMonth, 1)));
+        this.previousMonth.set(this.dateAdapter.normalize(new Date(currentYear + direction, currentMonth - 1, 1)));
         this.generateCalendars();
         const inPrevMonth = this.isDateInMonth(newDateStr, this.previousMonth());
         this.focusedDay.set({
@@ -3153,12 +3326,12 @@ class DualDatepickerComponent {
         });
         // Initialize dates in store if provided
         if (this.startDate) {
-            const date = this.dateAdapter.parse(this.startDate);
+            const date = this.dateAdapter.parseISODate(this.startDate);
             if (date)
                 this.rangeStore.setStart(date);
         }
         if (this.endDate) {
-            const date = this.dateAdapter.parse(this.endDate);
+            const date = this.dateAdapter.parseISODate(this.endDate);
             if (date)
                 this.rangeStore.setEnd(date);
         }
@@ -3170,12 +3343,12 @@ class DualDatepickerComponent {
         if (changes['startDate'] || changes['endDate']) {
             // Sync with store
             if (changes['startDate'] && this.startDate) {
-                const date = this.dateAdapter.parse(this.startDate);
+                const date = this.dateAdapter.parseISODate(this.startDate);
                 if (date)
                     this.rangeStore.setStart(date);
             }
             if (changes['endDate'] && this.endDate) {
-                const date = this.dateAdapter.parse(this.endDate);
+                const date = this.dateAdapter.parseISODate(this.endDate);
                 if (date)
                     this.rangeStore.setEnd(date);
             }
@@ -3203,7 +3376,7 @@ class DualDatepickerComponent {
     formatDateDisplay(dateStr) {
         if (!dateStr)
             return '';
-        const date = this.dateAdapter.parse(dateStr);
+        const date = this.dateAdapter.parseISODate(dateStr);
         if (!date)
             return '';
         const year = this.dateAdapter.getYear(date);
@@ -3238,7 +3411,7 @@ class DualDatepickerComponent {
             const currentMonthValue = this.currentMonth();
             const year = this.dateAdapter.getYear(currentMonthValue);
             const month = this.dateAdapter.getMonth(currentMonthValue);
-            const previousMonthDate = this.dateAdapter.createDate(year, month - 1, 1);
+            const previousMonthDate = this.dateAdapter.normalize(new Date(year, month - 1, 1));
             this.previousMonth.set(previousMonthDate);
             this.generateCalendars();
             // Initialize keyboard focus only if keyboard navigation is enabled
@@ -3456,7 +3629,7 @@ class DualDatepickerComponent {
     selectDay(dayObj) {
         if (!dayObj.isCurrentMonth || this.isDisabled() || dayObj.isDisabled)
             return;
-        const selectedDate = this.dateAdapter.parse(dayObj.date);
+        const selectedDate = this.dateAdapter.parseISODate(dayObj.date);
         if (!selectedDate)
             return;
         if (this.multiRange) {
@@ -3568,11 +3741,11 @@ class DualDatepickerComponent {
         const currentMonthValue = this.currentMonth();
         const year = this.dateAdapter.getYear(currentMonthValue);
         const month = this.dateAdapter.getMonth(currentMonthValue);
-        const newCurrentMonth = this.dateAdapter.createDate(year, month + direction, 1);
+        const newCurrentMonth = this.dateAdapter.normalize(new Date(year, month + direction, 1));
         this.currentMonth.set(newCurrentMonth);
         const newYear = this.dateAdapter.getYear(newCurrentMonth);
         const newMonth = this.dateAdapter.getMonth(newCurrentMonth);
-        const newPreviousMonth = this.dateAdapter.createDate(newYear, newMonth - 1, 1);
+        const newPreviousMonth = this.dateAdapter.normalize(new Date(newYear, newMonth - 1, 1));
         this.previousMonth.set(newPreviousMonth);
         this.generateCalendars();
     }
@@ -3589,8 +3762,8 @@ class DualDatepickerComponent {
             return;
         }
         const range = preset.getValue();
-        const startDate = this.dateAdapter.parse(range.start);
-        const endDate = this.dateAdapter.parse(range.end);
+        const startDate = this.dateAdapter.parseISODate(range.start);
+        const endDate = this.dateAdapter.parseISODate(range.end);
         if (startDate && endDate) {
             this.rangeStore.setRange(startDate, endDate);
         }
@@ -3821,16 +3994,16 @@ 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),
                 multi: true
             },
             {
-                provide: DATE_ADAPTER$1,
-                useClass: NativeDateAdapter$1
+                provide: DATE_ADAPTER,
+                useClass: NativeDateAdapter
             },
             {
                 provide: APP_INITIALIZER,
@@ -3843,9 +4016,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: [
                         {
@@ -3854,8 +4027,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             multi: true
                         },
                         {
-                            provide: DATE_ADAPTER$1,
-                            useClass: NativeDateAdapter$1
+                            provide: DATE_ADAPTER,
+                            useClass: NativeDateAdapter
                         },
                         {
                             provide: APP_INITIALIZER,
@@ -3868,7 +4041,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: [{
@@ -3942,550 +4115,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 /**
- * Utility functions for creating common date range presets
- * Perfect for dashboards, reporting, POS, BI apps, and ERP systems
- */
-/**
- * Format a date as YYYY-MM-DD string
- */
-function formatDate(date) {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-}
-/**
- * Get the start of today
- */
-function getToday() {
-    const today = new Date();
-    return {
-        start: formatDate(today),
-        end: formatDate(today)
-    };
-}
-/**
- * Get yesterday's date range
- */
-function getYesterday() {
-    const yesterday = new Date();
-    yesterday.setDate(yesterday.getDate() - 1);
-    return {
-        start: formatDate(yesterday),
-        end: formatDate(yesterday)
-    };
-}
-/**
- * Get last N days (including today)
- */
-function getLastNDays(days) {
-    const end = new Date();
-    const start = new Date();
-    start.setDate(start.getDate() - days + 1);
-    return {
-        start: formatDate(start),
-        end: formatDate(end)
-    };
-}
-/**
- * Get this week (Monday to Sunday)
- */
-function getThisWeek() {
-    const today = new Date();
-    const dayOfWeek = today.getDay();
-    const start = new Date(today);
-    // Adjust to Monday (1) as first day of week
-    const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-    start.setDate(start.getDate() - daysToMonday);
-    const end = new Date(start);
-    end.setDate(end.getDate() + 6);
-    return {
-        start: formatDate(start),
-        end: formatDate(end)
-    };
-}
-/**
- * Get last week (Monday to Sunday)
- */
-function getLastWeek() {
-    const today = new Date();
-    const dayOfWeek = today.getDay();
-    const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-    const lastMonday = new Date(today);
-    lastMonday.setDate(lastMonday.getDate() - daysToMonday - 7);
-    const lastSunday = new Date(lastMonday);
-    lastSunday.setDate(lastSunday.getDate() + 6);
-    return {
-        start: formatDate(lastMonday),
-        end: formatDate(lastSunday)
-    };
-}
-/**
- * Get this month (1st to last day)
- */
-function getThisMonth() {
-    const today = new Date();
-    const start = new Date(today.getFullYear(), today.getMonth(), 1);
-    const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
-    return {
-        start: formatDate(start),
-        end: formatDate(end)
-    };
-}
-/**
- * Get last month (1st to last day)
- */
-function getLastMonth() {
-    const today = new Date();
-    const start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
-    const end = new Date(today.getFullYear(), today.getMonth(), 0);
-    return {
-        start: formatDate(start),
-        end: formatDate(end)
-    };
-}
-/**
- * Get month to date (1st of current month to today)
- */
-function getMonthToDate() {
-    const today = new Date();
-    const start = new Date(today.getFullYear(), today.getMonth(), 1);
-    return {
-        start: formatDate(start),
-        end: formatDate(today)
-    };
-}
-/**
- * Get this quarter (Q1, Q2, Q3, or Q4)
- */
-function getThisQuarter() {
-    const today = new Date();
-    const currentMonth = today.getMonth();
-    const quarterStartMonth = Math.floor(currentMonth / 3) * 3;
-    const start = new Date(today.getFullYear(), quarterStartMonth, 1);
-    const end = new Date(today.getFullYear(), quarterStartMonth + 3, 0);
-    return {
-        start: formatDate(start),
-        end: formatDate(end)
-    };
-}
-/**
- * Get last quarter
- */
-function getLastQuarter() {
-    const today = new Date();
-    const currentMonth = today.getMonth();
-    const lastQuarterStartMonth = Math.floor(currentMonth / 3) * 3 - 3;
-    const start = new Date(today.getFullYear(), lastQuarterStartMonth, 1);
-    const end = new Date(today.getFullYear(), lastQuarterStartMonth + 3, 0);
-    return {
-        start: formatDate(start),
-        end: formatDate(end)
-    };
-}
-/**
- * Get quarter to date (start of current quarter to today)
- */
-function getQuarterToDate() {
-    const today = new Date();
-    const currentMonth = today.getMonth();
-    const quarterStartMonth = Math.floor(currentMonth / 3) * 3;
-    const start = new Date(today.getFullYear(), quarterStartMonth, 1);
-    return {
-        start: formatDate(start),
-        end: formatDate(today)
-    };
-}
-/**
- * Get this year (January 1 to December 31)
- */
-function getThisYear() {
-    const today = new Date();
-    const start = new Date(today.getFullYear(), 0, 1);
-    const end = new Date(today.getFullYear(), 11, 31);
-    return {
-        start: formatDate(start),
-        end: formatDate(end)
-    };
-}
-/**
- * Get last year
- */
-function getLastYear() {
-    const today = new Date();
-    const start = new Date(today.getFullYear() - 1, 0, 1);
-    const end = new Date(today.getFullYear() - 1, 11, 31);
-    return {
-        start: formatDate(start),
-        end: formatDate(end)
-    };
-}
-/**
- * Get year to date (January 1 to today)
- */
-function getYearToDate() {
-    const today = new Date();
-    const start = new Date(today.getFullYear(), 0, 1);
-    return {
-        start: formatDate(start),
-        end: formatDate(today)
-    };
-}
-/**
- * Get last N months (including current partial month)
- */
-function getLastNMonths(months) {
-    const today = new Date();
-    const start = new Date(today);
-    start.setMonth(start.getMonth() - months);
-    return {
-        start: formatDate(start),
-        end: formatDate(today)
-    };
-}
-/**
- * Get last N years
- */
-function getLastNYears(years) {
-    const today = new Date();
-    const start = new Date(today);
-    start.setFullYear(start.getFullYear() - years);
-    return {
-        start: formatDate(start),
-        end: formatDate(today)
-    };
-}
-/**
- * Pre-built preset configurations for common use cases
- * Import and use these directly in your component
- */
-const CommonPresets = {
-    /**
-     * Dashboard presets - Perfect for analytics dashboards
-     */
-    dashboard: [
-        { label: 'Today', getValue: getToday },
-        { label: 'Yesterday', getValue: getYesterday },
-        { label: 'Last 7 days', getValue: () => getLastNDays(7) },
-        { label: 'Last 30 days', getValue: () => getLastNDays(30) },
-        { label: 'This month', getValue: getThisMonth },
-        { label: 'Last month', getValue: getLastMonth }
-    ],
-    /**
-     * Reporting presets - Perfect for business reporting
-     */
-    reporting: [
-        { label: 'Today', getValue: getToday },
-        { label: 'This week', getValue: getThisWeek },
-        { label: 'Last week', getValue: getLastWeek },
-        { label: 'This month', getValue: getThisMonth },
-        { label: 'Last month', getValue: getLastMonth },
-        { label: 'This quarter', getValue: getThisQuarter },
-        { label: 'Last quarter', getValue: getLastQuarter }
-    ],
-    /**
-     * Financial presets - Perfect for ERP and accounting systems
-     */
-    financial: [
-        { label: 'Month to date', getValue: getMonthToDate },
-        { label: 'Quarter to date', getValue: getQuarterToDate },
-        { label: 'Year to date', getValue: getYearToDate },
-        { label: 'Last month', getValue: getLastMonth },
-        { label: 'Last quarter', getValue: getLastQuarter },
-        { label: 'Last year', getValue: getLastYear }
-    ],
-    /**
-     * Analytics presets - Perfect for BI and data analysis
-     */
-    analytics: [
-        { label: 'Last 7 days', getValue: () => getLastNDays(7) },
-        { label: 'Last 14 days', getValue: () => getLastNDays(14) },
-        { label: 'Last 30 days', getValue: () => getLastNDays(30) },
-        { label: 'Last 60 days', getValue: () => getLastNDays(60) },
-        { label: 'Last 90 days', getValue: () => getLastNDays(90) },
-        { label: 'Last 180 days', getValue: () => getLastNDays(180) },
-        { label: 'Last 365 days', getValue: () => getLastNDays(365) }
-    ],
-    /**
-     * Simple presets - Basic common ranges
-     */
-    simple: [
-        { label: 'Today', getValue: getToday },
-        { label: 'Last 7 days', getValue: () => getLastNDays(7) },
-        { label: 'Last 30 days', getValue: () => getLastNDays(30) },
-        { label: 'This year', getValue: getThisYear }
-    ]
-};
-
-/**
- * Provider Functions for Built-in Presets
- *
- * Version: 3.6.0
- *
- * Automatic registration of built-in date range presets.
- * These providers ensure backward compatibility by auto-registering
- * all standard presets (TODAY, LAST_7_DAYS, THIS_MONTH, etc.)
- *
- * USAGE IN LIBRARY (Internal):
- * Built-in presets are registered automatically via Angular providers.
- * Library consumers don't need to do anything.
- *
- * USAGE IN APP (Custom Presets):
- * ```typescript
- * // app.config.ts
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     // ... other providers
- *     provideCustomPresets([
- *       {
- *         key: 'THIS_FISCAL_QUARTER',
- *         resolve: (clock, adapter) => {
- *           const now = clock.now();
- *           // ... fiscal logic
- *           return { start, end };
- *         }
- *       }
- *     ])
- *   ]
- * };
- * ```
- */
-/**
- * Initializer function that registers built-in presets
- *
- * Runs at application startup (APP_INITIALIZER)
- *
- * @param registry - PresetRegistry instance
- * @returns Initialization function
- */
-function initializeBuiltInPresets(registry) {
-    return () => {
-        // Register all built-in presets
-        BUILT_IN_PRESETS.forEach(preset => {
-            registry.register(preset);
-        });
-        // Log registration for debugging (can be removed in production)
-        if (typeof console !== 'undefined' && console.debug) {
-            console.debug(`[ng-dual-datepicker] Registered ${BUILT_IN_PRESETS.length} built-in presets:`, BUILT_IN_PRESETS.map(p => p.key).join(', '));
-        }
-    };
-}
-/**
- * Provide built-in date range presets
- *
- * This provider is automatically included in the library's root providers.
- * Library consumers don't need to add this manually.
- *
- * @returns EnvironmentProviders for built-in presets
- *
- * @internal
- */
-function provideBuiltInPresets() {
-    return makeEnvironmentProviders([
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useFactory: initializeBuiltInPresets,
-            deps: [PresetRegistry]
-        }
-    ]);
-}
-/**
- * Provide custom date range presets
- *
- * Use this to register your own industry-specific presets:
- * - Fiscal presets
- * - Hotel/hospitality presets
- * - Logistics presets
- * - Custom business logic
- *
- * @param presets - Array of custom RangePresetPlugin implementations
- * @returns EnvironmentProviders for custom presets
- *
- * @example
- * ```typescript
- * // Fiscal presets
- * const FISCAL_PRESETS: RangePresetPlugin[] = [
- *   {
- *     key: 'THIS_FISCAL_QUARTER',
- *     resolve: (clock, adapter) => {
- *       const now = clock.now();
- *       const month = adapter.getMonth(now);
- *
- *       // Fiscal year starts April (month 3)
- *       const fiscalMonth = (month + 9) % 12;
- *       const quarterStart = Math.floor(fiscalMonth / 3) * 3;
- *       const calendarMonth = (quarterStart - 9 + 12) % 12;
- *
- *       const year = adapter.getYear(now);
- *       const fiscalYear = month < 3 ? year - 1 : year;
- *
- *       const start = new Date(fiscalYear, calendarMonth, 1);
- *       const end = new Date(fiscalYear, calendarMonth + 3, 0);
- *
- *       return {
- *         start: adapter.normalize(start),
- *         end: adapter.normalize(end)
- *       };
- *     }
- *   },
- *   {
- *     key: 'FISCAL_YEAR_TO_DATE',
- *     resolve: (clock, adapter) => {
- *       const now = clock.now();
- *       const month = adapter.getMonth(now);
- *       const year = adapter.getYear(now);
- *
- *       // Fiscal year starts April 1
- *       const fiscalYearStart = month >= 3
- *         ? new Date(year, 3, 1)
- *         : new Date(year - 1, 3, 1);
- *
- *       return {
- *         start: adapter.normalize(fiscalYearStart),
- *         end: adapter.normalize(now)
- *       };
- *     }
- *   }
- * ];
- *
- * // In app.config.ts
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     provideCustomPresets(FISCAL_PRESETS)
- *   ]
- * };
- *
- * // Use in components
- * store.applyPreset('THIS_FISCAL_QUARTER');
- * store.applyPreset('FISCAL_YEAR_TO_DATE');
- * ```
- *
- * @example
- * ```typescript
- * // Hotel presets
- * const HOTEL_PRESETS: RangePresetPlugin[] = [
- *   {
- *     key: 'CHECK_IN_WEEK',
- *     resolve: (clock, adapter) => {
- *       const now = clock.now();
- *       const dayOfWeek = adapter.getDayOfWeek(now);
- *
- *       // Check-in week: Friday to Friday
- *       const daysToNextFriday = dayOfWeek <= 5
- *         ? 5 - dayOfWeek
- *         : 7 - dayOfWeek + 5;
- *
- *       const nextFriday = adapter.addDays(now, daysToNextFriday);
- *       const followingFriday = adapter.addDays(nextFriday, 7);
- *
- *       return { start: nextFriday, end: followingFriday };
- *     }
- *   },
- *   {
- *     key: 'NEXT_30_NIGHTS',
- *     resolve: (clock, adapter) => {
- *       const now = clock.now();
- *       const tomorrow = adapter.addDays(now, 1);
- *       const end = adapter.addDays(tomorrow, 30);
- *       return { start: tomorrow, end };
- *     }
- *   }
- * ];
- *
- * providers: [provideCustomPresets(HOTEL_PRESETS)]
- * ```
- */
-function provideCustomPresets(presets) {
-    return makeEnvironmentProviders([
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useFactory: (registry) => {
-                return () => {
-                    presets.forEach(preset => {
-                        registry.register(preset);
-                    });
-                    if (typeof console !== 'undefined' && console.debug) {
-                        console.debug(`[ng-dual-datepicker] Registered ${presets.length} custom presets:`, presets.map(p => p.key).join(', '));
-                    }
-                };
-            },
-            deps: [PresetRegistry]
-        }
-    ]);
-}
-/**
- * Provide preset package
- *
- * Convenience function for external preset packages.
- *
- * @param packageName - Name of the preset package (for logging)
- * @param presets - Array of presets from the package
- * @returns EnvironmentProviders
- *
- * @example
- * ```typescript
- * // @acme/fiscal-presets package
- * export function provideFiscalPresets(): EnvironmentProviders {
- *   return providePresetPackage('@acme/fiscal-presets', FISCAL_PRESETS);
- * }
+ * Public API Surface of @oneluiz/dual-datepicker
  *
- * // In app
- * import { provideFiscalPresets } from '@acme/fiscal-presets';
+ * v4.0.0: Formalized Public API
+ * - Only stable, documented APIs are exported
+ * - Internal implementation details removed
+ * - Backward compatibility maintained where possible
  *
- * providers: [provideFiscalPresets()]
- * ```
+ * @public
+ * @packageDocumentation
+ * @module @oneluiz/dual-datepicker
  */
-function providePresetPackage(packageName, presets) {
-    return makeEnvironmentProviders([
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useFactory: (registry) => {
-                return () => {
-                    presets.forEach(preset => {
-                        registry.register(preset);
-                    });
-                    if (typeof console !== 'undefined' && console.debug) {
-                        console.debug(`[${packageName}] Registered ${presets.length} presets:`, presets.map(p => p.key).join(', '));
-                    }
-                };
-            },
-            deps: [PresetRegistry]
-        }
-    ]);
-}
-
+// ============================================================================
+// UI COMPONENT
+// ============================================================================
 /**
- * Core headless date range logic
+ * DualDatepickerComponent - Main Angular component
  *
- * v3.6.0: Plugin Architecture
- * - RangePresetPlugin interface for extensible presets
- * - PresetRegistry for plugin management
- * - Built-in presets as plugins
- * - Provider functions for custom presets
+ * Standalone component for dual-calendar date range selection.
+ * Supports reactive forms, signals, themes, and extensive customization.
  *
- * v3.7.0: Calendar Grid Cache
- * - CalendarGridFactory for deterministic grid generation
- * - CalendarGridCache with LRU memoization
- * - Separates grid structure from decorations for performance
- *
- * v3.8.0: Range Highlight Cache
- * - RangeHighlighter for decoration logic (pure computation)
- * - RangeHighlighterCache with LRU (48 grids)
- * - Eliminates redundant decoration recomputations
- *
- * Import from here for clean barrel exports
- */
-
-/**
- * Public API Surface of @oneluiz/dual-datepicker
+ * @public
+ * @since v1.0.0
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BUILT_IN_PRESETS, CalendarGridCache, CalendarGridFactory, CommonPresets, DATE_ADAPTER$1 as DATE_ADAPTER, DATE_CLOCK, DateAdapter, DualDateRangeStore, DualDatepickerComponent, LAST_14_DAYS_PRESET, LAST_30_DAYS_PRESET, LAST_60_DAYS_PRESET, LAST_7_DAYS_PRESET, LAST_90_DAYS_PRESET, LAST_MONTH_PRESET, LAST_QUARTER_PRESET, LAST_WEEK_PRESET, LAST_YEAR_PRESET, MAX_CACHE_ENTRIES, MONTH_TO_DATE_PRESET, NativeDateAdapter$1 as NativeDateAdapter, PresetEngine, PresetRegistry, QUARTER_TO_DATE_PRESET, RangeHighlighter, RangeHighlighterCache, SystemClock, THIS_MONTH_PRESET, THIS_QUARTER_PRESET, THIS_WEEK_PRESET, THIS_YEAR_PRESET, TODAY_PRESET, YEAR_TO_DATE_PRESET, YESTERDAY_PRESET, applyBounds, clampWeekStart, createPreset, formatISODate, getLastMonth, getLastNDays, getLastNMonths, getLastNYears, getLastQuarter, getLastWeek, getLastYear, getMonthToDate, getQuarterToDate, getThisMonth, getThisQuarter, getThisWeek, getThisYear, getToday, getVirtualWeekWindow, getVisibleWeeks, getYearToDate, getYesterday, isDateDisabled, isRangePresetPlugin, isVirtualWeeksEnabled, navigateWeekWindow, parseISODate, presetEngine, provideBuiltInPresets, provideCustomPresets, providePresetPackage, validateDateBounds, validateRangeBounds, validateRangeOrder };
+export { BUILT_IN_PRESETS, DATE_ADAPTER, DualDateRangeStore, DualDatepickerComponent, LAST_30_DAYS_PRESET, LAST_7_DAYS_PRESET, LAST_MONTH_PRESET, LAST_WEEK_PRESET, LAST_YEAR_PRESET, NativeDateAdapter, PresetEngine, PresetRegistry, THIS_MONTH_PRESET, THIS_WEEK_PRESET, THIS_YEAR_PRESET, TODAY_PRESET, YESTERDAY_PRESET, applyBounds, isDateDisabled, provideCustomPresets, providePresetPackage, validateRangeOrder };
 //# sourceMappingURL=oneluiz-dual-datepicker.mjs.map