ngx-datex 1.0.0

package/fesm2022/ngx-datex.mjs

@@ -0,0 +1,3562 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, PLATFORM_ID, ViewContainerRef, input, computed, output, signal, afterNextRender, forwardRef, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { isPlatformBrowser, NgClass } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { addDay, addMonth, sameDay, sameYear, format, parse, isBefore } from '@formkit/tempo';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+
+/**
+ * @fileoverview Date utility functions for NgxDatex component.
+ * Provides date manipulation, formatting, and validation utilities.
+ * Built on top of @formkit/tempo for reliable date operations.
+ */
+/**
+ * Adds the specified number of days to a date.
+ *
+ * @param date - The base date
+ * @param days - Number of days to add (can be negative)
+ * @returns New date with days added
+ *
+ * @example
+ * ```typescript
+ * const tomorrow = addDays(new Date(), 1);
+ * const lastWeek = addDays(new Date(), -7);
+ * ```
+ */
+function addDays(date, days) {
+    return addDay(date, days);
+}
+/**
+ * Adds the specified number of months to a date.
+ *
+ * @param date - The base date
+ * @param months - Number of months to add (can be negative)
+ * @returns New date with months added
+ *
+ * @example
+ * ```typescript
+ * const nextMonth = addMonths(new Date(), 1);
+ * const lastYear = addMonths(new Date(), -12);
+ * ```
+ */
+function addMonths(date, months) {
+    return addMonth(date, months);
+}
+/**
+ * Returns a new date set to the start of the day (00:00:00.000).
+ *
+ * @param date - The input date
+ * @returns New date at start of day
+ *
+ * @example
+ * ```typescript
+ * const today = startOfDay(new Date()); // Today at 00:00:00
+ * ```
+ */
+function startOfDay(date) {
+    const result = new Date(date);
+    result.setHours(0, 0, 0, 0);
+    return result;
+}
+/**
+ * Returns a new date set to the end of the day (23:59:59.999).
+ *
+ * @param date - The input date
+ * @returns New date at end of day
+ *
+ * @example
+ * ```typescript
+ * const endToday = endOfDay(new Date()); // Today at 23:59:59.999
+ * ```
+ */
+function endOfDay(date) {
+    const result = new Date(date);
+    result.setHours(23, 59, 59, 999);
+    return result;
+}
+/**
+ * Returns a new date set to the first day of the month.
+ *
+ * @param date - The input date
+ * @returns New date at start of month
+ *
+ * @example
+ * ```typescript
+ * const monthStart = startOfMonth(new Date()); // 1st day of current month
+ * ```
+ */
+function startOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+/**
+ * Returns a new date set to the start of the week.
+ *
+ * @param date - The input date
+ * @param firstDay - First day of week (0 = Sunday, 1 = Monday, etc.)
+ * @returns New date at start of week
+ *
+ * @example
+ * ```typescript
+ * const mondayStart = startOfWeek(new Date(), 1); // Start of week (Monday)
+ * const sundayStart = startOfWeek(new Date(), 0); // Start of week (Sunday)
+ * ```
+ */
+function startOfWeek(date, firstDay = 1) {
+    const day = date.getDay();
+    const daysBack = (day - firstDay + 7) % 7;
+    const result = new Date(date);
+    result.setDate(date.getDate() - daysBack);
+    return result;
+}
+/**
+ * Checks if two dates represent the same day.
+ *
+ * @param date1 - First date to compare
+ * @param date2 - Second date to compare
+ * @returns True if dates are on the same day
+ *
+ * @example
+ * ```typescript
+ * const today = new Date();
+ * const todayEvening = new Date();
+ * todayEvening.setHours(23, 59, 59);
+ *
+ * isSameDay(today, todayEvening); // true
+ * ```
+ */
+function isSameDay(date1, date2) {
+    return sameDay(date1, date2);
+}
+/**
+ * Checks if two dates are in the same month and year.
+ *
+ * @param date1 - First date to compare
+ * @param date2 - Second date to compare
+ * @returns True if dates are in the same month
+ *
+ * @example
+ * ```typescript
+ * const jan1 = new Date(2024, 0, 1);
+ * const jan31 = new Date(2024, 0, 31);
+ *
+ * isSameMonth(jan1, jan31); // true
+ * ```
+ */
+function isSameMonth(date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+}
+/**
+ * Checks if two dates are in the same year.
+ *
+ * @param date1 - First date to compare
+ * @param date2 - Second date to compare
+ * @returns True if dates are in the same year
+ *
+ * @example
+ * ```typescript
+ * const jan2024 = new Date(2024, 0, 1);
+ * const dec2024 = new Date(2024, 11, 31);
+ *
+ * isSameYear(jan2024, dec2024); // true
+ * ```
+ */
+function isSameYear(date1, date2) {
+    return sameYear(date1, date2);
+}
+function formatDateValue(date, formatStr) {
+    try {
+        return format(date, formatStr);
+    }
+    catch {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours24 = date.getHours();
+        const hours12 = hours24 === 0 ? 12 : hours24 > 12 ? hours24 - 12 : hours24;
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const seconds = String(date.getSeconds()).padStart(2, '0');
+        const ampm = hours24 >= 12 ? 'PM' : 'AM';
+        return formatStr
+            .replace(/YYYY/g, String(year))
+            .replace(/MM/g, month)
+            .replace(/DD/g, day)
+            .replace(/HH/g, String(hours24).padStart(2, '0'))
+            .replace(/hh/g, String(hours12).padStart(2, '0'))
+            .replace(/mm/g, minutes)
+            .replace(/ss/g, seconds)
+            .replace(/A/g, ampm);
+    }
+}
+function parseDateValue(dateStr, formatStr) {
+    try {
+        const parsed = parse(dateStr, formatStr);
+        if (isValidDate(parsed)) {
+            return parsed;
+        }
+    }
+    catch {
+        // Fallback to manual parsing
+    }
+    if (formatStr === 'YYYY-MM-DD') {
+        const parts = dateStr.split('-');
+        if (parts.length === 3) {
+            const year = parseInt(parts[0], 10);
+            const month = parseInt(parts[1], 10) - 1;
+            const day = parseInt(parts[2], 10);
+            return new Date(year, month, day);
+        }
+        return new Date(dateStr);
+    }
+    if (formatStr === 'DD/MM/YYYY' || formatStr.startsWith('DD/MM/YYYY')) {
+        const parts = dateStr.split(' ');
+        const datePart = parts[0];
+        const timePart = parts[1];
+        const dateComponents = datePart.split('/');
+        if (dateComponents.length === 3) {
+            const day = parseInt(dateComponents[0], 10);
+            const month = parseInt(dateComponents[1], 10) - 1;
+            const year = parseInt(dateComponents[2], 10);
+            const date = new Date(year, month, day);
+            if (timePart) {
+                const timeComponents = timePart.split(':');
+                if (timeComponents.length >= 2) {
+                    let hours = parseInt(timeComponents[0], 10);
+                    const minutes = parseInt(timeComponents[1], 10);
+                    if (timePart.includes('PM') && hours !== 12) {
+                        hours += 12;
+                    }
+                    else if (timePart.includes('AM') && hours === 12) {
+                        hours = 0;
+                    }
+                    date.setHours(hours, minutes, 0, 0);
+                }
+            }
+            return date;
+        }
+    }
+    return new Date(dateStr);
+}
+function isSameDate(date1, date2, unit = 'day') {
+    if (!date1 || !date2)
+        return false;
+    switch (unit) {
+        case 'day':
+            return isSameDay(date1, date2);
+        case 'month':
+            return isSameMonth(date1, date2);
+        case 'year':
+            return isSameYear(date1, date2);
+        default:
+            return false;
+    }
+}
+function isValidDate(date) {
+    return date instanceof Date && !isNaN(date.getTime());
+}
+function isBeforeDate(date1, date2) {
+    return isBefore(date1, date2);
+}
+function getStartOfMonth(date) {
+    return startOfMonth(date);
+}
+function getStartOfWeek(date, firstDay = 1) {
+    return startOfWeek(date, firstDay);
+}
+function isMobileDevice() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+
+/**
+ * @fileoverview Default configurations for NgxDatex component.
+ *
+ * This file contains predefined locales, themes, and date ranges
+ * that can be used out-of-the-box or as starting points for customization.
+ */
+/**
+ * Default Spanish locale configuration.
+ *
+ * Provides Spanish language support with DD/MM/YYYY format,
+ * Spanish day/month names, and Monday as the first day of the week.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="SPANISH_LOCALE"></ngx-datex>
+ * ```
+ */
+const SPANISH_LOCALE = {
+    direction: 'ltr',
+    format: 'DD/MM/YYYY',
+    separator: ' - ',
+    applyLabel: 'Aplicar',
+    cancelLabel: 'Cancelar',
+    weekLabel: 'S',
+    customRangeLabel: 'Personalizado',
+    daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+    monthNames: [
+        'Enero',
+        'Febrero',
+        'Marzo',
+        'Abril',
+        'Mayo',
+        'Junio',
+        'Julio',
+        'Agosto',
+        'Septiembre',
+        'Octubre',
+        'Noviembre',
+        'Diciembre',
+    ],
+    firstDay: 1, // Lunes como primer día
+};
+/**
+ * Default Material Design light theme.
+ *
+ * A clean, modern theme following Material Design principles
+ * with blue primary colors and proper contrast ratios.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [theme]="MATERIAL_LIGHT_THEME"></ngx-datex>
+ * ```
+ */
+const MATERIAL_LIGHT_THEME = {
+    name: 'material-light',
+    colors: {
+        primary: '#1976d2',
+        secondary: '#424242',
+        accent: '#82b1ff',
+        background: '#fafafa',
+        surface: '#ffffff',
+        text: '#212121',
+        textSecondary: '#757575',
+        border: '#e0e0e0',
+        hover: '#f5f5f5',
+        selected: '#1976d2',
+        selectedText: '#ffffff',
+        disabled: '#bdbdbd',
+        error: '#f44336',
+        success: '#4caf50',
+        warning: '#ff9800',
+    },
+    typography: {
+        fontFamily: 'Roboto, sans-serif',
+        fontSize: '14px',
+        fontWeight: '400',
+        lineHeight: '1.5',
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    },
+    borderRadius: {
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+    },
+    shadows: {
+        sm: '0 1px 3px rgba(0,0,0,0.12)',
+        md: '0 4px 6px rgba(0,0,0,0.16)',
+        lg: '0 10px 20px rgba(0,0,0,0.19)',
+    },
+};
+/**
+ * Default predefined date ranges in Spanish.
+ *
+ * Provides commonly used date ranges like "Today", "Last 7 days", etc.
+ * All ranges are calculated dynamically based on the current date.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [ranges]="DEFAULT_RANGES"></ngx-datex>
+ *
+ * // Or customize with your own ranges
+ * const customRanges = {
+ *   ...DEFAULT_RANGES,
+ *   'Custom Range': [startDate, endDate]
+ * };
+ * ```
+ */
+const DEFAULT_RANGES = {
+    Hoy: [startOfDay(new Date()), endOfDay(new Date())],
+    Ayer: [
+        (() => {
+            const yesterday = new Date();
+            yesterday.setDate(yesterday.getDate() - 1);
+            return startOfDay(yesterday);
+        })(),
+        (() => {
+            const yesterday = new Date();
+            yesterday.setDate(yesterday.getDate() - 1);
+            return endOfDay(yesterday);
+        })(),
+    ],
+    'Últimos 5 días': [
+        (() => {
+            const date = new Date();
+            date.setDate(date.getDate() - 4);
+            return startOfDay(date);
+        })(),
+        endOfDay(new Date()),
+    ],
+    'Últimos 7 días': [
+        (() => {
+            const date = new Date();
+            date.setDate(date.getDate() - 6);
+            return startOfDay(date);
+        })(),
+        endOfDay(new Date()),
+    ],
+    'Últimos 10 días': [
+        (() => {
+            const date = new Date();
+            date.setDate(date.getDate() - 9);
+            return startOfDay(date);
+        })(),
+        endOfDay(new Date()),
+    ],
+    'Últimos 15 días': [
+        (() => {
+            const date = new Date();
+            date.setDate(date.getDate() - 14);
+            return startOfDay(date);
+        })(),
+        endOfDay(new Date()),
+    ],
+    'Últimos 30 días': [
+        (() => {
+            const date = new Date();
+            date.setDate(date.getDate() - 29);
+            return startOfDay(date);
+        })(),
+        endOfDay(new Date()),
+    ],
+    'Esta semana': [
+        (() => {
+            const today = new Date();
+            const dayOfWeek = today.getDay();
+            const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // Monday as first day
+            const monday = new Date(today);
+            monday.setDate(today.getDate() + mondayOffset);
+            return startOfDay(monday);
+        })(),
+        endOfDay(new Date()),
+    ],
+    'Este mes': [
+        startOfDay(new Date(new Date().getFullYear(), new Date().getMonth(), 1)),
+        (() => {
+            const lastDayOfCurrentMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0);
+            return endOfDay(lastDayOfCurrentMonth);
+        })(),
+    ],
+    'El mes pasado': [
+        startOfDay(new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)),
+        (() => {
+            const lastDayOfPrevMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 0);
+            return endOfDay(lastDayOfPrevMonth);
+        })(),
+    ],
+};
+
+/**
+ * Core service for NgxDatex component operations.
+ *
+ * Provides essential functionality for:
+ * - Configuration management
+ * - Locale handling
+ * - Date formatting
+ * - Calendar matrix generation
+ * - Date validation
+ *
+ * @example
+ * ```typescript
+ * // Inject the service
+ * constructor(private datexService: NgxDatexService) {}
+ *
+ * // Update configuration
+ * this.datexService.updateConfig({
+ *   dateFormat: 'DD/MM/YYYY',
+ *   firstDayOfWeek: 1
+ * });
+ *
+ * // Format a date range
+ * const formatted = this.datexService.formatDateValue(dateRange, 'DD/MM/YYYY');
+ * ```
+ */
+class NgxDatexService {
+    config = {};
+    locale = SPANISH_LOCALE;
+    /**
+     * Updates the component configuration.
+     *
+     * @param config - Partial configuration object to merge with existing config
+     *
+     * @example
+     * ```typescript
+     * this.datexService.updateConfig({
+     *   dateFormat: 'YYYY-MM-DD',
+     *   firstDayOfWeek: 0, // Sunday
+     *   businessDaysOnly: true
+     * });
+     * ```
+     */
+    updateConfig(config) {
+        this.config = { ...this.config, ...config };
+    }
+    /**
+     * Sets the locale configuration for internationalization.
+     *
+     * @param locale - Locale configuration object
+     *
+     * @example
+     * ```typescript
+     * this.datexService.setLocale({
+     *   format: 'DD/MM/YYYY',
+     *   daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+     *   monthNames: ['Enero', 'Febrero', ...],
+     *   applyLabel: 'Aplicar',
+     *   cancelLabel: 'Cancelar'
+     * });
+     * ```
+     */
+    setLocale(locale) {
+        this.locale = { ...this.locale, ...locale };
+    }
+    /**
+     * Formats a date range value into a display string.
+     *
+     * @param value - The date range value to format
+     * @param format - Optional format string (uses locale format if not provided)
+     * @returns Formatted date string
+     *
+     * @example
+     * ```typescript
+     * const dateRange: NgxDatexValue = {
+     *   startDate: new Date('2024-01-01'),
+     *   endDate: new Date('2024-01-31')
+     * };
+     *
+     * const formatted = this.datexService.formatDateValue(dateRange, 'DD/MM/YYYY');
+     * // Returns: "01/01/2024 - 31/01/2024"
+     * ```
+     */
+    formatDateValue(value, format) {
+        if (!value)
+            return '';
+        const dateFormat = format || this.locale.format || 'DD/MM/YYYY';
+        const start = formatDateValue(value.startDate, dateFormat);
+        if (!value.endDate || value.startDate.getTime() === value.endDate.getTime()) {
+            return start;
+        }
+        const end = formatDateValue(value.endDate, dateFormat);
+        return `${start}${this.locale.separator || ' - '}${end}`;
+    }
+    buildCalendarMatrix(month) {
+        const firstDay = getStartOfMonth(month);
+        const firstDayOfWeek = this.locale.firstDay || 1;
+        const startCalendar = getStartOfWeek(firstDay, firstDayOfWeek);
+        const calendarDays = [];
+        let currentWeek = [];
+        const startDate = new Date(startCalendar);
+        for (let i = 0; i < 42; i++) {
+            if (i > 0 && i % 7 === 0) {
+                calendarDays.push(currentWeek);
+                currentWeek = [];
+            }
+            const currentDate = new Date(startDate);
+            currentDate.setDate(startDate.getDate() + i);
+            currentDate.setHours(12, 0, 0, 0);
+            currentWeek.push(currentDate);
+        }
+        if (currentWeek.length > 0) {
+            calendarDays.push(currentWeek);
+        }
+        return calendarDays;
+    }
+    validateDate(date) {
+        if (!date || isNaN(date.getTime())) {
+            return { isValid: false, error: 'Fecha inválida', errorCode: 'INVALID_DATE' };
+        }
+        return { isValid: true };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * @fileoverview NgxDatex Overlay Service
+ *
+ * Service responsible for managing the calendar overlay positioning, creation, and lifecycle.
+ * Handles both desktop and mobile overlay strategies with proper event management.
+ */
+/**
+ * Service for managing calendar overlay positioning and lifecycle.
+ *
+ * Provides methods to create, position, and manage the calendar overlay
+ * with support for both desktop and mobile layouts. Handles click outside
+ * detection, keyboard events, and responsive positioning.
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * constructor(private overlayService: NgxDatexOverlayService) {}
+ *
+ * openCalendar() {
+ *   this.overlayService.createOverlay(
+ *     this.inputElement,
+ *     this.calendarTemplate,
+ *     this.viewContainerRef,
+ *     this.locale,
+ *     'center',
+ *     'auto',
+ *     () => this.closeCalendar(),
+ *     (event) => this.handleKeydown(event),
+ *     (position) => this.updatePosition(position)
+ *   );
+ * }
+ * ```
+ */
+class NgxDatexOverlayService {
+    overlayRef;
+    overlay = inject(Overlay);
+    /**
+     * Creates and configures the calendar overlay.
+     *
+     * Sets up the overlay with appropriate positioning strategy, event handlers,
+     * and responsive behavior. Reuses existing overlay if already created.
+     *
+     * @param inputElement - Reference to the input element for positioning
+     * @param calendarTemplate - Template reference for the calendar content
+     * @param viewContainerRef - View container for template portal
+     * @param locale - Localization settings for RTL/LTR direction
+     * @param opens - Horizontal alignment preference
+     * @param drops - Vertical alignment preference
+     * @param onOutsideClick - Callback for clicks outside the overlay
+     * @param onKeydown - Callback for keyboard events
+     * @param onPositionChange - Callback for position updates
+     * @returns The created or existing overlay reference
+     *
+     * @example
+     * ```typescript
+     * const overlayRef = this.overlayService.createOverlay(
+     *   this.inputElement,
+     *   this.calendarTemplate,
+     *   this.viewContainerRef,
+     *   this.locale(),
+     *   this.opens(),
+     *   this.drops(),
+     *   () => this.closeCalendar(),
+     *   (event) => {
+     *     if (event.key === 'Escape') {
+     *       this.closeCalendar();
+     *     }
+     *   },
+     *   (position) => this.updateArrowPosition(position)
+     * );
+     * ```
+     */
+    createOverlay(inputElement, calendarTemplate, viewContainerRef, locale, opens, drops, onOutsideClick, onKeydown, onPositionChange) {
+        if (this.overlayRef && this.overlayRef.hasAttached()) {
+            return this.overlayRef;
+        }
+        if (!this.overlayRef) {
+            const config = this.getOverlayConfig(inputElement, locale, opens, drops, onPositionChange);
+            this.overlayRef = this.overlay.create(config);
+            this.setupOverlayEvents(inputElement, onOutsideClick, onKeydown);
+        }
+        if (!this.overlayRef.hasAttached()) {
+            const portal = new TemplatePortal(calendarTemplate, viewContainerRef);
+            this.overlayRef.attach(portal);
+        }
+        return this.overlayRef;
+    }
+    /**
+     * Closes the calendar overlay without disposing it.
+     *
+     * Detaches the overlay content while keeping the overlay reference
+     * for potential reuse. The overlay can be reopened without recreation.
+     *
+     * @example
+     * ```typescript
+     * // Close the overlay
+     * this.overlayService.closeOverlay();
+     * ```
+     */
+    closeOverlay() {
+        if (this.overlayRef && this.overlayRef.hasAttached()) {
+            this.overlayRef.detach();
+        }
+    }
+    /**
+     * Completely disposes of the overlay and cleans up resources.
+     *
+     * Detaches content, disposes the overlay reference, and cleans up
+     * all associated resources. Should be called during component destruction.
+     *
+     * @example
+     * ```typescript
+     * ngOnDestroy() {
+     *   this.overlayService.disposeOverlay();
+     * }
+     * ```
+     */
+    disposeOverlay() {
+        if (this.overlayRef) {
+            if (this.overlayRef.hasAttached()) {
+                this.overlayRef.detach();
+            }
+            this.overlayRef.dispose();
+            this.overlayRef = undefined;
+        }
+    }
+    /**
+     * Sets up event listeners for the overlay.
+     *
+     * Configures click outside detection and keyboard event handling
+     * with different strategies for desktop and mobile devices.
+     *
+     * @private
+     * @param inputElement - Reference to the input element
+     * @param onOutsideClick - Callback for outside clicks
+     * @param onKeydown - Callback for keyboard events
+     */
+    setupOverlayEvents(inputElement, onOutsideClick, onKeydown) {
+        if (!this.overlayRef)
+            return;
+        if (!isMobileDevice()) {
+            this.overlayRef.outsidePointerEvents().subscribe((event) => {
+                const target = event.target;
+                const inputEl = inputElement?.nativeElement;
+                // Check if click was inside calendar or input
+                if ((inputEl && inputEl.contains(target)) ||
+                    target.closest('.ngx-datex-overlay') ||
+                    target.closest('.ngx-datex-calendar-grid') ||
+                    target.closest('.ngx-datex-time-picker') ||
+                    target.closest('.ngx-datex-ranges-sidebar') ||
+                    target.closest('.ngx-datex-footer-buttons') ||
+                    target.closest('.ngx-datex-mobile-header-buttons')) {
+                    return;
+                }
+                onOutsideClick();
+            });
+        }
+        else {
+            this.overlayRef.backdropClick().subscribe(() => {
+                onOutsideClick();
+            });
+        }
+        this.overlayRef.keydownEvents().subscribe((event) => {
+            onKeydown(event);
+        });
+    }
+    /**
+     * Creates the overlay configuration based on device type and preferences.
+     *
+     * Returns different configurations for mobile and desktop devices,
+     * with appropriate positioning strategies and styling.
+     *
+     * @private
+     * @param inputElement - Reference to the input element
+     * @param locale - Localization settings
+     * @param opens - Horizontal alignment preference
+     * @param drops - Vertical alignment preference
+     * @param onPositionChange - Callback for position updates
+     * @returns Overlay configuration object
+     */
+    getOverlayConfig(inputElement, locale, opens, drops, onPositionChange) {
+        const positionStrategy = this.getPositionStrategy(inputElement, opens, drops, onPositionChange);
+        if (isMobileDevice()) {
+            return new OverlayConfig({
+                positionStrategy: this.overlay.position().global().bottom('0').centerHorizontally(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+                panelClass: ['ngx-datex-overlay-panel', 'ngx-datex-mobile-overlay'],
+                scrollStrategy: this.overlay.scrollStrategies.block(),
+                direction: locale.direction || 'ltr',
+                width: '100vw',
+                maxHeight: '85vh',
+            });
+        }
+        return new OverlayConfig({
+            positionStrategy,
+            hasBackdrop: false,
+            backdropClass: '',
+            panelClass: 'ngx-datex-overlay-panel',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            direction: locale.direction || 'ltr',
+        });
+    }
+    /**
+     * Creates the flexible positioning strategy for desktop overlays.
+     *
+     * Configures multiple fallback positions based on user preferences
+     * and available space, with automatic repositioning on scroll.
+     *
+     * @private
+     * @param inputElement - Reference to the input element
+     * @param opens - Horizontal alignment preference
+     * @param drops - Vertical alignment preference
+     * @param onPositionChange - Callback for position updates
+     * @returns Flexible connected position strategy
+     */
+    getPositionStrategy(inputElement, opens, drops, onPositionChange) {
+        const positions = this.getPositions(opens, drops);
+        const strategy = this.overlay
+            .position()
+            .flexibleConnectedTo(inputElement)
+            .withPositions(positions)
+            .withFlexibleDimensions(true)
+            .withPush(true)
+            .withGrowAfterOpen(true)
+            .withViewportMargin(8);
+        strategy.positionChanges.subscribe((change) => {
+            if (change.connectionPair) {
+                onPositionChange({
+                    originX: change.connectionPair.originX,
+                    originY: change.connectionPair.originY,
+                    overlayX: change.connectionPair.overlayX,
+                    overlayY: change.connectionPair.overlayY,
+                });
+            }
+        });
+        return strategy;
+    }
+    /**
+     * Generates position configurations based on user preferences.
+     *
+     * Creates an array of connected positions with fallbacks,
+     * prioritizing user preferences while providing alternatives
+     * when space is limited.
+     *
+     * @private
+     * @param opens - Horizontal alignment preference
+     * @param drops - Vertical alignment preference
+     * @returns Array of connected position configurations
+     */
+    getPositions(opens, drops) {
+        let positions = [];
+        if (drops === 'auto') {
+            if (opens === 'left') {
+                positions = [
+                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+                ];
+            }
+            else if (opens === 'right') {
+                positions = [
+                    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+                    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+                ];
+            }
+            else {
+                positions = [
+                    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
+                    {
+                        originX: 'center',
+                        originY: 'top',
+                        overlayX: 'center',
+                        overlayY: 'bottom',
+                        offsetY: -4,
+                    },
+                ];
+            }
+        }
+        else if (drops === 'up') {
+            if (opens === 'left') {
+                positions = [
+                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+                ];
+            }
+            else if (opens === 'right') {
+                positions = [
+                    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+                ];
+            }
+            else {
+                positions = [
+                    {
+                        originX: 'center',
+                        originY: 'top',
+                        overlayX: 'center',
+                        overlayY: 'bottom',
+                        offsetY: -4,
+                    },
+                ];
+            }
+        }
+        else {
+            if (opens === 'left') {
+                positions = [
+                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+                ];
+            }
+            else if (opens === 'right') {
+                positions = [
+                    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+                ];
+            }
+            else {
+                positions = [
+                    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
+                ];
+            }
+        }
+        return positions;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexOverlayService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexOverlayService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @fileoverview NgxDatex Time Picker Service
+ *
+ * Service responsible for managing time picker functionality including time validation,
+ * time component updates, and availability calculations based on date constraints.
+ */
+/**
+ * Service for managing time picker operations and validations.
+ *
+ * Handles time component updates, validates time selections against date constraints,
+ * and provides available time options based on minimum/maximum date restrictions.
+ * Supports both 12-hour and 24-hour time formats with proper AM/PM handling.
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * constructor(private timePickerService: NgxDatexTimePickerService) {}
+ *
+ * onTimeChange(side: 'start' | 'end', component: 'hour' | 'minute', value: number) {
+ *   this.timePickerService.updateTimeFromPicker(
+ *     this.currentStartDate,
+ *     this.currentEndDate,
+ *     side,
+ *     component,
+ *     value,
+ *     this.startTime,
+ *     this.endTime,
+ *     this.timePicker24Hour,
+ *     this.singleDatePicker,
+ *     (date) => this.setStartDate(date),
+ *     (date) => this.setEndDate(date),
+ *     (side, time) => this.updateTimeSignal(side, time)
+ *   );
+ * }
+ * ```
+ */
+class NgxDatexTimePickerService {
+    /**
+     * Updates time from picker component changes and applies to dates.
+     *
+     * Handles time component updates (hour, minute, AM/PM) and applies the changes
+     * to the corresponding dates. Manages single date picker logic and ensures
+     * end dates don't precede start dates on the same day.
+     *
+     * @param currentStartDate - Current start date
+     * @param currentEndDate - Current end date (can be null)
+     * @param side - Which time picker is being updated ('start' or 'end')
+     * @param component - Which time component is changing ('hour', 'minute', or 'ampm')
+     * @param value - New value for the time component
+     * @param startTime - Current start time value
+     * @param endTime - Current end time value
+     * @param timePicker24Hour - Whether using 24-hour format
+     * @param singleDatePicker - Whether in single date picker mode
+     * @param onStartDateChange - Callback for start date changes
+     * @param onEndDateChange - Callback for end date changes
+     * @param onTimeChange - Callback for time signal updates
+     *
+     * @example
+     * ```typescript
+     * // Update start hour to 14 (2 PM)
+     * this.timePickerService.updateTimeFromPicker(
+     *   this.startDate,
+     *   this.endDate,
+     *   'start',
+     *   'hour',
+     *   14,
+     *   this.startTime,
+     *   this.endTime,
+     *   true, // 24-hour format
+     *   false, // range picker
+     *   (date) => this.updateStartDate(date),
+     *   (date) => this.updateEndDate(date),
+     *   (side, time) => this.updateTimeSignal(side, time)
+     * );
+     * ```
+     */
+    updateTimeFromPicker(currentStartDate, currentEndDate, side, component, value, startTime, endTime, timePicker24Hour, singleDatePicker, onStartDateChange, onEndDateChange, onTimeChange) {
+        if (!currentStartDate)
+            return;
+        // Update the time signal
+        if (side === 'start') {
+            const newStartTime = { ...startTime, [component]: value };
+            onTimeChange('start', newStartTime);
+            // Apply time to date
+            const newStartDate = this.applyTimeToDate(currentStartDate, newStartTime, timePicker24Hour);
+            onStartDateChange(newStartDate);
+            // Handle single date picker
+            if (singleDatePicker) {
+                onEndDateChange(new Date(newStartDate));
+            }
+            else if (currentEndDate &&
+                isSameDate(currentEndDate, newStartDate, 'day') &&
+                currentEndDate < newStartDate) {
+                onEndDateChange(new Date(newStartDate));
+            }
+        }
+        else if (currentEndDate) {
+            const newEndTime = { ...endTime, [component]: value };
+            onTimeChange('end', newEndTime);
+            // Apply time to date
+            const newEndDate = this.applyTimeToDate(currentEndDate, newEndTime, timePicker24Hour);
+            onEndDateChange(newEndDate);
+        }
+    }
+    /**
+     * Applies time values to a date object.
+     *
+     * Creates a new date with the specified time components applied.
+     * Handles 12-hour to 24-hour conversion and ensures proper time formatting.
+     *
+     * @private
+     * @param date - Base date to apply time to
+     * @param time - Time value with hour, minute, and AM/PM
+     * @param is24Hour - Whether using 24-hour format
+     * @returns New date with applied time
+     *
+     * @example
+     * ```typescript
+     * const date = new Date('2024-01-15');
+     * const time = { hour: 2, minute: 30, ampm: 'PM' };
+     * const result = this.applyTimeToDate(date, time, false);
+     * // Result: 2024-01-15 14:30:00
+     * ```
+     */
+    applyTimeToDate(date, time, is24Hour) {
+        const newDate = new Date(date);
+        let hour24 = time.hour;
+        if (!is24Hour) {
+            if (time.ampm === 'PM' && time.hour < 12)
+                hour24 += 12;
+            if (time.ampm === 'AM' && time.hour === 12)
+                hour24 = 0;
+        }
+        newDate.setHours(hour24, time.minute, 0, 0);
+        return newDate;
+    }
+    /**
+     * Extracts time components from a date object.
+     *
+     * Converts a date to time picker format, handling both 12-hour and 24-hour
+     * formats with proper AM/PM designation.
+     *
+     * @param date - Date to extract time from
+     * @param timePicker24Hour - Whether using 24-hour format
+     * @returns Time value object with hour, minute, and AM/PM
+     *
+     * @example
+     * ```typescript
+     * const date = new Date('2024-01-15 14:30:00');
+     *
+     * // 24-hour format
+     * const time24 = this.updateTimeSignalsFromDate(date, true);
+     * // Result: { hour: 14, minute: 30, ampm: 'AM' }
+     *
+     * // 12-hour format
+     * const time12 = this.updateTimeSignalsFromDate(date, false);
+     * // Result: { hour: 2, minute: 30, ampm: 'PM' }
+     * ```
+     */
+    updateTimeSignalsFromDate(date, timePicker24Hour) {
+        const hour24 = date.getHours();
+        const minute = date.getMinutes();
+        if (timePicker24Hour) {
+            return { hour: hour24, minute, ampm: 'AM' };
+        }
+        else {
+            const hour12 = hour24 === 0 ? 12 : hour24 > 12 ? hour24 - 12 : hour24;
+            const ampm = hour24 >= 12 ? 'PM' : 'AM';
+            return { hour: hour12, minute, ampm };
+        }
+    }
+    /**
+     * Gets available hours based on date constraints.
+     *
+     * Returns an array of hour options with disabled state based on minimum/maximum
+     * date restrictions and start date constraints for end time selection.
+     *
+     * @param date - Date to get hours for
+     * @param minDate - Minimum allowed date
+     * @param maxDate - Maximum allowed date
+     * @param timePicker24Hour - Whether using 24-hour format
+     * @param timeValue - Current time value for AM/PM context
+     * @param isEndTime - Whether this is for end time selection
+     * @param startDate - Start date for end time validation
+     * @returns Array of hour options with availability status
+     *
+     * @example
+     * ```typescript
+     * const availableHours = this.timePickerService.getAvailableHours(
+     *   new Date('2024-01-15'),
+     *   new Date('2024-01-15 10:00:00'), // minDate
+     *   new Date('2024-01-15 18:00:00'), // maxDate
+     *   false, // 12-hour format
+     *   { hour: 2, minute: 0, ampm: 'PM' },
+     *   false, // start time
+     * );
+     * // Result: [
+     * //   { value: 1, disabled: true },  // Before minDate
+     * //   { value: 2, disabled: false }, // Available
+     * //   { value: 6, disabled: true },  // After maxDate
+     * // ]
+     * ```
+     */
+    getAvailableHours(date, minDate, maxDate, timePicker24Hour, timeValue, isEndTime = false, startDate) {
+        if (!date)
+            return [];
+        const hours = timePicker24Hour
+            ? Array.from({ length: 24 }, (_, i) => i)
+            : Array.from({ length: 12 }, (_, i) => i + 1);
+        return hours.map((hour) => {
+            let hour24 = hour;
+            if (!timePicker24Hour) {
+                hour24 =
+                    timeValue.ampm === 'PM' && hour !== 12
+                        ? hour + 12
+                        : timeValue.ampm === 'AM' && hour === 12
+                            ? 0
+                            : hour;
+            }
+            const testDate = new Date(date);
+            testDate.setHours(hour24, 59, 59, 999);
+            const testDateMin = new Date(date);
+            testDateMin.setHours(hour24, 0, 0, 0);
+            let disabled = false;
+            if (minDate && testDate < minDate)
+                disabled = true;
+            if (maxDate && testDateMin > maxDate)
+                disabled = true;
+            // For end time, check against start date
+            if (isEndTime && startDate && isSameDate(startDate, date, 'day')) {
+                if (testDate < startDate)
+                    disabled = true;
+            }
+            return { value: hour, disabled };
+        });
+    }
+    /**
+     * Gets available minutes based on date and hour constraints.
+     *
+     * Returns an array of minute options with disabled state based on minimum/maximum
+     * date restrictions, time picker increment, and start date constraints.
+     *
+     * @param date - Date to get minutes for
+     * @param minDate - Minimum allowed date
+     * @param maxDate - Maximum allowed date
+     * @param timeValue - Current time value for hour context
+     * @param timePickerIncrement - Minute increment step
+     * @param timePicker24Hour - Whether using 24-hour format
+     * @param isEndTime - Whether this is for end time selection
+     * @param startDate - Start date for end time validation
+     * @returns Array of minute options with availability status
+     *
+     * @example
+     * ```typescript
+     * const availableMinutes = this.timePickerService.getAvailableMinutes(
+     *   new Date('2024-01-15'),
+     *   new Date('2024-01-15 14:15:00'), // minDate
+     *   new Date('2024-01-15 14:45:00'), // maxDate
+     *   { hour: 14, minute: 30, ampm: 'PM' },
+     *   15, // 15-minute increments
+     *   true, // 24-hour format
+     *   false, // start time
+     * );
+     * // Result: [
+     * //   { value: 0, disabled: true },  // Before minDate
+     * //   { value: 15, disabled: false }, // Available
+     * //   { value: 30, disabled: false }, // Available
+     * //   { value: 45, disabled: false }, // Available
+     * // ]
+     * ```
+     */
+    getAvailableMinutes(date, minDate, maxDate, timeValue, timePickerIncrement, timePicker24Hour, isEndTime = false, startDate) {
+        if (!date)
+            return [];
+        const minutes = [];
+        for (let i = 0; i < 60; i += timePickerIncrement) {
+            minutes.push(i);
+        }
+        // Convert current hour to 24h format
+        let hour24 = timeValue.hour;
+        if (!timePicker24Hour) {
+            hour24 =
+                timeValue.ampm === 'PM' && timeValue.hour !== 12
+                    ? timeValue.hour + 12
+                    : timeValue.ampm === 'AM' && timeValue.hour === 12
+                        ? 0
+                        : timeValue.hour;
+        }
+        return minutes.map((minute) => {
+            const testDate = new Date(date);
+            testDate.setHours(hour24, minute, 59, 999);
+            const testDateMin = new Date(date);
+            testDateMin.setHours(hour24, minute, 0, 0);
+            let disabled = false;
+            if (minDate && testDate < minDate)
+                disabled = true;
+            if (maxDate && testDateMin > maxDate)
+                disabled = true;
+            // For end time, check against start date
+            if (isEndTime && startDate && isSameDate(startDate, date, 'day')) {
+                const startHour = startDate.getHours();
+                if (hour24 === startHour) {
+                    if (minute < startDate.getMinutes())
+                        disabled = true;
+                }
+                else if (hour24 < startHour) {
+                    disabled = true;
+                }
+            }
+            return { value: minute, disabled };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexTimePickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexTimePickerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexTimePickerService, decorators: [{
+            type: Injectable
+        }] });
+
+class NgxDatexCalendarService {
+    updateMonthsInView(startDate, endDate, currentLeftMonth, currentRightMonth, singleDatePicker, linkedCalendars, maxDate, onLeftMonthChange, onRightMonthChange) {
+        if (!startDate)
+            return;
+        if (endDate) {
+            // Check if both dates are already visible
+            if (!singleDatePicker && currentLeftMonth && currentRightMonth) {
+                const startYearMonth = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}`;
+                const endYearMonth = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}`;
+                const leftYearMonth = `${currentLeftMonth.getFullYear()}-${String(currentLeftMonth.getMonth() + 1).padStart(2, '0')}`;
+                const rightYearMonth = `${currentRightMonth.getFullYear()}-${String(currentRightMonth.getMonth() + 1).padStart(2, '0')}`;
+                if ((startYearMonth === leftYearMonth || startYearMonth === rightYearMonth) &&
+                    (endYearMonth === leftYearMonth || endYearMonth === rightYearMonth)) {
+                    return;
+                }
+            }
+            // Set left calendar to start date month
+            const newLeftMonth = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
+            onLeftMonthChange(newLeftMonth);
+            if (!linkedCalendars &&
+                (endDate.getMonth() !== startDate.getMonth() ||
+                    endDate.getFullYear() !== startDate.getFullYear())) {
+                // Show end date month on right
+                const newRightMonth = new Date(endDate.getFullYear(), endDate.getMonth(), 1);
+                onRightMonthChange(newRightMonth);
+            }
+            else {
+                // Show next month on right
+                const nextMonth = addMonths(newLeftMonth, 1);
+                onRightMonthChange(nextMonth);
+            }
+        }
+        else {
+            // Only start date - navigate if not visible
+            const startYearMonth = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}`;
+            const leftYearMonth = currentLeftMonth
+                ? `${currentLeftMonth.getFullYear()}-${String(currentLeftMonth.getMonth() + 1).padStart(2, '0')}`
+                : '';
+            const rightYearMonth = currentRightMonth
+                ? `${currentRightMonth.getFullYear()}-${String(currentRightMonth.getMonth() + 1).padStart(2, '0')}`
+                : '';
+            if (leftYearMonth !== startYearMonth && rightYearMonth !== startYearMonth) {
+                const newLeftMonth = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
+                onLeftMonthChange(newLeftMonth);
+                const nextMonth = addMonths(newLeftMonth, 1);
+                onRightMonthChange(nextMonth);
+            }
+        }
+        // Check max date limits
+        if (maxDate && linkedCalendars && !singleDatePicker && currentRightMonth > maxDate) {
+            const maxRightMonth = new Date(maxDate.getFullYear(), maxDate.getMonth(), 1);
+            const maxLeftMonth = addMonths(maxRightMonth, -1);
+            onRightMonthChange(maxRightMonth);
+            onLeftMonthChange(maxLeftMonth);
+        }
+    }
+    setStartDate(startDate, minDate, maxDate, timePicker, timePickerIncrement) {
+        let newStartDate = new Date(startDate);
+        if (!timePicker) {
+            newStartDate = startOfDay(newStartDate);
+        }
+        if (timePicker && timePickerIncrement) {
+            const minutes = newStartDate.getMinutes();
+            const roundedMinutes = Math.round(minutes / timePickerIncrement) * timePickerIncrement;
+            newStartDate.setMinutes(roundedMinutes);
+        }
+        if (minDate && isBeforeDate(newStartDate, minDate)) {
+            newStartDate = new Date(minDate);
+            if (timePicker && timePickerIncrement) {
+                const minutes = newStartDate.getMinutes();
+                const roundedMinutes = Math.round(minutes / timePickerIncrement) * timePickerIncrement;
+                newStartDate.setMinutes(roundedMinutes);
+            }
+        }
+        if (maxDate && newStartDate > maxDate) {
+            newStartDate = new Date(maxDate);
+            if (timePicker && timePickerIncrement) {
+                const minutes = newStartDate.getMinutes();
+                const flooredMinutes = Math.floor(minutes / timePickerIncrement) * timePickerIncrement;
+                newStartDate.setMinutes(flooredMinutes);
+            }
+        }
+        return newStartDate;
+    }
+    setEndDate(endDate, startDate, maxDate, maxSpan, timePicker, timePickerIncrement) {
+        let newEndDate = new Date(endDate);
+        if (!timePicker) {
+            newEndDate = endOfDay(newEndDate);
+        }
+        if (timePicker && timePickerIncrement) {
+            const minutes = newEndDate.getMinutes();
+            const roundedMinutes = Math.round(minutes / timePickerIncrement) * timePickerIncrement;
+            newEndDate.setMinutes(roundedMinutes);
+        }
+        if (startDate && isBeforeDate(newEndDate, startDate)) {
+            newEndDate = new Date(startDate);
+        }
+        if (maxDate && newEndDate > maxDate) {
+            newEndDate = new Date(maxDate);
+        }
+        // Validate maxSpan
+        if (maxSpan && startDate) {
+            const maxLimit = addDays(startDate, this.getMaxSpanDays(maxSpan));
+            if (newEndDate > maxLimit) {
+                newEndDate = new Date(maxLimit);
+            }
+        }
+        return newEndDate;
+    }
+    getMaxSpanDays(maxSpan) {
+        let days = 0;
+        if (maxSpan['days'])
+            days += maxSpan['days'];
+        if (maxSpan['weeks'])
+            days += maxSpan['weeks'] * 7;
+        if (maxSpan['months'])
+            days += maxSpan['months'] * 30;
+        if (maxSpan['years'])
+            days += maxSpan['years'] * 365;
+        return days;
+    }
+    isDateDisabled(date, minDate, maxDate, maxSpan, currentStartDate, currentEndDate, singleDatePicker, isInvalidDateFn) {
+        if (minDate && date < minDate)
+            return true;
+        if (maxDate && date > maxDate)
+            return true;
+        if (maxSpan && !singleDatePicker && currentStartDate && !currentEndDate) {
+            const maxLimit = addDays(currentStartDate, this.getMaxSpanDays(maxSpan));
+            if (date > maxLimit)
+                return true;
+        }
+        if (isInvalidDateFn && isInvalidDateFn(date))
+            return true;
+        return false;
+    }
+    isDateSelected(date, currentStartDate, currentEndDate, singleDatePicker) {
+        if (!currentStartDate)
+            return false;
+        if (singleDatePicker) {
+            return isSameDate(date, currentStartDate, 'day');
+        }
+        return (isSameDate(date, currentStartDate, 'day') ||
+            (currentEndDate !== null && isSameDate(date, currentEndDate, 'day')));
+    }
+    isDateInRange(date, currentStartDate, currentEndDate, singleDatePicker) {
+        if (!currentStartDate || !currentEndDate || singleDatePicker)
+            return false;
+        return date > currentStartDate && date < currentEndDate;
+    }
+    isDateRangeStart(date, currentStartDate) {
+        if (!currentStartDate)
+            return false;
+        return isSameDate(date, currentStartDate, 'day');
+    }
+    isDateRangeEnd(date, currentEndDate) {
+        if (!currentEndDate)
+            return false;
+        return isSameDate(date, currentEndDate, 'day');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexCalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexCalendarService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatexCalendarService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @fileoverview NgxDatex - Advanced Angular Date Range Picker Component
+ *
+ * A comprehensive date picker component for Angular applications that supports:
+ * - Single date and date range selection
+ * - Time picker integration
+ * - Predefined date ranges
+ * - Multiple themes and localization
+ * - Mobile-responsive design
+ * - Accessibility features
+ * - Form integration with ControlValueAccessor
+ *
+ * Based on the popular vanilla daterangepicker library but built specifically for Angular
+ * with modern Angular patterns including signals, standalone components, and CDK overlays.
+ *
+ * @example
+ * Basic usage:
+ * ```html
+ * <ngx-datex
+ *   [(ngModel)]="selectedRange"
+ *   [ranges]="predefinedRanges"
+ *   [locale]="spanishLocale">
+ * </ngx-datex>
+ * ```
+ *
+ * @example
+ * Advanced configuration:
+ * ```html
+ * <ngx-datex
+ *   [singleDatePicker]="false"
+ *   [timePicker]="true"
+ *   [autoApply]="true"
+ *   [showDropdowns]="true"
+ *   [linkedCalendars]="true"
+ *   [minDate]="minDate"
+ *   [maxDate]="maxDate"
+ *   (dateChange)="onDateChange($event)"
+ *   (rangeChange)="onRangeChange($event)">
+ * </ngx-datex>
+ * ```
+ */
+/**
+ * NgxDatex - Advanced Angular Date Range Picker Component
+ *
+ * A feature-rich, accessible date picker component that provides both single date
+ * and date range selection capabilities. Built with Angular signals for optimal
+ * performance and modern Angular patterns.
+ *
+ * ## Key Features
+ * - 📅 Single date and date range selection
+ * - ⏰ Optional time picker with 12/24 hour formats
+ * - 🎨 Customizable themes and styling
+ * - 🌍 Full internationalization support
+ * - 📱 Mobile-responsive design
+ * - ♿ WCAG accessibility compliant
+ * - 🔧 Extensive configuration options
+ * - 📋 Angular Forms integration (ControlValueAccessor)
+ *
+ * ## Basic Usage
+ * ```html
+ * <ngx-datex
+ *   [(ngModel)]="selectedRange"
+ *   [locale]="locale"
+ *   [ranges]="predefinedRanges">
+ * </ngx-datex>
+ * ```
+ *
+ * ## Advanced Configuration
+ * ```typescript
+ * // Component
+ * export class MyComponent {
+ *   selectedRange: NgxDatexValue | null = null;
+ *
+ *   customRanges = {
+ *     'Today': [startOfDay(new Date()), endOfDay(new Date())],
+ *     'Last 7 Days': [startOfDay(subDays(new Date(), 6)), endOfDay(new Date())]
+ *   };
+ *
+ *   onDateChange(value: NgxDatexValue | null) {
+ *     console.log('Selected range:', value);
+ *   }
+ * }
+ * ```
+ *
+ * ```html
+ * <!-- Template -->
+ * <ngx-datex
+ *   [singleDatePicker]="false"
+ *   [timePicker]="true"
+ *   [autoApply]="false"
+ *   [showDropdowns]="true"
+ *   [ranges]="customRanges"
+ *   [minDate]="minDate"
+ *   [maxDate]="maxDate"
+ *   (dateChange)="onDateChange($event)"
+ *   (rangeChange)="onRangeChange($event)">
+ * </ngx-datex>
+ * ```
+ *
+ * @see {@link NgxDatexValue} for the value interface
+ * @see {@link NgxDatexConfig} for configuration options
+ * @see {@link NgxDatexLocale} for localization settings
+ * @see {@link NgxDatexTheme} for theming options
+ */
+class NgxDatex {
+    inputElement;
+    calendarTemplate;
+    // Services
+    datexService = inject(NgxDatexService);
+    overlayService = inject(NgxDatexOverlayService);
+    timePickerService = inject(NgxDatexTimePickerService);
+    calendarService = inject(NgxDatexCalendarService);
+    platformId = inject(PLATFORM_ID);
+    viewContainerRef = inject(ViewContainerRef);
+    // Configuration inputs
+    /**
+     * General configuration options for the date picker.
+     *
+     * @example
+     * ```typescript
+     * const config: NgxDatexConfig = {
+     *   dateFormat: 'DD/MM/YYYY',
+     *   firstDayOfWeek: 1,
+     *   businessDaysOnly: true
+     * };
+     * ```
+     */
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    /**
+     * Localization settings for internationalization.
+     * Controls language, date formats, and UI text.
+     *
+     * @default SPANISH_LOCALE
+     *
+     * @example
+     * ```typescript
+     * const frenchLocale: NgxDatexLocale = {
+     *   format: 'DD/MM/YYYY',
+     *   daysOfWeek: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
+     *   applyLabel: 'Appliquer',
+     *   cancelLabel: 'Annuler'
+     * };
+     * ```
+     */
+    locale = input(SPANISH_LOCALE, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    /**
+     * Theme configuration for styling the date picker.
+     * Defines colors, typography, spacing, and visual appearance.
+     *
+     * @default MATERIAL_LIGHT_THEME
+     *
+     * @example
+     * ```typescript
+     * const darkTheme: NgxDatexTheme = {
+     *   name: 'dark',
+     *   colors: { primary: '#bb86fc', background: '#121212', ... }
+     * };
+     * ```
+     */
+    theme = input(MATERIAL_LIGHT_THEME, ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    // Appearance inputs
+    /**
+     * Material form field appearance style.
+     *
+     * @default 'outline'
+     *
+     * @example
+     * ```html
+     * <ngx-datex appearance="fill"></ngx-datex>
+     * <ngx-datex appearance="outline"></ngx-datex>
+     * ```
+     */
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /**
+     * Controls when the form field label should float.
+     *
+     * @default 'auto'
+     *
+     * @example
+     * ```html
+     * <ngx-datex floatLabel="always"></ngx-datex>
+     * <ngx-datex floatLabel="auto"></ngx-datex>
+     * ```
+     */
+    floatLabel = input('auto', ...(ngDevMode ? [{ debugName: "floatLabel" }] : []));
+    /**
+     * Label text displayed above the input field.
+     *
+     * @default ''
+     *
+     * @example
+     * ```html
+     * <ngx-datex label="Select Date Range"></ngx-datex>
+     * ```
+     */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /**
+     * Placeholder text shown when no date is selected.
+     *
+     * @default 'Seleccionar fecha'
+     *
+     * @example
+     * ```html
+     * <ngx-datex placeholder="Choose your dates"></ngx-datex>
+     * ```
+     */
+    placeholder = input('Seleccionar fecha', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /**
+     * Material icon name for the calendar icon.
+     *
+     * @default 'calendar_today'
+     *
+     * @example
+     * ```html
+     * <ngx-datex calendarIcon="event" [showCalendarIcon]="true"></ngx-datex>
+     * ```
+     */
+    calendarIcon = input('calendar_today', ...(ngDevMode ? [{ debugName: "calendarIcon" }] : []));
+    /**
+     * Whether to display the calendar icon.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCalendarIcon]="true"></ngx-datex>
+     * ```
+     */
+    showCalendarIcon = input(false, ...(ngDevMode ? [{ debugName: "showCalendarIcon" }] : []));
+    /**
+     * Position of the calendar icon relative to the input.
+     *
+     * @default 'suffix'
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCalendarIcon]="true" calendarIconPosition="prefix"></ngx-datex>
+     * ```
+     */
+    calendarIconPosition = input('suffix', ...(ngDevMode ? [{ debugName: "calendarIconPosition" }] : []));
+    /**
+     * Whether to display a checkbox alongside the input.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCheckbox]="true" (checkboxChange)="onCheckboxChange($event)"></ngx-datex>
+     * ```
+     */
+    showCheckbox = input(false, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
+    /**
+     * Position of the checkbox relative to the input.
+     *
+     * @default 'prefix'
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCheckbox]="true" checkboxPosition="suffix"></ngx-datex>
+     * ```
+     */
+    checkboxPosition = input('prefix', ...(ngDevMode ? [{ debugName: "checkboxPosition" }] : []));
+    /**
+     * Whether the input field is readonly.
+     * When true, users can only interact with the calendar popup.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [readonly]="true"></ngx-datex>
+     * ```
+     */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    /**
+     * Whether the entire component is disabled.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [disabled]="isFormDisabled"></ngx-datex>
+     * ```
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Whether to show the calendar header with navigation controls.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showHeader]="false"></ngx-datex>
+     * ```
+     */
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    /**
+     * Whether to show the calendar footer with apply/cancel buttons.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showFooter]="false" [autoApply]="true"></ngx-datex>
+     * ```
+     */
+    showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
+    // Behavior inputs
+    /**
+     * Whether to use single date selection mode instead of date range selection.
+     * When true, only one date can be selected at a time.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <!-- Single date picker -->
+     * <ngx-datex [singleDatePicker]="true"></ngx-datex>
+     *
+     * <!-- Date range picker (default) -->
+     * <ngx-datex [singleDatePicker]="false"></ngx-datex>
+     * ```
+     */
+    singleDatePicker = input(false, ...(ngDevMode ? [{ debugName: "singleDatePicker" }] : []));
+    /**
+     * Whether to automatically apply the selection without requiring the Apply button.
+     * When true, selections are applied immediately. Automatically disabled when timePicker is enabled.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <!-- Auto-apply selections -->
+     * <ngx-datex [autoApply]="true"></ngx-datex>
+     *
+     * <!-- Require Apply button -->
+     * <ngx-datex [autoApply]="false" [showFooter]="true"></ngx-datex>
+     * ```
+     */
+    autoApply = input(false, ...(ngDevMode ? [{ debugName: "autoApply" }] : []));
+    /**
+     * Whether to show month and year dropdown selectors in the calendar header.
+     * Allows quick navigation to distant dates.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showDropdowns]="true"></ngx-datex>
+     * ```
+     */
+    showDropdowns = input(false, ...(ngDevMode ? [{ debugName: "showDropdowns" }] : []));
+    /**
+     * Whether to enable time selection alongside date selection.
+     * Adds time picker controls to the calendar.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <!-- Date and time picker -->
+     * <ngx-datex [timePicker]="true" [timePicker24Hour]="true"></ngx-datex>
+     *
+     * <!-- Date only picker -->
+     * <ngx-datex [timePicker]="false"></ngx-datex>
+     * ```
+     */
+    timePicker = input(false, ...(ngDevMode ? [{ debugName: "timePicker" }] : []));
+    /**
+     * Whether to use 24-hour time format instead of 12-hour AM/PM format.
+     * Only applies when timePicker is enabled.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- 24-hour format: 14:30 -->
+     * <ngx-datex [timePicker]="true" [timePicker24Hour]="true"></ngx-datex>
+     *
+     * <!-- 12-hour format: 2:30 PM -->
+     * <ngx-datex [timePicker]="true" [timePicker24Hour]="false"></ngx-datex>
+     * ```
+     */
+    timePicker24Hour = input(true, ...(ngDevMode ? [{ debugName: "timePicker24Hour" }] : []));
+    /**
+     * The increment step for minute selection in the time picker.
+     * Minutes will be rounded to the nearest increment.
+     *
+     * @default 1
+     *
+     * @example
+     * ```html
+     * <!-- 15-minute increments: 00, 15, 30, 45 -->
+     * <ngx-datex [timePicker]="true" [timePickerIncrement]="15"></ngx-datex>
+     *
+     * <!-- 5-minute increments: 00, 05, 10, 15, 20... -->
+     * <ngx-datex [timePicker]="true" [timePickerIncrement]="5"></ngx-datex>
+     * ```
+     */
+    timePickerIncrement = input(1, ...(ngDevMode ? [{ debugName: "timePickerIncrement" }] : []));
+    /**
+     * Whether to show seconds in the time picker.
+     * Only applies when timePicker is enabled.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [timePicker]="true" [timePickerSeconds]="true"></ngx-datex>
+     * ```
+     */
+    timePickerSeconds = input(false, ...(ngDevMode ? [{ debugName: "timePickerSeconds" }] : []));
+    /**
+     * Whether the left and right calendars should be linked for navigation.
+     * When true, navigating one calendar automatically updates the other.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- Linked navigation -->
+     * <ngx-datex [linkedCalendars]="true"></ngx-datex>
+     *
+     * <!-- Independent navigation -->
+     * <ngx-datex [linkedCalendars]="false"></ngx-datex>
+     * ```
+     */
+    linkedCalendars = input(true, ...(ngDevMode ? [{ debugName: "linkedCalendars" }] : []));
+    /**
+     * Whether to automatically update the input field with the selected value.
+     * When false, the input remains unchanged until manually updated.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- Auto-update input -->
+     * <ngx-datex [autoUpdateInput]="true"></ngx-datex>
+     *
+     * <!-- Manual input updates -->
+     * <ngx-datex [autoUpdateInput]="false"></ngx-datex>
+     * ```
+     */
+    autoUpdateInput = input(true, ...(ngDevMode ? [{ debugName: "autoUpdateInput" }] : []));
+    /**
+     * Whether to always show both calendars even in single date picker mode.
+     * Useful for consistent layout regardless of picker mode.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [singleDatePicker]="true" [alwaysShowCalendars]="true"></ngx-datex>
+     * ```
+     */
+    alwaysShowCalendars = input(false, ...(ngDevMode ? [{ debugName: "alwaysShowCalendars" }] : []));
+    /**
+     * Whether to show the "Custom Range" option in the predefined ranges list.
+     * Only applies when ranges are configured.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- Show custom range option -->
+     * <ngx-datex [ranges]="predefinedRanges" [showCustomRangeLabel]="true"></ngx-datex>
+     *
+     * <!-- Hide custom range option -->
+     * <ngx-datex [ranges]="predefinedRanges" [showCustomRangeLabel]="false"></ngx-datex>
+     * ```
+     */
+    showCustomRangeLabel = input(true, ...(ngDevMode ? [{ debugName: "showCustomRangeLabel" }] : []));
+    // Computed autoApply following vanilla daterangepicker logic
+    effectiveAutoApply = computed(() => {
+        const autoApplyInput = this.autoApply();
+        const timePickerEnabled = this.timePicker();
+        return timePickerEnabled ? false : autoApplyInput;
+    }, ...(ngDevMode ? [{ debugName: "effectiveAutoApply" }] : []));
+    // Date range inputs
+    /**
+     * The initial start date for the date picker.
+     * If not provided, defaults to today.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * const startDate = new Date('2024-01-01');
+     * ```
+     *
+     * ```html
+     * <ngx-datex [startDate]="startDate" [endDate]="endDate"></ngx-datex>
+     * ```
+     */
+    startDate = input(null, ...(ngDevMode ? [{ debugName: "startDate" }] : []));
+    /**
+     * The initial end date for the date picker.
+     * If not provided, defaults to the start date (single date) or today (range).
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * const endDate = new Date('2024-01-31');
+     * ```
+     *
+     * ```html
+     * <ngx-datex [startDate]="startDate" [endDate]="endDate"></ngx-datex>
+     * ```
+     */
+    endDate = input(null, ...(ngDevMode ? [{ debugName: "endDate" }] : []));
+    /**
+     * The minimum selectable date.
+     * Users cannot select dates before this date.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * // Restrict to dates from today onwards
+     * const minDate = new Date();
+     * ```
+     *
+     * ```html
+     * <ngx-datex [minDate]="minDate"></ngx-datex>
+     * ```
+     */
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    /**
+     * The maximum selectable date.
+     * Users cannot select dates after this date.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * // Restrict to dates within the next year
+     * const maxDate = new Date();
+     * maxDate.setFullYear(maxDate.getFullYear() + 1);
+     * ```
+     *
+     * ```html
+     * <ngx-datex [maxDate]="maxDate"></ngx-datex>
+     * ```
+     */
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    /**
+     * The maximum allowed span between start and end dates.
+     * Prevents users from selecting ranges that exceed the specified duration.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * // Limit to 30 days maximum
+     * const maxSpan = { days: 30 };
+     *
+     * // Limit to 3 months maximum
+     * const maxSpan = { months: 3 };
+     *
+     * // Limit to 1 year maximum
+     * const maxSpan = { years: 1 };
+     * ```
+     *
+     * ```html
+     * <ngx-datex [maxSpan]="maxSpan"></ngx-datex>
+     * ```
+     */
+    maxSpan = input(null, ...(ngDevMode ? [{ debugName: "maxSpan" }] : []));
+    /**
+     * Whether to show week numbers in the calendar.
+     * Displays ISO week numbers on the left side of each week row.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showWeekNumbers]="true"></ngx-datex>
+     * ```
+     */
+    showWeekNumbers = input(false, ...(ngDevMode ? [{ debugName: "showWeekNumbers" }] : []));
+    /**
+     * Whether to show ISO week numbers instead of standard week numbers.
+     * Only applies when showWeekNumbers is true.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showWeekNumbers]="true" [showISOWeekNumbers]="true"></ngx-datex>
+     * ```
+     */
+    showISOWeekNumbers = input(false, ...(ngDevMode ? [{ debugName: "showISOWeekNumbers" }] : []));
+    /**
+     * CSS classes to apply to calendar buttons.
+     * Used for styling navigation and action buttons.
+     *
+     * @default 'btn btn-sm'
+     *
+     * @example
+     * ```html
+     * <ngx-datex buttonClasses="btn btn-outline-primary btn-sm"></ngx-datex>
+     * ```
+     */
+    buttonClasses = input('btn btn-sm', ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
+    /**
+     * CSS classes to apply to the Apply button.
+     * Combined with buttonClasses for the final styling.
+     *
+     * @default 'btn-success'
+     *
+     * @example
+     * ```html
+     * <ngx-datex applyButtonClasses="btn-primary"></ngx-datex>
+     * ```
+     */
+    applyButtonClasses = input('btn-success', ...(ngDevMode ? [{ debugName: "applyButtonClasses" }] : []));
+    /**
+     * CSS classes to apply to the Cancel button.
+     * Combined with buttonClasses for the final styling.
+     *
+     * @default 'btn-danger'
+     *
+     * @example
+     * ```html
+     * <ngx-datex cancelButtonClasses="btn-secondary"></ngx-datex>
+     * ```
+     */
+    cancelButtonClasses = input('btn-danger', ...(ngDevMode ? [{ debugName: "cancelButtonClasses" }] : []));
+    /**
+     * Function to determine if a specific date should be disabled.
+     * Return true to disable the date, false to enable it.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * // Disable weekends
+     * const isInvalidDate = (date: Date): boolean => {
+     *   const day = date.getDay();
+     *   return day === 0 || day === 6; // Sunday or Saturday
+     * };
+     *
+     * // Disable specific dates
+     * const blackoutDates = [new Date('2024-12-25'), new Date('2024-01-01')];
+     * const isInvalidDate = (date: Date): boolean => {
+     *   return blackoutDates.some(blackout =>
+     *     date.toDateString() === blackout.toDateString()
+     *   );
+     * };
+     * ```
+     *
+     * ```html
+     * <ngx-datex [isInvalidDate]="isInvalidDate"></ngx-datex>
+     * ```
+     */
+    isInvalidDate = input(null, ...(ngDevMode ? [{ debugName: "isInvalidDate" }] : []));
+    /**
+     * Function to apply custom CSS classes to specific dates.
+     * Return a string or array of strings for CSS classes, or false for no custom styling.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * // Highlight holidays
+     * const isCustomDate = (date: Date): string | string[] | false => {
+     *   const holidays = [new Date('2024-12-25'), new Date('2024-01-01')];
+     *   if (holidays.some(holiday => date.toDateString() === holiday.toDateString())) {
+     *     return 'holiday-date';
+     *   }
+     *   return false;
+     * };
+     *
+     * // Multiple classes for different date types
+     * const isCustomDate = (date: Date): string | string[] | false => {
+     *   if (date.getDay() === 0) return ['weekend', 'sunday'];
+     *   if (date.getDay() === 6) return ['weekend', 'saturday'];
+     *   return false;
+     * };
+     * ```
+     *
+     * ```html
+     * <ngx-datex [isCustomDate]="isCustomDate"></ngx-datex>
+     * ```
+     */
+    isCustomDate = input(null, ...(ngDevMode ? [{ debugName: "isCustomDate" }] : []));
+    /**
+     * The minimum year to show in the year dropdown.
+     * Only applies when showDropdowns is true.
+     *
+     * @default Current year - 100
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showDropdowns]="true" [minYear]="2020" [maxYear]="2030"></ngx-datex>
+     * ```
+     */
+    minYear = input(new Date().getFullYear() - 100, ...(ngDevMode ? [{ debugName: "minYear" }] : []));
+    /**
+     * The maximum year to show in the year dropdown.
+     * Only applies when showDropdowns is true.
+     *
+     * @default Current year + 100
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showDropdowns]="true" [minYear]="2020" [maxYear]="2030"></ngx-datex>
+     * ```
+     */
+    maxYear = input(new Date().getFullYear() + 100, ...(ngDevMode ? [{ debugName: "maxYear" }] : []));
+    /**
+     * Predefined date ranges that users can quickly select.
+     * Displayed as a sidebar list for easy access to common date ranges.
+     *
+     * @default DEFAULT_RANGES
+     *
+     * @example
+     * ```typescript
+     * const customRanges = {
+     *   'Today': [startOfDay(new Date()), endOfDay(new Date())],
+     *   'Yesterday': [
+     *     startOfDay(subDays(new Date(), 1)),
+     *     endOfDay(subDays(new Date(), 1))
+     *   ],
+     *   'Last 7 Days': [
+     *     startOfDay(subDays(new Date(), 6)),
+     *     endOfDay(new Date())
+     *   ],
+     *   'Last 30 Days': [
+     *     startOfDay(subDays(new Date(), 29)),
+     *     endOfDay(new Date())
+     *   ],
+     *   'This Month': [
+     *     startOfMonth(new Date()),
+     *     endOfMonth(new Date())
+     *   ]
+     * };
+     * ```
+     *
+     * ```html
+     * <ngx-datex [ranges]="customRanges"></ngx-datex>
+     * ```
+     */
+    ranges = input(DEFAULT_RANGES, ...(ngDevMode ? [{ debugName: "ranges" }] : []));
+    // Positioning inputs
+    /**
+     * The horizontal alignment of the calendar overlay relative to the input.
+     * Controls where the calendar appears horizontally.
+     *
+     * @default 'center'
+     *
+     * @example
+     * ```html
+     * <!-- Calendar opens to the left of the input -->
+     * <ngx-datex opens="left"></ngx-datex>
+     *
+     * <!-- Calendar opens to the right of the input -->
+     * <ngx-datex opens="right"></ngx-datex>
+     *
+     * <!-- Calendar opens centered on the input -->
+     * <ngx-datex opens="center"></ngx-datex>
+     * ```
+     */
+    opens = input('center', ...(ngDevMode ? [{ debugName: "opens" }] : []));
+    /**
+     * The vertical alignment of the calendar overlay relative to the input.
+     * Controls where the calendar appears vertically.
+     *
+     * @default 'auto'
+     *
+     * @example
+     * ```html
+     * <!-- Calendar always opens below the input -->
+     * <ngx-datex drops="down"></ngx-datex>
+     *
+     * <!-- Calendar always opens above the input -->
+     * <ngx-datex drops="up"></ngx-datex>
+     *
+     * <!-- Calendar opens in the best available space -->
+     * <ngx-datex drops="auto"></ngx-datex>
+     * ```
+     */
+    drops = input('auto', ...(ngDevMode ? [{ debugName: "drops" }] : []));
+    // Template inputs
+    /**
+     * Custom template for the calendar header.
+     * Allows complete customization of the header area including navigation controls.
+     *
+     * @default null
+     *
+     * @example
+     * ```html
+     * <ngx-datex [headerTemplate]="customHeader">
+     * </ngx-datex>
+     *
+     * <ng-template #customHeader>
+     *   <div class="custom-header">
+     *     <button (click)="previousMonth()">Previous</button>
+     *     <span>{{ currentMonth }}</span>
+     *     <button (click)="nextMonth()">Next</button>
+     *   </div>
+     * </ng-template>
+     * ```
+     */
+    headerTemplate = input(null, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    /**
+     * Custom template for the calendar footer.
+     * Allows complete customization of the footer area including action buttons.
+     *
+     * @default null
+     *
+     * @example
+     * ```html
+     * <ngx-datex [footerTemplate]="customFooter">
+     * </ngx-datex>
+     *
+     * <ng-template #customFooter>
+     *   <div class="custom-footer">
+     *     <button (click)="clearSelection()">Clear</button>
+     *     <button (click)="applySelection()">Apply</button>
+     *   </div>
+     * </ng-template>
+     * ```
+     */
+    footerTemplate = input(null, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    /**
+     * Custom template for individual calendar day cells.
+     * Allows complete customization of how each date is displayed.
+     *
+     * @default null
+     *
+     * @example
+     * ```html
+     * <ngx-datex [dayTemplate]="customDay">
+     * </ngx-datex>
+     *
+     * <ng-template #customDay let-date="date" let-isSelected="isSelected">
+     *   <div class="custom-day" [class.selected]="isSelected">
+     *     <span>{{ date.getDate() }}</span>
+     *     <small *ngIf="hasEvent(date)">•</small>
+     *   </div>
+     * </ng-template>
+     * ```
+     */
+    dayTemplate = input(null, ...(ngDevMode ? [{ debugName: "dayTemplate" }] : []));
+    // Accessibility inputs
+    /**
+     * ARIA label for the date picker input.
+     * Provides accessible description for screen readers.
+     *
+     * @default 'Date picker'
+     *
+     * @example
+     * ```html
+     * <ngx-datex ariaLabel="Select booking dates"></ngx-datex>
+     * <ngx-datex ariaLabel="Choose event date range"></ngx-datex>
+     * ```
+     */
+    ariaLabel = input('Date picker', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * ARIA described-by attribute for the date picker input.
+     * References additional descriptive text for screen readers.
+     *
+     * @default ''
+     *
+     * @example
+     * ```html
+     * <ngx-datex ariaDescribedBy="date-help-text"></ngx-datex>
+     * <div id="date-help-text">Select your preferred date range</div>
+     * ```
+     */
+    ariaDescribedBy = input('', ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    // Outputs
+    /**
+     * Emitted when the selected date or date range changes.
+     * Provides the complete NgxDatexValue with start and end dates.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (dateChange)="onDateChange($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onDateChange(value: NgxDatexValue | null) {
+     *   if (value) {
+     *     console.log('Start:', value.startDate);
+     *     console.log('End:', value.endDate);
+     *   }
+     * }
+     * ```
+     */
+    dateChange = output();
+    /**
+     * Emitted when a date range is selected (not for single date picker).
+     * Provides start and end dates separately for convenience.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (rangeChange)="onRangeChange($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onRangeChange(range: { startDate: Date; endDate: Date | null }) {
+     *   console.log('Range selected:', range.startDate, 'to', range.endDate);
+     * }
+     * ```
+     */
+    rangeChange = output();
+    /**
+     * Emitted when the calendar overlay is opened.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (openEvent)="onCalendarOpen()"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onCalendarOpen() {
+     *   console.log('Calendar opened');
+     *   // Perform actions when calendar opens
+     * }
+     * ```
+     */
+    openEvent = output();
+    /**
+     * Emitted when the calendar overlay is closed.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (closeEvent)="onCalendarClose()"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onCalendarClose() {
+     *   console.log('Calendar closed');
+     *   // Perform cleanup or validation
+     * }
+     * ```
+     */
+    closeEvent = output();
+    /**
+     * Emitted when the displayed month changes in the calendar.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (monthChange)="onMonthChange($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onMonthChange(date: Date) {
+     *   console.log('Month changed to:', date.getMonth() + 1, date.getFullYear());
+     * }
+     * ```
+     */
+    monthChange = output();
+    /**
+     * Emitted when the displayed year changes in the calendar.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (yearChange)="onYearChange($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onYearChange(year: number) {
+     *   console.log('Year changed to:', year);
+     * }
+     * ```
+     */
+    yearChange = output();
+    /**
+     * Emitted when a date is hovered in the calendar.
+     * Useful for showing preview information or highlighting date ranges.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (dateHover)="onDateHover($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onDateHover(date: Date) {
+     *   console.log('Hovering over:', date);
+     *   // Show preview or update UI
+     * }
+     * ```
+     */
+    dateHover = output();
+    /**
+     * Emitted when a validation error occurs.
+     * Provides error message and optional error code for handling.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (validationError)="onValidationError($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onValidationError(error: { error: string; errorCode?: string }) {
+     *   console.error('Validation error:', error.error);
+     *   if (error.errorCode) {
+     *     // Handle specific error types
+     *     switch (error.errorCode) {
+     *       case 'MIN_DATE':
+     *         // Handle minimum date error
+     *         break;
+     *       case 'MAX_DATE':
+     *         // Handle maximum date error
+     *         break;
+     *     }
+     *   }
+     * }
+     * ```
+     */
+    validationError = output();
+    /**
+     * Emitted when the checkbox state changes (if showCheckbox is enabled).
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCheckbox]="true" (checkboxChange)="onCheckboxChange($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onCheckboxChange(checked: boolean) {
+     *   console.log('Checkbox is now:', checked ? 'checked' : 'unchecked');
+     * }
+     * ```
+     */
+    checkboxChange = output();
+    // Internal state signals
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    _currentValue = signal(null, ...(ngDevMode ? [{ debugName: "_currentValue" }] : []));
+    _leftCalendarMonth = signal(new Date(), ...(ngDevMode ? [{ debugName: "_leftCalendarMonth" }] : []));
+    _rightCalendarMonth = signal(new Date(), ...(ngDevMode ? [{ debugName: "_rightCalendarMonth" }] : []));
+    _hoverDate = signal(null, ...(ngDevMode ? [{ debugName: "_hoverDate" }] : []));
+    _errorMessage = signal('', ...(ngDevMode ? [{ debugName: "_errorMessage" }] : []));
+    _startTime = signal({ hour: 0, minute: 0, ampm: 'AM' }, ...(ngDevMode ? [{ debugName: "_startTime" }] : []));
+    _endTime = signal({ hour: 0, minute: 0, ampm: 'AM' }, ...(ngDevMode ? [{ debugName: "_endTime" }] : []));
+    _overlayPosition = signal(null, ...(ngDevMode ? [{ debugName: "_overlayPosition" }] : []));
+    _inputFocused = signal(false, ...(ngDevMode ? [{ debugName: "_inputFocused" }] : []));
+    _displayValue = signal('', ...(ngDevMode ? [{ debugName: "_displayValue" }] : []));
+    _checkboxValue = signal(false, ...(ngDevMode ? [{ debugName: "_checkboxValue" }] : []));
+    _leftCalendarMatrix = signal([], ...(ngDevMode ? [{ debugName: "_leftCalendarMatrix" }] : []));
+    _rightCalendarMatrix = signal([], ...(ngDevMode ? [{ debugName: "_rightCalendarMatrix" }] : []));
+    // Internal date properties following vanilla daterangepicker pattern
+    _internalStartDate = new Date();
+    _internalEndDate = null;
+    oldStartDate = null;
+    oldEndDate = null;
+    previousRightTime = null;
+    // Public getters for current dates
+    get currentStartDate() {
+        return this._internalStartDate;
+    }
+    set currentStartDate(value) {
+        this._internalStartDate = value;
+    }
+    get currentEndDate() {
+        return this._internalEndDate;
+    }
+    set currentEndDate(value) {
+        this._internalEndDate = value;
+    }
+    // Computed signals for template
+    isOpen = this._isOpen.asReadonly();
+    currentValue = this._currentValue.asReadonly();
+    displayValue = this._displayValue.asReadonly();
+    hasStartDate = computed(() => !!this.currentStartDate, ...(ngDevMode ? [{ debugName: "hasStartDate" }] : []));
+    hasEndDate = computed(() => !!this.currentEndDate, ...(ngDevMode ? [{ debugName: "hasEndDate" }] : []));
+    leftCalendarMonth = this._leftCalendarMonth.asReadonly();
+    rightCalendarMonth = this._rightCalendarMonth.asReadonly();
+    leftCalendarMatrix = this._leftCalendarMatrix.asReadonly();
+    rightCalendarMatrix = this._rightCalendarMatrix.asReadonly();
+    errorMessage = this._errorMessage.asReadonly();
+    hasError = computed(() => this._errorMessage().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    checkboxValue = this._checkboxValue.asReadonly();
+    // Calendar computed values
+    leftCalendarMonthValue = computed(() => this._leftCalendarMonth().getMonth(), ...(ngDevMode ? [{ debugName: "leftCalendarMonthValue" }] : []));
+    leftCalendarYearValue = computed(() => this._leftCalendarMonth().getFullYear(), ...(ngDevMode ? [{ debugName: "leftCalendarYearValue" }] : []));
+    rightCalendarMonthValue = computed(() => this._rightCalendarMonth().getMonth(), ...(ngDevMode ? [{ debugName: "rightCalendarMonthValue" }] : []));
+    rightCalendarYearValue = computed(() => this._rightCalendarMonth().getFullYear(), ...(ngDevMode ? [{ debugName: "rightCalendarYearValue" }] : []));
+    // Locale and theme computed values
+    monthNames = computed(() => this.locale().monthNames || SPANISH_LOCALE.monthNames || [], ...(ngDevMode ? [{ debugName: "monthNames" }] : []));
+    daysOfWeek = computed(() => {
+        const days = this.locale().daysOfWeek || SPANISH_LOCALE.daysOfWeek || [];
+        return days.slice(0, 7);
+    }, ...(ngDevMode ? [{ debugName: "daysOfWeek" }] : []));
+    availableYears = computed(() => {
+        const years = [];
+        const minYear = this.minYear();
+        const maxYear = this.maxYear();
+        for (let year = minYear; year <= maxYear; year++) {
+            years.push(year);
+        }
+        return years;
+    }, ...(ngDevMode ? [{ debugName: "availableYears" }] : []));
+    // Range computed values
+    rangeEntries = computed(() => {
+        const ranges = this.ranges();
+        return Object.entries(ranges).map(([label, range]) => ({ label, range }));
+    }, ...(ngDevMode ? [{ debugName: "rangeEntries" }] : []));
+    showRanges = computed(() => {
+        const ranges = this.ranges();
+        return ranges && Object.keys(ranges).length > 0;
+    }, ...(ngDevMode ? [{ debugName: "showRanges" }] : []));
+    // Device and UI computed values
+    isMobileDevice = computed(() => isPlatformBrowser(this.platformId) && isMobileDevice(), ...(ngDevMode ? [{ debugName: "isMobileDevice" }] : []));
+    headerTitle = computed(() => this.singleDatePicker() ? 'Seleccionar fecha' : 'Seleccionar rango de fechas', ...(ngDevMode ? [{ debugName: "headerTitle" }] : []));
+    canApplyValue = computed(() => {
+        const startDate = this.currentStartDate;
+        const endDate = this.currentEndDate;
+        if (!startDate)
+            return false;
+        if (this.singleDatePicker())
+            return !!startDate;
+        return !!(startDate && endDate);
+    }, ...(ngDevMode ? [{ debugName: "canApplyValue" }] : []));
+    // Arrow positioning computed values
+    arrowDirection = computed(() => {
+        const position = this._overlayPosition();
+        if (!position)
+            return 'down';
+        if (position.originY === 'top' && position.overlayY === 'bottom') {
+            return 'up';
+        }
+        else if (position.originY === 'bottom' && position.overlayY === 'top') {
+            return 'down';
+        }
+        else if (position.originX === 'end' && position.overlayX === 'start') {
+            return 'left';
+        }
+        else if (position.originX === 'start' && position.overlayX === 'end') {
+            return 'right';
+        }
+        return 'down';
+    }, ...(ngDevMode ? [{ debugName: "arrowDirection" }] : []));
+    arrowAlignment = computed(() => {
+        const position = this._overlayPosition();
+        if (!position)
+            return 'center';
+        if (this.arrowDirection() === 'up' || this.arrowDirection() === 'down') {
+            if (position.overlayX === 'start')
+                return 'start';
+            if (position.overlayX === 'end')
+                return 'end';
+            return 'center';
+        }
+        else {
+            if (position.overlayY === 'top')
+                return 'start';
+            if (position.overlayY === 'bottom')
+                return 'end';
+            return 'center';
+        }
+    }, ...(ngDevMode ? [{ debugName: "arrowAlignment" }] : []));
+    // Formatted range display
+    formattedSelectedRange = computed(() => {
+        const startDate = this.currentStartDate;
+        const endDate = this.currentEndDate;
+        if (!startDate)
+            return '';
+        const format = this.locale().format || 'DD/MM/YYYY';
+        const timeFormat = this.timePicker() ? (this.timePicker24Hour() ? ' HH:mm' : ' hh:mm A') : '';
+        const fullFormat = format + timeFormat;
+        const start = formatDateValue(startDate, fullFormat);
+        if (this.singleDatePicker()) {
+            return start;
+        }
+        if (!endDate) {
+            return start;
+        }
+        const end = formatDateValue(endDate, fullFormat);
+        return `${start} - ${end}`;
+    }, ...(ngDevMode ? [{ debugName: "formattedSelectedRange" }] : []));
+    // Current label for selected range
+    currentLabel = computed(() => {
+        const startDate = this.currentStartDate;
+        const endDate = this.currentEndDate;
+        if (!startDate)
+            return '';
+        if (!endDate)
+            return '';
+        let customRange = true;
+        const ranges = this.ranges();
+        for (const [label, [rangeStart, rangeEnd]] of Object.entries(ranges)) {
+            let startMatches;
+            let endMatches;
+            if (this.timePicker()) {
+                const format = this.timePickerSeconds() ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
+                const startFormatted = formatDateValue(startDate, format);
+                const endFormatted = formatDateValue(endDate, format);
+                const rangeStartFormatted = formatDateValue(rangeStart, format);
+                const rangeEndFormatted = formatDateValue(rangeEnd, format);
+                startMatches = startFormatted === rangeStartFormatted;
+                endMatches = endFormatted === rangeEndFormatted;
+            }
+            else {
+                startMatches = isSameDate(startDate, rangeStart, 'day');
+                endMatches = isSameDate(endDate, rangeEnd, 'day');
+            }
+            if (startMatches && endMatches) {
+                customRange = false;
+                return label;
+            }
+        }
+        if (customRange) {
+            return this.locale().customRangeLabel || 'Rango Personalizado';
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "currentLabel" }] : []));
+    isCustomRange = computed(() => {
+        const startDate = this.currentStartDate;
+        const endDate = this.currentEndDate;
+        if (!startDate || !endDate)
+            return false;
+        const ranges = this.ranges();
+        for (const [rangeStart, rangeEnd] of Object.values(ranges)) {
+            let startMatches;
+            let endMatches;
+            if (this.timePicker()) {
+                const format = this.timePickerSeconds() ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
+                const startFormatted = formatDateValue(startDate, format);
+                const endFormatted = formatDateValue(endDate, format);
+                const rangeStartFormatted = formatDateValue(rangeStart, format);
+                const rangeEndFormatted = formatDateValue(rangeEnd, format);
+                startMatches = startFormatted === rangeStartFormatted;
+                endMatches = endFormatted === rangeEndFormatted;
+            }
+            else {
+                startMatches = isSameDate(startDate, rangeStart, 'day');
+                endMatches = isSameDate(endDate, rangeEnd, 'day');
+            }
+            if (startMatches && endMatches) {
+                return false;
+            }
+        }
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "isCustomRange" }] : []));
+    // Time picker computed values
+    selectedStartHour = computed(() => this._startTime().hour, ...(ngDevMode ? [{ debugName: "selectedStartHour" }] : []));
+    selectedStartMinute = computed(() => this._startTime().minute, ...(ngDevMode ? [{ debugName: "selectedStartMinute" }] : []));
+    selectedStartAmPm = computed(() => this._startTime().ampm, ...(ngDevMode ? [{ debugName: "selectedStartAmPm" }] : []));
+    selectedEndHour = computed(() => this._endTime().hour, ...(ngDevMode ? [{ debugName: "selectedEndHour" }] : []));
+    selectedEndMinute = computed(() => this._endTime().minute, ...(ngDevMode ? [{ debugName: "selectedEndMinute" }] : []));
+    selectedEndAmPm = computed(() => this._endTime().ampm, ...(ngDevMode ? [{ debugName: "selectedEndAmPm" }] : []));
+    hours24 = computed(() => Array.from({ length: 24 }, (_, i) => i), ...(ngDevMode ? [{ debugName: "hours24" }] : []));
+    hours12 = computed(() => Array.from({ length: 12 }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "hours12" }] : []));
+    minutes = computed(() => {
+        const increment = this.timePickerIncrement();
+        const minutes = [];
+        for (let i = 0; i < 60; i += increment) {
+            minutes.push(i);
+        }
+        return minutes;
+    }, ...(ngDevMode ? [{ debugName: "minutes" }] : []));
+    // Available time options
+    availableStartHours = computed(() => {
+        return this.timePickerService.getAvailableHours(this.currentStartDate, this.minDate(), this.maxDate(), this.timePicker24Hour(), this._startTime(), false);
+    }, ...(ngDevMode ? [{ debugName: "availableStartHours" }] : []));
+    availableEndHours = computed(() => {
+        return this.timePickerService.getAvailableHours(this.currentEndDate, this.minDate(), this.maxDate(), this.timePicker24Hour(), this._endTime(), true, this.currentStartDate);
+    }, ...(ngDevMode ? [{ debugName: "availableEndHours" }] : []));
+    availableStartMinutes = computed(() => {
+        return this.timePickerService.getAvailableMinutes(this.currentStartDate, this.minDate(), this.maxDate(), this._startTime(), this.timePickerIncrement(), this.timePicker24Hour(), false);
+    }, ...(ngDevMode ? [{ debugName: "availableStartMinutes" }] : []));
+    availableEndMinutes = computed(() => {
+        return this.timePickerService.getAvailableMinutes(this.currentEndDate, this.minDate(), this.maxDate(), this._endTime(), this.timePickerIncrement(), this.timePicker24Hour(), true, this.currentStartDate);
+    }, ...(ngDevMode ? [{ debugName: "availableEndMinutes" }] : []));
+    // ControlValueAccessor implementation
+    onChange = () => {
+        // Implementation provided by registerOnChange
+    };
+    onTouched = () => {
+        // Implementation provided by registerOnTouched
+    };
+    constructor() {
+        afterNextRender(() => {
+            this.initializeComponent();
+        });
+    }
+    ngOnInit() {
+        this.datexService.updateConfig(this.config());
+        this.datexService.setLocale(this.locale());
+    }
+    ngOnDestroy() {
+        this._isOpen.set(false);
+        this.overlayService.disposeOverlay();
+    }
+    // ControlValueAccessor methods
+    writeValue(value) {
+        if (value) {
+            this.currentStartDate = new Date(value.startDate);
+            this.currentEndDate = value.endDate ? new Date(value.endDate) : null;
+            this._currentValue.set(value);
+            if (value.startDate) {
+                this.updateMonthsInView();
+            }
+            if (this.timePicker()) {
+                this.updateTimeSignalsFromDate(value.startDate, 'start');
+                if (value.endDate) {
+                    this.updateTimeSignalsFromDate(value.endDate, 'end');
+                }
+            }
+            this.updateElement();
+        }
+        else {
+            this.initializeDefaultDates();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Implementation for disabled state
+        void isDisabled;
+    }
+    // Public methods
+    /**
+     * Toggles the calendar visibility.
+     * Opens the calendar if closed, closes it if open.
+     * Does nothing if the component is disabled or readonly.
+     *
+     * @example
+     * ```typescript
+     * // In component
+     * @ViewChild(NgxDatex) datePicker!: NgxDatex;
+     *
+     * togglePicker() {
+     *   this.datePicker.toggle();
+     * }
+     * ```
+     */
+    toggle() {
+        if (this.disabled() || this.readonly())
+            return;
+        if (this._isOpen()) {
+            this.closeCalendar();
+        }
+        else {
+            this.openCalendar();
+        }
+    }
+    /**
+     * Opens the calendar overlay.
+     * Saves current state for potential cancellation and initializes the calendar view.
+     *
+     * @example
+     * ```typescript
+     * // Programmatically open the calendar
+     * this.datePicker.openCalendar();
+     * ```
+     */
+    openCalendar() {
+        if (this.disabled() || this.readonly() || this._isOpen())
+            return;
+        // Save old values for potential cancellation
+        this.oldStartDate = new Date(this.currentStartDate);
+        this.oldEndDate = this.currentEndDate ? new Date(this.currentEndDate) : null;
+        this.previousRightTime = this.currentEndDate ? new Date(this.currentEndDate) : null;
+        this.createOverlay();
+        this._isOpen.set(true);
+        if (this.timePicker()) {
+            this.updateTimeSignalsFromDate(this.currentStartDate, 'start');
+            if (this.currentEndDate) {
+                this.updateTimeSignalsFromDate(this.currentEndDate, 'end');
+            }
+        }
+        this.updateView();
+        this.openEvent.emit();
+    }
+    /**
+     * Closes the calendar overlay.
+     * Handles incomplete selections and emits change events if values have changed.
+     *
+     * @example
+     * ```typescript
+     * // Programmatically close the calendar
+     * this.datePicker.closeCalendar();
+     * ```
+     */
+    closeCalendar() {
+        this._isOpen.set(false);
+        this._hoverDate.set(null);
+        // Handle incomplete selection
+        if (!this.currentEndDate && this.oldStartDate && this.oldEndDate) {
+            this.currentStartDate = this.oldStartDate;
+            this.currentEndDate = this.oldEndDate;
+            this.updateCurrentValue();
+        }
+        if (this.oldStartDate && this.oldEndDate) {
+            const hasChanges = !isSameDate(this.currentStartDate, this.oldStartDate, 'day') ||
+                (this.currentEndDate && !isSameDate(this.currentEndDate, this.oldEndDate, 'day'));
+            if (hasChanges && this.currentEndDate) {
+                this.emitValueChange();
+            }
+        }
+        this.updateElement();
+        this.overlayService.closeOverlay();
+        this.closeEvent.emit();
+    }
+    /**
+     * Applies the current selection and closes the calendar.
+     * Only works if there's a valid selection to apply.
+     *
+     * @example
+     * ```typescript
+     * // Apply current selection programmatically
+     * if (this.datePicker.canApplyValue()) {
+     *   this.datePicker.apply();
+     * }
+     * ```
+     */
+    apply() {
+        if (!this.canApplyValue())
+            return;
+        this.updateElement();
+        this.closeCalendar();
+    }
+    /**
+     * Cancels the current selection and reverts to the previous values.
+     * Closes the calendar without applying changes.
+     *
+     * @example
+     * ```typescript
+     * // Cancel current selection
+     * this.datePicker.cancel();
+     * ```
+     */
+    cancel() {
+        if (this.oldStartDate && this.oldEndDate) {
+            this.currentStartDate = this.oldStartDate;
+            this.currentEndDate = this.oldEndDate;
+            this.updateCurrentValue();
+        }
+        this.closeCalendar();
+    }
+    /**
+     * Selects a specific date in the calendar.
+     * Handles both single date and range selection logic.
+     *
+     * @param date - The date to select
+     *
+     * @example
+     * ```typescript
+     * // Programmatically select a date
+     * const today = new Date();
+     * this.datePicker.selectDate(today);
+     * ```
+     */
+    selectDate(date) {
+        if (this.isDisabled(date))
+            return;
+        const validation = this.datexService.validateDate(date);
+        if (!validation.isValid) {
+            this._errorMessage.set(validation.error || '');
+            this.validationError.emit({
+                error: validation.error || '',
+                errorCode: validation.errorCode,
+            });
+            return;
+        }
+        this._errorMessage.set('');
+        this._hoverDate.set(null);
+        if (this.singleDatePicker()) {
+            this.setStartDate(date);
+            this.setEndDate(date);
+            if (this.effectiveAutoApply()) {
+                this.emitValueChange();
+            }
+            if (!this.timePicker() && this.effectiveAutoApply()) {
+                this.closeCalendar();
+            }
+        }
+        else {
+            // Range selection logic following vanilla daterangepicker
+            if (this.currentEndDate ||
+                (this.currentStartDate && isBeforeDate(date, this.currentStartDate))) {
+                // Picking start
+                const startDate = new Date(date);
+                if (this.timePicker()) {
+                    const startTime = this._startTime();
+                    let hour = startTime.hour;
+                    if (!this.timePicker24Hour()) {
+                        if (startTime.ampm === 'PM' && hour < 12)
+                            hour += 12;
+                        if (startTime.ampm === 'AM' && hour === 12)
+                            hour = 0;
+                    }
+                    startDate.setHours(hour, startTime.minute, 0, 0);
+                }
+                this.currentEndDate = null;
+                this.setStartDate(startDate);
+            }
+            else {
+                // Picking end
+                const endDate = new Date(date);
+                if (this.timePicker()) {
+                    const endTime = this._endTime();
+                    let hour = endTime.hour;
+                    if (!this.timePicker24Hour()) {
+                        if (endTime.ampm === 'PM' && hour < 12)
+                            hour += 12;
+                        if (endTime.ampm === 'AM' && hour === 12)
+                            hour = 0;
+                    }
+                    endDate.setHours(hour, endTime.minute, 0, 0);
+                }
+                this.setEndDate(endDate);
+                if (this.effectiveAutoApply()) {
+                    this.emitValueChange();
+                    this.closeCalendar();
+                }
+            }
+        }
+        this.updateView();
+    }
+    /**
+     * Selects a predefined date range by label.
+     *
+     * @param label - The label of the range to select (must exist in ranges configuration)
+     *
+     * @example
+     * ```typescript
+     * // Select "Last 7 days" range
+     * this.datePicker.selectRange('Last 7 days');
+     * ```
+     */
+    selectRange(label) {
+        const ranges = this.ranges();
+        const range = ranges[label];
+        if (!range)
+            return;
+        const [rangeStart, rangeEnd] = range;
+        this.currentStartDate = startOfDay(new Date(rangeStart));
+        this.currentEndDate = endOfDay(new Date(rangeEnd));
+        this.updateCurrentValue();
+        this.updateMonthsInView();
+        this.apply();
+    }
+    selectCustomRange() {
+        // Custom range selection logic - mainly visual
+    }
+    // Event handlers
+    onInputClick() {
+        if (this.readonly())
+            return;
+        if (this._inputFocused() && this._isOpen())
+            return;
+        if (!this._isOpen()) {
+            this.openCalendar();
+        }
+    }
+    onInputFocus() {
+        this._inputFocused.set(true);
+        this.onTouched();
+    }
+    onInputBlur() {
+        this._inputFocused.set(false);
+        this.elementChanged();
+    }
+    onInputKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggle();
+        }
+        else if (event.key === 'Escape') {
+            if (!this._inputFocused() || (this._inputFocused() && this._isOpen())) {
+                this.closeCalendar();
+            }
+        }
+        else if (event.key === 'Tab' || event.key === 'Enter') {
+            if (this._isOpen()) {
+                this.closeCalendar();
+            }
+        }
+    }
+    onInputKeyup() {
+        this.elementChanged();
+    }
+    onDateHover(date) {
+        if (!this.currentEndDate && !this.singleDatePicker() && this.currentStartDate) {
+            if (!isBeforeDate(date, this.currentStartDate)) {
+                this._hoverDate.set(date);
+                this.dateHover.emit(date);
+            }
+        }
+    }
+    onCalendarMouseLeave() {
+        this._hoverDate.set(null);
+    }
+    onCalendarKeydown(event) {
+        if (event.key === 'Escape' && !this._inputFocused()) {
+            this.closeCalendar();
+        }
+    }
+    onCheckboxChange(checked) {
+        this._checkboxValue.set(checked);
+        this.checkboxChange.emit(checked);
+    }
+    // Calendar navigation
+    previousMonth(calendar) {
+        if (calendar === 'left') {
+            const current = this._leftCalendarMonth();
+            const newMonth = addMonths(current, -1);
+            this._leftCalendarMonth.set(newMonth);
+            this.updateLeftCalendarMatrix();
+            if (this.linkedCalendars() && !this.singleDatePicker()) {
+                const rightMonth = addMonths(newMonth, 1);
+                this._rightCalendarMonth.set(rightMonth);
+                this.updateRightCalendarMatrix();
+            }
+        }
+        else {
+            const current = this._rightCalendarMonth();
+            const newMonth = addMonths(current, -1);
+            this._rightCalendarMonth.set(newMonth);
+            this.updateRightCalendarMatrix();
+            if (this.linkedCalendars()) {
+                const leftMonth = addMonths(newMonth, -1);
+                this._leftCalendarMonth.set(leftMonth);
+                this.updateLeftCalendarMatrix();
+            }
+        }
+    }
+    nextMonth(calendar) {
+        if (calendar === 'left') {
+            const current = this._leftCalendarMonth();
+            const newMonth = addMonths(current, 1);
+            this._leftCalendarMonth.set(newMonth);
+            this.updateLeftCalendarMatrix();
+            if (this.linkedCalendars() && !this.singleDatePicker()) {
+                const rightMonth = addMonths(newMonth, 1);
+                this._rightCalendarMonth.set(rightMonth);
+                this.updateRightCalendarMatrix();
+            }
+        }
+        else {
+            const current = this._rightCalendarMonth();
+            const newMonth = addMonths(current, 1);
+            this._rightCalendarMonth.set(newMonth);
+            this.updateRightCalendarMatrix();
+            if (this.linkedCalendars()) {
+                const leftMonth = addMonths(newMonth, -1);
+                this._leftCalendarMonth.set(leftMonth);
+                this.updateLeftCalendarMatrix();
+            }
+        }
+    }
+    // Navigation methods
+    canNavigatePrevious(calendar) {
+        const month = calendar === 'left' ? this._leftCalendarMonth() : this._rightCalendarMonth();
+        const minDate = this.minDate();
+        if (minDate) {
+            return month > minDate;
+        }
+        return true;
+    }
+    canNavigateNext(calendar) {
+        const month = calendar === 'left' ? this._leftCalendarMonth() : this._rightCalendarMonth();
+        const maxDate = this.maxDate();
+        if (maxDate) {
+            return month < maxDate;
+        }
+        return true;
+    }
+    onMonthChange(calendar, event) {
+        const target = event.target;
+        const monthIndex = parseInt(target.value, 10);
+        if (calendar === 'left') {
+            const current = this._leftCalendarMonth();
+            let newMonth = new Date(current.getFullYear(), monthIndex, 1);
+            const minDate = this.minDate();
+            const maxDate = this.maxDate();
+            if (minDate &&
+                (newMonth.getFullYear() < minDate.getFullYear() ||
+                    (newMonth.getFullYear() === minDate.getFullYear() && monthIndex < minDate.getMonth()))) {
+                newMonth = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
+            }
+            if (maxDate &&
+                (newMonth.getFullYear() > maxDate.getFullYear() ||
+                    (newMonth.getFullYear() === maxDate.getFullYear() && monthIndex > maxDate.getMonth()))) {
+                newMonth = new Date(maxDate.getFullYear(), maxDate.getMonth(), 1);
+            }
+            this._leftCalendarMonth.set(newMonth);
+            this.updateLeftCalendarMatrix();
+            if (this.linkedCalendars() && !this.singleDatePicker()) {
+                const rightMonth = addMonths(newMonth, 1);
+                this._rightCalendarMonth.set(rightMonth);
+                this.updateRightCalendarMatrix();
+            }
+        }
+        else {
+            const current = this._rightCalendarMonth();
+            let newMonth = new Date(current.getFullYear(), monthIndex, 1);
+            const startDate = this.currentStartDate;
+            if (startDate &&
+                (newMonth.getFullYear() < startDate.getFullYear() ||
+                    (newMonth.getFullYear() === startDate.getFullYear() && monthIndex < startDate.getMonth()))) {
+                newMonth = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
+            }
+            this._rightCalendarMonth.set(newMonth);
+            this.updateRightCalendarMatrix();
+            if (this.linkedCalendars()) {
+                const leftMonth = addMonths(newMonth, -1);
+                this._leftCalendarMonth.set(leftMonth);
+                this.updateLeftCalendarMatrix();
+            }
+        }
+    }
+    onYearChange(calendar, event) {
+        const target = event.target;
+        const year = parseInt(target.value, 10);
+        if (calendar === 'left') {
+            const current = this._leftCalendarMonth();
+            let newMonth = new Date(year, current.getMonth(), 1);
+            const minDate = this.minDate();
+            const maxDate = this.maxDate();
+            if (minDate &&
+                (year < minDate.getFullYear() ||
+                    (year === minDate.getFullYear() && current.getMonth() < minDate.getMonth()))) {
+                newMonth = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
+            }
+            if (maxDate &&
+                (year > maxDate.getFullYear() ||
+                    (year === maxDate.getFullYear() && current.getMonth() > maxDate.getMonth()))) {
+                newMonth = new Date(maxDate.getFullYear(), maxDate.getMonth(), 1);
+            }
+            this._leftCalendarMonth.set(newMonth);
+            this.updateLeftCalendarMatrix();
+            if (this.linkedCalendars() && !this.singleDatePicker()) {
+                const rightMonth = addMonths(newMonth, 1);
+                this._rightCalendarMonth.set(rightMonth);
+                this.updateRightCalendarMatrix();
+            }
+        }
+        else {
+            const current = this._rightCalendarMonth();
+            let newMonth = new Date(year, current.getMonth(), 1);
+            const startDate = this.currentStartDate;
+            if (startDate &&
+                (year < startDate.getFullYear() ||
+                    (year === startDate.getFullYear() && current.getMonth() < startDate.getMonth()))) {
+                newMonth = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
+            }
+            this._rightCalendarMonth.set(newMonth);
+            this.updateRightCalendarMatrix();
+            if (this.linkedCalendars()) {
+                const leftMonth = addMonths(newMonth, -1);
+                this._leftCalendarMonth.set(leftMonth);
+                this.updateLeftCalendarMatrix();
+            }
+        }
+    }
+    // Helper methods for template
+    isRangeActive(label) {
+        if (!this.currentStartDate)
+            return false;
+        const ranges = this.ranges();
+        const range = ranges[label];
+        if (!range)
+            return false;
+        const [rangeStart, rangeEnd] = range;
+        const startMatches = isSameDate(this.currentStartDate, rangeStart, 'day');
+        const endMatches = this.currentEndDate
+            ? isSameDate(this.currentEndDate, rangeEnd, 'day')
+            : isSameDate(this.currentStartDate, rangeEnd, 'day');
+        return startMatches && endMatches;
+    }
+    isDisabled(date) {
+        return this.calendarService.isDateDisabled(date, this.minDate(), this.maxDate(), this.maxSpan(), this.currentStartDate, this.currentEndDate, this.singleDatePicker(), this.isInvalidDate());
+    }
+    isSelected(date) {
+        return this.calendarService.isDateSelected(date, this.currentStartDate, this.currentEndDate, this.singleDatePicker());
+    }
+    isInRange(date) {
+        return this.calendarService.isDateInRange(date, this.currentStartDate, this.currentEndDate, this.singleDatePicker());
+    }
+    isRangeStart(date) {
+        return this.calendarService.isDateRangeStart(date, this.currentStartDate);
+    }
+    isRangeEnd(date) {
+        return this.calendarService.isDateRangeEnd(date, this.currentEndDate);
+    }
+    isToday(date) {
+        const today = new Date();
+        return isSameDate(date, today, 'day');
+    }
+    isOtherMonth(date, calendarMonth) {
+        return (date.getMonth() !== calendarMonth.getMonth() ||
+            date.getFullYear() !== calendarMonth.getFullYear());
+    }
+    // Hover methods
+    isHovered(date) {
+        const hoverDate = this._hoverDate();
+        if (!hoverDate)
+            return false;
+        if (!this.currentStartDate || this.currentEndDate || this.singleDatePicker())
+            return false;
+        const startDate = this.currentStartDate;
+        const rangeStart = hoverDate < startDate ? hoverDate : startDate;
+        const rangeEnd = hoverDate < startDate ? startDate : hoverDate;
+        const dateTime = startOfDay(date).getTime();
+        const rangeStartTime = startOfDay(rangeStart).getTime();
+        const rangeEndTime = startOfDay(rangeEnd).getTime();
+        return dateTime > rangeStartTime && dateTime < rangeEndTime;
+    }
+    isHoverStart(date) {
+        const hoverDate = this._hoverDate();
+        if (!hoverDate)
+            return false;
+        if (!this.currentStartDate || this.currentEndDate || this.singleDatePicker())
+            return false;
+        const startDate = this.currentStartDate;
+        const rangeStart = hoverDate < startDate ? hoverDate : startDate;
+        return isSameDate(date, rangeStart, 'day');
+    }
+    isHoverEnd(date) {
+        const hoverDate = this._hoverDate();
+        if (!hoverDate)
+            return false;
+        if (!this.currentStartDate || this.currentEndDate || this.singleDatePicker())
+            return false;
+        const startDate = this.currentStartDate;
+        const rangeEnd = hoverDate < startDate ? startDate : hoverDate;
+        return isSameDate(date, rangeEnd, 'day');
+    }
+    formatDateForAria(date) {
+        const dayNames = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
+        const monthNames = this.monthNames();
+        return `${dayNames[date.getDay()]}, ${date.getDate()} de ${monthNames[date.getMonth()]} de ${date.getFullYear()}`;
+    }
+    // Time picker event handlers
+    onStartHourChange(event) {
+        const target = event.target;
+        const hour = parseInt(target.value, 10);
+        this.updateTimeFromPicker('start', 'hour', hour);
+    }
+    onStartMinuteChange(event) {
+        const target = event.target;
+        const minute = parseInt(target.value, 10);
+        this.updateTimeFromPicker('start', 'minute', minute);
+    }
+    onStartAmPmChange(event) {
+        const target = event.target;
+        const ampm = target.value;
+        this.updateTimeFromPicker('start', 'ampm', ampm);
+    }
+    onEndHourChange(event) {
+        const target = event.target;
+        const hour = parseInt(target.value, 10);
+        this.updateTimeFromPicker('end', 'hour', hour);
+    }
+    onEndMinuteChange(event) {
+        const target = event.target;
+        const minute = parseInt(target.value, 10);
+        this.updateTimeFromPicker('end', 'minute', minute);
+    }
+    onEndAmPmChange(event) {
+        const target = event.target;
+        const ampm = target.value;
+        this.updateTimeFromPicker('end', 'ampm', ampm);
+    }
+    // Private methods
+    initializeComponent() {
+        const inputStartDate = this.startDate();
+        const inputEndDate = this.endDate();
+        if (!inputStartDate && !inputEndDate) {
+            this.initializeDefaultDates();
+        }
+        else {
+            this.initializeWithInputDates(inputStartDate, inputEndDate);
+        }
+        this.datexService.updateConfig(this.config());
+        this.datexService.setLocale(this.locale());
+        this.updateElement();
+    }
+    initializeDefaultDates() {
+        const today = new Date();
+        const startDate = startOfDay(today);
+        const endDate = this.singleDatePicker() ? startOfDay(today) : endOfDay(today);
+        this.currentStartDate = startDate;
+        this.currentEndDate = endDate;
+        this.initializeCalendars(startDate, endDate);
+        this.updateCurrentValue();
+        if (this.timePicker()) {
+            this.updateTimeSignalsFromDate(today, 'start');
+            this.updateTimeSignalsFromDate(today, 'end');
+        }
+    }
+    initializeWithInputDates(inputStartDate, inputEndDate) {
+        const startDate = inputStartDate
+            ? startOfDay(new Date(inputStartDate))
+            : startOfDay(new Date());
+        const endDate = this.singleDatePicker()
+            ? startDate
+            : inputEndDate
+                ? endOfDay(new Date(inputEndDate))
+                : endOfDay(startDate);
+        this.currentStartDate = startDate;
+        this.currentEndDate = endDate;
+        this.initializeCalendars(startDate, endDate);
+        this.updateCurrentValue();
+        if (this.timePicker()) {
+            this.updateTimeSignalsFromDate(startDate, 'start');
+            if (endDate) {
+                this.updateTimeSignalsFromDate(endDate, 'end');
+            }
+        }
+    }
+    initializeCalendars(startDate, endDate) {
+        this._leftCalendarMonth.set(new Date(startDate.getFullYear(), startDate.getMonth(), 1));
+        this.updateLeftCalendarMatrix();
+        if (!this.singleDatePicker()) {
+            if (this.linkedCalendars()) {
+                const nextMonth = addMonths(new Date(startDate.getFullYear(), startDate.getMonth(), 1), 1);
+                this._rightCalendarMonth.set(nextMonth);
+            }
+            else if (endDate &&
+                (endDate.getMonth() !== startDate.getMonth() ||
+                    endDate.getFullYear() !== startDate.getFullYear())) {
+                this._rightCalendarMonth.set(new Date(endDate.getFullYear(), endDate.getMonth(), 1));
+            }
+            else {
+                const nextMonth = addMonths(new Date(startDate.getFullYear(), startDate.getMonth(), 1), 1);
+                this._rightCalendarMonth.set(nextMonth);
+            }
+            this.updateRightCalendarMatrix();
+        }
+    }
+    updateMonthsInView() {
+        this.calendarService.updateMonthsInView(this.currentStartDate, this.currentEndDate, this._leftCalendarMonth(), this._rightCalendarMonth(), this.singleDatePicker(), this.linkedCalendars(), this.maxDate(), (month) => {
+            this._leftCalendarMonth.set(month);
+            this.updateLeftCalendarMatrix();
+        }, (month) => {
+            this._rightCalendarMonth.set(month);
+            this.updateRightCalendarMatrix();
+        });
+    }
+    updateLeftCalendarMatrix() {
+        const matrix = this.datexService.buildCalendarMatrix(this._leftCalendarMonth());
+        this._leftCalendarMatrix.set(matrix);
+    }
+    updateRightCalendarMatrix() {
+        const matrix = this.datexService.buildCalendarMatrix(this._rightCalendarMonth());
+        this._rightCalendarMatrix.set(matrix);
+    }
+    updateTimeSignalsFromDate(date, type) {
+        const timeValue = this.timePickerService.updateTimeSignalsFromDate(date, this.timePicker24Hour());
+        if (type === 'start') {
+            this._startTime.set(timeValue);
+        }
+        else {
+            this._endTime.set(timeValue);
+        }
+    }
+    setStartDate(startDate) {
+        const newStartDate = this.calendarService.setStartDate(startDate, this.minDate(), this.maxDate(), this.timePicker(), this.timePickerIncrement());
+        this.currentStartDate = newStartDate;
+        this.updateCurrentValue();
+        this.updateMonthsInView();
+        if (!this._isOpen()) {
+            this.updateElement();
+        }
+    }
+    setEndDate(endDate) {
+        const newEndDate = this.calendarService.setEndDate(endDate, this.currentStartDate, this.maxDate(), this.maxSpan(), this.timePicker(), this.timePickerIncrement());
+        this.previousRightTime = new Date(newEndDate);
+        this.currentEndDate = newEndDate;
+        this.updateCurrentValue();
+        this.updateMonthsInView();
+        if (!this._isOpen()) {
+            this.updateElement();
+        }
+    }
+    updateElement() {
+        if (!this.autoUpdateInput())
+            return;
+        const startDate = this._internalStartDate;
+        const endDate = this._internalEndDate;
+        if (!startDate)
+            return;
+        const format = this.locale().format || 'DD/MM/YYYY';
+        const timeFormat = this.timePicker() ? (this.timePicker24Hour() ? ' HH:mm' : ' hh:mm A') : '';
+        const fullFormat = format + timeFormat;
+        const separator = this.locale().separator || ' - ';
+        let newValue = formatDateValue(startDate, fullFormat);
+        if (!this.singleDatePicker() && endDate) {
+            newValue += separator + formatDateValue(endDate, fullFormat);
+        }
+        this._displayValue.set(newValue);
+    }
+    updateCurrentValue() {
+        const value = {
+            startDate: this.currentStartDate,
+            endDate: this.currentEndDate,
+        };
+        this._currentValue.set(value);
+    }
+    emitValueChange() {
+        const value = {
+            startDate: this.currentStartDate,
+            endDate: this.currentEndDate,
+        };
+        this._currentValue.set(value);
+        this.onChange(value);
+        this.dateChange.emit(value);
+        if (this.currentEndDate) {
+            this.rangeChange.emit({
+                startDate: this.currentStartDate,
+                endDate: this.currentEndDate,
+            });
+        }
+    }
+    updateView() {
+        if (this.timePicker()) {
+            this.updateTimePickers();
+        }
+        this.updateLeftCalendarMatrix();
+        this.updateRightCalendarMatrix();
+    }
+    updateTimePickers() {
+        // Time picker update logic handled by service
+    }
+    updateTimeFromPicker(side, component, value) {
+        this.timePickerService.updateTimeFromPicker(this.currentStartDate, this.currentEndDate, side, component, value, this._startTime(), this._endTime(), this.timePicker24Hour(), this.singleDatePicker(), (date) => this.setStartDate(date), (date) => this.setEndDate(date), (side, time) => {
+            if (side === 'start') {
+                this._startTime.set(time);
+            }
+            else {
+                this._endTime.set(time);
+            }
+        });
+        this.updateView();
+    }
+    elementChanged() {
+        const input = this.inputElement?.nativeElement;
+        if (!input || !input.value || !input.value.length)
+            return;
+        const inputValue = input.value;
+        const separator = this.locale().separator || ' - ';
+        const dateString = inputValue.split(separator);
+        let start = null;
+        let end = null;
+        if (dateString.length === 2) {
+            start = this.parseInputDate(dateString[0].trim());
+            end = this.parseInputDate(dateString[1].trim());
+        }
+        if (this.singleDatePicker() || start === null || end === null) {
+            start = this.parseInputDate(inputValue);
+            end = start;
+        }
+        if (!start || !isValidDate(start) || !end || !isValidDate(end)) {
+            this._errorMessage.set('Formato de fecha inválido');
+            return;
+        }
+        this._errorMessage.set('');
+        try {
+            this.setStartDate(start);
+            this.setEndDate(end);
+            this.updateView();
+            if (!this._isOpen()) {
+                this.emitValueChange();
+            }
+        }
+        catch {
+            this._errorMessage.set('Fecha fuera del rango permitido');
+        }
+    }
+    parseInputDate(dateStr) {
+        if (!dateStr)
+            return null;
+        const format = this.locale().format || 'DD/MM/YYYY';
+        try {
+            const date = parseDateValue(dateStr, format);
+            if (isValidDate(date)) {
+                return date;
+            }
+            const nativeDate = new Date(dateStr);
+            if (isValidDate(nativeDate)) {
+                return nativeDate;
+            }
+            return null;
+        }
+        catch {
+            return null;
+        }
+    }
+    createOverlay() {
+        this.overlayService.createOverlay(this.inputElement, this.calendarTemplate, this.viewContainerRef, this.locale(), this.opens(), this.drops(), () => this.closeCalendar(), (event) => {
+            if (event.key === 'Escape' && !this._inputFocused()) {
+                this.closeCalendar();
+            }
+        }, (position) => this._overlayPosition.set(position));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatex, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxDatex, isStandalone: true, selector: "ngx-datex", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, calendarIcon: { classPropertyName: "calendarIcon", publicName: "calendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, calendarIconPosition: { classPropertyName: "calendarIconPosition", publicName: "calendarIconPosition", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, singleDatePicker: { classPropertyName: "singleDatePicker", publicName: "singleDatePicker", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, showDropdowns: { classPropertyName: "showDropdowns", publicName: "showDropdowns", isSignal: true, isRequired: false, transformFunction: null }, timePicker: { classPropertyName: "timePicker", publicName: "timePicker", isSignal: true, isRequired: false, transformFunction: null }, timePicker24Hour: { classPropertyName: "timePicker24Hour", publicName: "timePicker24Hour", isSignal: true, isRequired: false, transformFunction: null }, timePickerIncrement: { classPropertyName: "timePickerIncrement", publicName: "timePickerIncrement", isSignal: true, isRequired: false, transformFunction: null }, timePickerSeconds: { classPropertyName: "timePickerSeconds", publicName: "timePickerSeconds", isSignal: true, isRequired: false, transformFunction: null }, linkedCalendars: { classPropertyName: "linkedCalendars", publicName: "linkedCalendars", isSignal: true, isRequired: false, transformFunction: null }, autoUpdateInput: { classPropertyName: "autoUpdateInput", publicName: "autoUpdateInput", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowCalendars: { classPropertyName: "alwaysShowCalendars", publicName: "alwaysShowCalendars", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, maxSpan: { classPropertyName: "maxSpan", publicName: "maxSpan", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, showISOWeekNumbers: { classPropertyName: "showISOWeekNumbers", publicName: "showISOWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, buttonClasses: { classPropertyName: "buttonClasses", publicName: "buttonClasses", isSignal: true, isRequired: false, transformFunction: null }, applyButtonClasses: { classPropertyName: "applyButtonClasses", publicName: "applyButtonClasses", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonClasses: { classPropertyName: "cancelButtonClasses", publicName: "cancelButtonClasses", isSignal: true, isRequired: false, transformFunction: null }, isInvalidDate: { classPropertyName: "isInvalidDate", publicName: "isInvalidDate", isSignal: true, isRequired: false, transformFunction: null }, isCustomDate: { classPropertyName: "isCustomDate", publicName: "isCustomDate", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, opens: { classPropertyName: "opens", publicName: "opens", isSignal: true, isRequired: false, transformFunction: null }, drops: { classPropertyName: "drops", publicName: "drops", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, dayTemplate: { classPropertyName: "dayTemplate", publicName: "dayTemplate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", rangeChange: "rangeChange", openEvent: "openEvent", closeEvent: "closeEvent", monthChange: "monthChange", yearChange: "yearChange", dateHover: "dateHover", validationError: "validationError", checkboxChange: "checkboxChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NgxDatex),
+                multi: true,
+            },
+            NgxDatexOverlayService,
+            NgxDatexTimePickerService,
+            NgxDatexCalendarService,
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"ngx-datex-container\" [class.ngx-datex-mobile]=\"isMobileDevice()\">\r\n  <!-- Input Field -->\r\n  <mat-form-field\r\n    [appearance]=\"appearance()\"\r\n    [floatLabel]=\"floatLabel()\"\r\n    class=\"ngx-datex-input-field\"\r\n  >\r\n    @if (label()) {\r\n      <mat-label>{{ label() }}</mat-label>\r\n    }\r\n\r\n    <!-- Checkbox como prefix -->\r\n    @if (showCheckbox() && checkboxPosition() === 'prefix') {\r\n      <mat-checkbox\r\n        matPrefix\r\n        [checked]=\"checkboxValue()\"\r\n        (change)=\"onCheckboxChange($event.checked)\"\r\n        class=\"ngx-datex-checkbox ngx-datex-checkbox-prefix\"\r\n      >\r\n      </mat-checkbox>\r\n    }\r\n\r\n    <!-- \u00CDcono como prefix -->\r\n    @if (showCalendarIcon() && calendarIconPosition() === 'prefix') {\r\n      <mat-icon\r\n        matPrefix\r\n        class=\"ngx-datex-calendar-icon\"\r\n        [class.ngx-datex-icon-active]=\"isOpen()\"\r\n        (click)=\"toggle()\"\r\n        (keydown.enter)=\"toggle()\"\r\n        (keydown.space)=\"toggle()\"\r\n        tabindex=\"0\"\r\n        role=\"button\"\r\n        [attr.aria-label]=\"'Open calendar'\"\r\n      >\r\n        {{ calendarIcon() }}\r\n      </mat-icon>\r\n    }\r\n\r\n    <input\r\n      matInput\r\n      #inputElement\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"ariaLabel()\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n      (click)=\"onInputClick()\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (keyup)=\"onInputKeyup()\"\r\n      autocomplete=\"off\"\r\n    />\r\n\r\n    <!-- \u00CDcono como suffix -->\r\n    @if (showCalendarIcon() && calendarIconPosition() === 'suffix') {\r\n      <mat-icon\r\n        matSuffix\r\n        class=\"ngx-datex-calendar-icon\"\r\n        [class.ngx-datex-icon-active]=\"isOpen()\"\r\n        (click)=\"toggle()\"\r\n        (keydown.enter)=\"toggle()\"\r\n        (keydown.space)=\"toggle()\"\r\n        tabindex=\"0\"\r\n        role=\"button\"\r\n        [attr.aria-label]=\"'Open calendar'\"\r\n      >\r\n        {{ calendarIcon() }}\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Checkbox como suffix -->\r\n    @if (showCheckbox() && checkboxPosition() === 'suffix') {\r\n      <mat-checkbox\r\n        matSuffix\r\n        [checked]=\"checkboxValue()\"\r\n        (change)=\"onCheckboxChange($event.checked)\"\r\n        class=\"ngx-datex-checkbox ngx-datex-checkbox-suffix\"\r\n      >\r\n      </mat-checkbox>\r\n    }\r\n\r\n    @if (hasError()) {\r\n      <mat-error>{{ errorMessage() }}</mat-error>\r\n    }\r\n  </mat-form-field>\r\n\r\n  <!-- Calendar Template for CDK Overlay -->\r\n  <ng-template #calendarTemplate>\r\n    <div\r\n      class=\"ngx-datex-overlay\"\r\n      [class.ngx-datex-overlay-mobile]=\"isMobileDevice()\"\r\n      [class.ngx-datex-single]=\"singleDatePicker()\"\r\n      [class.ngx-datex-arrow-up]=\"arrowDirection() === 'up'\"\r\n      [class.ngx-datex-arrow-down]=\"arrowDirection() === 'down'\"\r\n      [class.ngx-datex-arrow-left]=\"arrowDirection() === 'left'\"\r\n      [class.ngx-datex-arrow-right]=\"arrowDirection() === 'right'\"\r\n      [class.ngx-datex-arrow-align-start]=\"arrowAlignment() === 'start'\"\r\n      [class.ngx-datex-arrow-align-center]=\"arrowAlignment() === 'center'\"\r\n      [class.ngx-datex-arrow-align-end]=\"arrowAlignment() === 'end'\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      [attr.aria-label]=\"headerTitle()\"\r\n      tabindex=\"-1\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (keydown)=\"onCalendarKeydown($event)\"\r\n    >\r\n      <!-- Mobile Header (only shown on mobile) -->\r\n      @if (isMobileDevice()) {\r\n        <div class=\"ngx-datex-mobile-header\">\r\n          <div class=\"ngx-datex-mobile-header-content\">\r\n            <div class=\"ngx-datex-mobile-selected-range\">\r\n              @if (hasStartDate()) {\r\n                {{ formattedSelectedRange() }}\r\n              } @else {\r\n                Selecciona un rango de fechas\r\n              }\r\n            </div>\r\n            <div class=\"ngx-datex-mobile-range-label\">\r\n              @if (currentLabel()) {\r\n                {{ currentLabel() }}\r\n              }\r\n            </div>\r\n          </div>\r\n          <div class=\"ngx-datex-mobile-header-buttons\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"ngx-datex-mobile-cancel-button\"\r\n              [ngClass]=\"[buttonClasses(), cancelButtonClasses()]\"\r\n              (click)=\"cancel()\"\r\n            >\r\n              {{ locale().cancelLabel || 'Cancelar' }}\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"ngx-datex-mobile-apply-button\"\r\n              [ngClass]=\"[buttonClasses(), applyButtonClasses()]\"\r\n              [disabled]=\"!canApplyValue()\"\r\n              (click)=\"apply()\"\r\n            >\r\n              {{ locale().applyLabel || 'Aplicar' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"ngx-datex-content\">\r\n        <!-- Predefined Ranges - Desktop: Sidebar, Mobile: Horizontal Chips -->\r\n        @if (showRanges()) {\r\n          <!-- Desktop Ranges Sidebar -->\r\n          @if (!isMobileDevice()) {\r\n            <div class=\"ngx-datex-ranges-sidebar\">\r\n              @for (rangeEntry of rangeEntries(); track rangeEntry.label) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-range-item\"\r\n                  [class.ngx-datex-range-active]=\"isRangeActive(rangeEntry.label)\"\r\n                  (click)=\"selectRange(rangeEntry.label)\"\r\n                >\r\n                  {{ rangeEntry.label }}\r\n                </button>\r\n              }\r\n              <!-- Rango Personalizado -->\r\n              @if (showCustomRangeLabel()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-range-item\"\r\n                  [class.ngx-datex-range-active]=\"isCustomRange()\"\r\n                  (click)=\"selectCustomRange()\"\r\n                >\r\n                  {{ locale().customRangeLabel || 'Rango Personalizado' }}\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          <!-- Mobile Ranges Chips -->\r\n          @if (isMobileDevice()) {\r\n            <div class=\"ngx-datex-ranges-chips\">\r\n              <div class=\"ngx-datex-ranges-chips-container\">\r\n                @for (rangeEntry of rangeEntries(); track rangeEntry.label) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"ngx-datex-range-chip\"\r\n                    [class.ngx-datex-range-chip-active]=\"isRangeActive(rangeEntry.label)\"\r\n                    (click)=\"selectRange(rangeEntry.label)\"\r\n                  >\r\n                    {{ rangeEntry.label }}\r\n                  </button>\r\n                }\r\n                <!-- Rango Personalizado -->\r\n                @if (showCustomRangeLabel()) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"ngx-datex-range-chip\"\r\n                    [class.ngx-datex-range-chip-active]=\"isCustomRange()\"\r\n                    (click)=\"selectCustomRange()\"\r\n                  >\r\n                    {{ locale().customRangeLabel || 'Personalizado' }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        }\r\n\r\n        <!-- Calendar Section -->\r\n        <div class=\"ngx-datex-calendar-section\">\r\n          <!-- Calendar Container -->\r\n          <div class=\"ngx-datex-calendars\" (mouseleave)=\"onCalendarMouseLeave()\">\r\n            <!-- Left Calendar -->\r\n            <div\r\n              class=\"ngx-datex-calendar ngx-datex-calendar-left\"\r\n              [class.ngx-datex-calendar-single]=\"singleDatePicker()\"\r\n            >\r\n              <div class=\"ngx-datex-calendar-header\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-nav-button\"\r\n                  (click)=\"previousMonth('left')\"\r\n                  [disabled]=\"!canNavigatePrevious('left')\"\r\n                  aria-label=\"Mes anterior\"\r\n                >\r\n                  <mat-icon>chevron_left</mat-icon>\r\n                </button>\r\n\r\n                <div class=\"ngx-datex-month-year\">\r\n                  @if (showDropdowns()) {\r\n                    <select\r\n                      class=\"ngx-datex-month-select\"\r\n                      [value]=\"leftCalendarMonthValue()\"\r\n                      (change)=\"onMonthChange('left', $event)\"\r\n                      aria-label=\"Seleccionar mes\"\r\n                    >\r\n                      @for (month of monthNames(); track $index) {\r\n                        <option [value]=\"$index\">{{ month }}</option>\r\n                      }\r\n                    </select>\r\n\r\n                    <select\r\n                      class=\"ngx-datex-year-select\"\r\n                      [value]=\"leftCalendarYearValue()\"\r\n                      (change)=\"onYearChange('left', $event)\"\r\n                      aria-label=\"Seleccionar a\u00F1o\"\r\n                    >\r\n                      @for (year of availableYears(); track year) {\r\n                        <option [value]=\"year\">{{ year }}</option>\r\n                      }\r\n                    </select>\r\n                  } @else {\r\n                    <span class=\"ngx-datex-month-year-display\">\r\n                      {{ monthNames()[leftCalendarMonthValue()] }} {{ leftCalendarYearValue() }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-nav-button\"\r\n                  (click)=\"nextMonth('left')\"\r\n                  [disabled]=\"!canNavigateNext('left')\"\r\n                  aria-label=\"Mes siguiente\"\r\n                >\r\n                  <mat-icon>chevron_right</mat-icon>\r\n                </button>\r\n              </div>\r\n\r\n              <!-- Days of Week Header -->\r\n              <div class=\"ngx-datex-days-header\">\r\n                <div class=\"ngx-datex-days-header-row\">\r\n                  @for (day of daysOfWeek(); track day) {\r\n                    <div class=\"ngx-datex-day-header\">{{ day }}</div>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Calendar Grid -->\r\n              <div class=\"ngx-datex-calendar-grid\">\r\n                @for (week of leftCalendarMatrix(); track $index) {\r\n                  <div class=\"ngx-datex-week\">\r\n                    @for (date of week; track date.getTime()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"ngx-datex-day\"\r\n                        [class.ngx-datex-day-other-month]=\"isOtherMonth(date, leftCalendarMonth())\"\r\n                        [class.ngx-datex-day-today]=\"isToday(date)\"\r\n                        [class.ngx-datex-day-selected]=\"isSelected(date)\"\r\n                        [class.ngx-datex-day-active]=\"isSelected(date)\"\r\n                        [class.ngx-datex-day-in-range]=\"isInRange(date)\"\r\n                        [class.ngx-datex-day-range-start]=\"isRangeStart(date)\"\r\n                        [class.ngx-datex-day-range-end]=\"isRangeEnd(date)\"\r\n                        [class.ngx-datex-day-hover-range]=\"\r\n                          isHovered(date) && !isHoverStart(date) && !isHoverEnd(date)\r\n                        \"\r\n                        [class.ngx-datex-day-hover-start]=\"isHoverStart(date)\"\r\n                        [class.ngx-datex-day-hover-end]=\"isHoverEnd(date)\"\r\n                        [class.ngx-datex-day-disabled]=\"isDisabled(date)\"\r\n                        [disabled]=\"isDisabled(date)\"\r\n                        (click)=\"selectDate(date)\"\r\n                        (mouseenter)=\"onDateHover(date)\"\r\n                        [attr.aria-label]=\"formatDateForAria(date)\"\r\n                      >\r\n                        {{ date.getDate() }}\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <!-- Time Picker for Left Calendar -->\r\n              @if (timePicker()) {\r\n                <div class=\"ngx-datex-time-picker\">\r\n                  <div class=\"ngx-datex-time-controls\">\r\n                    <select\r\n                      class=\"ngx-datex-time-select ngx-datex-hour-select\"\r\n                      [value]=\"selectedStartHour()\"\r\n                      (change)=\"onStartHourChange($event)\"\r\n                      aria-label=\"Seleccionar hora\"\r\n                    >\r\n                      @if (timePicker24Hour()) {\r\n                        @for (hourOption of availableStartHours(); track hourOption.value) {\r\n                          <option\r\n                            [value]=\"hourOption.value\"\r\n                            [selected]=\"selectedStartHour() === hourOption.value\"\r\n                            [disabled]=\"hourOption.disabled\"\r\n                          >\r\n                            {{ hourOption.value.toString().padStart(2, '0') }}\r\n                          </option>\r\n                        }\r\n                      } @else {\r\n                        @for (hourOption of availableStartHours(); track hourOption.value) {\r\n                          <option\r\n                            [value]=\"hourOption.value\"\r\n                            [selected]=\"selectedStartHour() === hourOption.value\"\r\n                            [disabled]=\"hourOption.disabled\"\r\n                          >\r\n                            {{ hourOption.value }}\r\n                          </option>\r\n                        }\r\n                      }\r\n                    </select>\r\n\r\n                    <span class=\"ngx-datex-time-separator\">:</span>\r\n\r\n                    <select\r\n                      class=\"ngx-datex-time-select ngx-datex-minute-select\"\r\n                      [value]=\"selectedStartMinute()\"\r\n                      (change)=\"onStartMinuteChange($event)\"\r\n                      aria-label=\"Seleccionar minuto\"\r\n                    >\r\n                      @for (minuteOption of availableStartMinutes(); track minuteOption.value) {\r\n                        <option\r\n                          [value]=\"minuteOption.value\"\r\n                          [selected]=\"selectedStartMinute() === minuteOption.value\"\r\n                          [disabled]=\"minuteOption.disabled\"\r\n                        >\r\n                          {{ minuteOption.value.toString().padStart(2, '0') }}\r\n                        </option>\r\n                      }\r\n                    </select>\r\n\r\n                    @if (!timePicker24Hour()) {\r\n                      <select\r\n                        class=\"ngx-datex-time-select ngx-datex-ampm-select\"\r\n                        [value]=\"selectedStartAmPm()\"\r\n                        (change)=\"onStartAmPmChange($event)\"\r\n                        aria-label=\"Seleccionar AM/PM\"\r\n                      >\r\n                        <option value=\"AM\">AM</option>\r\n                        <option value=\"PM\">PM</option>\r\n                      </select>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Right Calendar (for range picker) -->\r\n            @if (!singleDatePicker()) {\r\n              <div class=\"ngx-datex-calendar ngx-datex-calendar-right\">\r\n                <div class=\"ngx-datex-calendar-header\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"ngx-datex-nav-button\"\r\n                    (click)=\"previousMonth('right')\"\r\n                    [disabled]=\"!canNavigatePrevious('right')\"\r\n                    aria-label=\"Mes anterior\"\r\n                  >\r\n                    <mat-icon>chevron_left</mat-icon>\r\n                  </button>\r\n\r\n                  <div class=\"ngx-datex-month-year\">\r\n                    @if (showDropdowns()) {\r\n                      <select\r\n                        class=\"ngx-datex-month-select\"\r\n                        [value]=\"rightCalendarMonthValue()\"\r\n                        (change)=\"onMonthChange('right', $event)\"\r\n                        aria-label=\"Seleccionar mes\"\r\n                      >\r\n                        @for (month of monthNames(); track $index) {\r\n                          <option [value]=\"$index\">{{ month }}</option>\r\n                        }\r\n                      </select>\r\n\r\n                      <select\r\n                        class=\"ngx-datex-year-select\"\r\n                        [value]=\"rightCalendarYearValue()\"\r\n                        (change)=\"onYearChange('right', $event)\"\r\n                        aria-label=\"Seleccionar a\u00F1o\"\r\n                      >\r\n                        @for (year of availableYears(); track year) {\r\n                          <option [value]=\"year\">{{ year }}</option>\r\n                        }\r\n                      </select>\r\n                    } @else {\r\n                      <span class=\"ngx-datex-month-year-display\">\r\n                        {{ monthNames()[rightCalendarMonthValue()] }} {{ rightCalendarYearValue() }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"ngx-datex-nav-button\"\r\n                    (click)=\"nextMonth('right')\"\r\n                    [disabled]=\"!canNavigateNext('right')\"\r\n                    aria-label=\"Mes siguiente\"\r\n                  >\r\n                    <mat-icon>chevron_right</mat-icon>\r\n                  </button>\r\n                </div>\r\n\r\n                <!-- Days of Week Header -->\r\n                <div class=\"ngx-datex-days-header\">\r\n                  <div class=\"ngx-datex-days-header-row\">\r\n                    @for (day of daysOfWeek(); track day) {\r\n                      <div class=\"ngx-datex-day-header\">{{ day }}</div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Calendar Grid -->\r\n                <div class=\"ngx-datex-calendar-grid\">\r\n                  @for (week of rightCalendarMatrix(); track $index) {\r\n                    <div class=\"ngx-datex-week\">\r\n                      @for (date of week; track date.getTime()) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"ngx-datex-day\"\r\n                          [class.ngx-datex-day-other-month]=\"\r\n                            isOtherMonth(date, rightCalendarMonth())\r\n                          \"\r\n                          [class.ngx-datex-day-today]=\"isToday(date)\"\r\n                          [class.ngx-datex-day-selected]=\"isSelected(date)\"\r\n                          [class.ngx-datex-day-active]=\"isSelected(date)\"\r\n                          [class.ngx-datex-day-in-range]=\"isInRange(date)\"\r\n                          [class.ngx-datex-day-range-start]=\"isRangeStart(date)\"\r\n                          [class.ngx-datex-day-range-end]=\"isRangeEnd(date)\"\r\n                          [class.ngx-datex-day-hover-range]=\"\r\n                            isHovered(date) && !isHoverStart(date) && !isHoverEnd(date)\r\n                          \"\r\n                          [class.ngx-datex-day-hover-start]=\"isHoverStart(date)\"\r\n                          [class.ngx-datex-day-hover-end]=\"isHoverEnd(date)\"\r\n                          [class.ngx-datex-day-disabled]=\"isDisabled(date)\"\r\n                          [disabled]=\"isDisabled(date)\"\r\n                          (click)=\"selectDate(date)\"\r\n                          (mouseenter)=\"onDateHover(date)\"\r\n                          [attr.aria-label]=\"formatDateForAria(date)\"\r\n                        >\r\n                          {{ date.getDate() }}\r\n                        </button>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n\r\n                <!-- Time Picker for Right Calendar -->\r\n                @if (timePicker() && !singleDatePicker()) {\r\n                  <div class=\"ngx-datex-time-picker\">\r\n                    <div class=\"ngx-datex-time-controls\">\r\n                      <select\r\n                        class=\"ngx-datex-time-select ngx-datex-hour-select\"\r\n                        [value]=\"selectedEndHour()\"\r\n                        [disabled]=\"!hasEndDate()\"\r\n                        (change)=\"onEndHourChange($event)\"\r\n                        aria-label=\"Seleccionar hora\"\r\n                      >\r\n                        @if (timePicker24Hour()) {\r\n                          @for (hourOption of availableEndHours(); track hourOption.value) {\r\n                            <option\r\n                              [value]=\"hourOption.value\"\r\n                              [selected]=\"selectedEndHour() === hourOption.value\"\r\n                              [disabled]=\"hourOption.disabled\"\r\n                            >\r\n                              {{ hourOption.value.toString().padStart(2, '0') }}\r\n                            </option>\r\n                          }\r\n                        } @else {\r\n                          @for (hourOption of availableEndHours(); track hourOption.value) {\r\n                            <option\r\n                              [value]=\"hourOption.value\"\r\n                              [selected]=\"selectedEndHour() === hourOption.value\"\r\n                              [disabled]=\"hourOption.disabled\"\r\n                            >\r\n                              {{ hourOption.value }}\r\n                            </option>\r\n                          }\r\n                        }\r\n                      </select>\r\n\r\n                      <span class=\"ngx-datex-time-separator\">:</span>\r\n\r\n                      <select\r\n                        class=\"ngx-datex-time-select ngx-datex-minute-select\"\r\n                        [value]=\"selectedEndMinute()\"\r\n                        [disabled]=\"!hasEndDate()\"\r\n                        (change)=\"onEndMinuteChange($event)\"\r\n                        aria-label=\"Seleccionar minuto\"\r\n                      >\r\n                        @for (minuteOption of availableEndMinutes(); track minuteOption.value) {\r\n                          <option\r\n                            [value]=\"minuteOption.value\"\r\n                            [selected]=\"selectedEndMinute() === minuteOption.value\"\r\n                            [disabled]=\"minuteOption.disabled\"\r\n                          >\r\n                            {{ minuteOption.value.toString().padStart(2, '0') }}\r\n                          </option>\r\n                        }\r\n                      </select>\r\n\r\n                      @if (!timePicker24Hour()) {\r\n                        <select\r\n                          class=\"ngx-datex-time-select ngx-datex-ampm-select\"\r\n                          [value]=\"selectedEndAmPm()\"\r\n                          [disabled]=\"!hasEndDate()\"\r\n                          (change)=\"onEndAmPmChange($event)\"\r\n                          aria-label=\"Seleccionar AM/PM\"\r\n                        >\r\n                          <option value=\"AM\">AM</option>\r\n                          <option value=\"PM\">PM</option>\r\n                        </select>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Footer with selected range and buttons (desktop only) -->\r\n          @if (!isMobileDevice()) {\r\n            <div class=\"ngx-datex-footer\">\r\n              <div class=\"ngx-datex-selected-range\">\r\n                @if (hasStartDate()) {\r\n                  {{ formattedSelectedRange() }}\r\n                } @else {\r\n                  Selecciona un rango de fechas\r\n                }\r\n              </div>\r\n              <div class=\"ngx-datex-footer-buttons\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-cancel-button\"\r\n                  [ngClass]=\"[buttonClasses(), cancelButtonClasses()]\"\r\n                  (click)=\"cancel()\"\r\n                >\r\n                  {{ locale().cancelLabel || 'Cancelar' }}\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-apply-button\"\r\n                  [ngClass]=\"[buttonClasses(), applyButtonClasses()]\"\r\n                  [disabled]=\"!canApplyValue()\"\r\n                  (click)=\"apply()\"\r\n                >\r\n                  {{ locale().applyLabel || 'Aplicar' }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n", styles: [".ngx-datex-container{position:relative;display:inline-block;width:100%}.ngx-datex-input-field{width:100%}.ngx-datex-calendar-icon{cursor:pointer;transition:color .2s ease;font-size:20px}.ngx-datex-calendar-icon:hover,.ngx-datex-calendar-icon.ngx-datex-icon-active{color:var(--ngx-datex-primary-color, #1976d2)}.ngx-datex-overlay-panel{z-index:1000}.ngx-datex-mobile-overlay{z-index:1001}.ngx-datex-overlay{background:#fff;border-radius:8px;box-shadow:0 5px 15px #00000026,0 2px 4px #0000001f;border:1px solid #e0e0e0;width:650px;font-family:Roboto,sans-serif;font-size:12px;line-height:1em;position:relative;color:#212121}.ngx-datex-overlay:before,.ngx-datex-overlay:after{position:absolute;content:\"\";display:none;z-index:10}.ngx-datex-overlay.ngx-datex-arrow-down:before{display:block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #e0e0e0;top:-7px}.ngx-datex-overlay.ngx-datex-arrow-down:after{display:block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #ffffff;top:-6px}.ngx-datex-overlay.ngx-datex-arrow-up:before{display:block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #e0e0e0;bottom:-7px}.ngx-datex-overlay.ngx-datex-arrow-up:after{display:block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #ffffff;bottom:-6px}.ngx-datex-overlay.ngx-datex-arrow-right:before{display:block;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #e0e0e0;left:-7px}.ngx-datex-overlay.ngx-datex-arrow-right:after{display:block;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #ffffff;left:-6px}.ngx-datex-overlay.ngx-datex-arrow-left:before{display:block;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid #e0e0e0;right:-7px}.ngx-datex-overlay.ngx-datex-arrow-left:after{display:block;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #ffffff;right:-6px}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-start:before,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-start:before{left:20px}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-start:after,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-start:after{left:21px}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-center:before,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-center:before{left:50%;transform:translate(-50%)}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-center:after,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-center:after{left:50%;transform:translate(-50%)}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-end:before,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-end:before{right:20px}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-end:after,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-end:after{right:21px}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-start:before,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-start:before{top:20px}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-start:after,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-start:after{top:21px}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-center:before,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-center:before{top:50%;transform:translateY(-50%)}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-center:after,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-center:after{top:50%;transform:translateY(-50%)}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-end:before,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-end:before{bottom:20px}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-end:after,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-end:after{bottom:21px}.ngx-datex-overlay.ngx-datex-single{width:300px}.ngx-datex-overlay.ngx-datex-single .ngx-datex-ranges-sidebar{display:none}.ngx-datex-overlay.ngx-datex-overlay-mobile{width:100vw;max-width:100vw;min-width:100vw;border-radius:16px 16px 0 0;max-height:90vh;overflow-y:auto;box-shadow:0 -8px 32px #0003;border:none;margin:0;padding:0}.ngx-datex-overlay.ngx-datex-overlay-mobile:before,.ngx-datex-overlay.ngx-datex-overlay-mobile:after{display:none}.ngx-datex-overlay.ngx-datex-overlay-mobile .ngx-datex-content{min-height:auto;padding:0;margin:0;width:100%;display:flex;flex-direction:column}.ngx-datex-overlay.ngx-datex-overlay-mobile .ngx-datex-calendar-section{padding:0;margin:0;width:100%;flex:1}.ngx-datex-overlay.ngx-datex-overlay-mobile .ngx-datex-calendars{padding:16px;gap:20px;margin:0;width:100%;box-sizing:border-box}.ngx-datex-overlay.ngx-datex-overlay-mobile .ngx-datex-calendar{padding:0;margin:0;border-radius:0;background:transparent;border:none;box-shadow:none;width:100%}.ngx-datex-content{display:flex;min-height:350px}.ngx-datex-ranges-sidebar{width:140px;background:#fff;border-right:1px solid #e0e0e0;padding:0;border-radius:8px 0 0 8px;display:flex;flex-direction:column}.ngx-datex-range-item{background:none;border:none;padding:8px 12px;text-align:left;cursor:pointer;font-size:12px;color:#212121;transition:all .2s ease;border-radius:0;margin:2px 0}.ngx-datex-range-item:hover{background:#f5f5f5;color:#1976d2}.ngx-datex-range-item.ngx-datex-range-active{background:#1976d2;color:#fff;font-weight:500}.ngx-datex-ranges-chips{width:100%;background:#fff;border-bottom:1px solid #e0e0e0;padding:16px 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.ngx-datex-ranges-chips::-webkit-scrollbar{display:none}.ngx-datex-ranges-chips-container{display:flex;gap:12px;padding:0 16px;min-width:max-content}.ngx-datex-range-chip{background:#f8f9fa;border:1px solid #dee2e6;border-radius:20px;padding:10px 16px;font-size:14px;font-weight:500;color:#495057;cursor:pointer;transition:all .3s ease;white-space:nowrap;flex-shrink:0;min-height:40px;display:flex;align-items:center;justify-content:center;min-width:80px;text-align:center}.ngx-datex-range-chip:hover{background:#e3f2fd;border-color:#2196f3;color:#1976d2;transform:translateY(-2px);box-shadow:0 4px 12px #2196f340}.ngx-datex-range-chip.ngx-datex-range-chip-active{background:linear-gradient(135deg,#2196f3,#1976d2);border-color:#1976d2;color:#fff;font-weight:600;box-shadow:0 4px 16px #1976d266;transform:translateY(-1px)}.ngx-datex-range-chip:active{transform:translateY(0)}.ngx-datex-calendar-section{flex:1;display:flex;flex-direction:column}@media(max-width:768px){.ngx-datex-ranges-chips+.ngx-datex-calendar-section{padding-top:0}.ngx-datex-calendar-section{padding:0;background:#fff;width:100%;margin:0}}.ngx-datex-calendars{display:flex;padding:0;gap:0;flex:1}@media(max-width:768px){.ngx-datex-calendars{flex-direction:column;gap:16px;padding:12px;width:100%;margin:0;box-sizing:border-box}}.ngx-datex-calendar{flex:1;padding:8px;min-width:0}.ngx-datex-calendar.ngx-datex-calendar-right{padding:8px}@media(max-width:768px){.ngx-datex-calendar{padding:0;background:transparent;border:none;box-shadow:none;width:100%;flex:none;min-width:unset;box-sizing:border-box;margin:0}.ngx-datex-calendar .ngx-datex-calendar-grid{width:100%;margin:0}.ngx-datex-calendar .ngx-datex-week{width:100%;display:table-row;margin:0}.ngx-datex-calendar .ngx-datex-day{display:table-cell;width:14.28%;margin:0;padding:0}.ngx-datex-calendar .ngx-datex-days-header{width:100%;margin:0 0 8px}.ngx-datex-calendar .ngx-datex-calendar-header{margin:0 0 16px;padding:0}}.ngx-datex-calendar.ngx-datex-calendar-single{padding:8px}.ngx-datex-calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0;height:28px}@media(max-width:768px){.ngx-datex-calendar-header{height:40px;margin-bottom:12px;padding:0 4px}}.ngx-datex-nav-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:3px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;color:#757575;width:32px;height:28px}@media(max-width:768px){.ngx-datex-nav-button{width:40px;height:40px;border-radius:6px;background:#f5f5f5}.ngx-datex-nav-button mat-icon{font-size:18px}}.ngx-datex-nav-button:hover:not(:disabled){background:#f5f5f5;color:#1976d2}.ngx-datex-nav-button:disabled{opacity:.5;cursor:not-allowed}.ngx-datex-nav-button mat-icon{font-size:18px;width:18px;height:18px;color:inherit}.ngx-datex-month-year{display:flex;align-items:center;gap:4px;font-weight:500;font-size:12px}@media(max-width:768px){.ngx-datex-month-year{font-size:16px;font-weight:600;gap:8px}}.ngx-datex-month-select,.ngx-datex-year-select{border:1px solid #e0e0e0;border-radius:3px;padding:1px 2px;font-size:12px;background:#fff;cursor:pointer;color:#212121;height:auto;margin:0;outline:none;appearance:auto;-webkit-appearance:menulist;-moz-appearance:menulist;min-height:20px}@media(max-width:768px){.ngx-datex-month-select,.ngx-datex-year-select{font-size:14px;padding:4px 8px;border-radius:6px;min-height:32px;border:2px solid #e0e0e0}}.ngx-datex-month-select:focus,.ngx-datex-year-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 2px #1976d233}.ngx-datex-month-select option,.ngx-datex-year-select option{background:#fff;color:#212121}.ngx-datex-month-select{margin-right:2%;width:56%;min-width:50px}.ngx-datex-year-select{width:40%;min-width:50px}.ngx-datex-days-header{display:table;width:100%;margin-bottom:0;border-collapse:collapse;border-spacing:0}@media(max-width:768px){.ngx-datex-days-header{width:100%;margin:0 0 8px;padding:0}}.ngx-datex-days-header-row{display:table-row}.ngx-datex-day-header{display:table-cell;text-align:center;font-size:12px;font-weight:500;width:14.28%;height:28px;line-height:28px;background:#fff;color:#212121;box-sizing:border-box;vertical-align:middle;padding:0}@media(max-width:768px){.ngx-datex-day-header{height:36px;line-height:36px;font-size:13px;font-weight:600;background:#f8f9fa;color:#495057;border-bottom:1px solid #e0e0e0}}.ngx-datex-calendar-grid{display:table;width:100%;margin:0;padding:0;border-collapse:collapse;border-spacing:0;table-layout:fixed}@media(max-width:768px){.ngx-datex-calendar-grid{border-radius:0;overflow:visible;width:100%;margin:0;padding:0}}.ngx-datex-week{display:table-row}.ngx-datex-day{display:table-cell;width:14.28%;height:28px;text-align:center;font-size:12px;padding:0;margin:0;box-sizing:border-box;border:1px solid transparent;background:#fff;cursor:pointer}@media(max-width:768px){.ngx-datex-day{height:40px;font-size:15px;font-weight:500;line-height:40px;vertical-align:middle;border:1px solid #f0f0f0}}.ngx-datex-day{transition:all .15s ease;position:relative;border-radius:4px;line-height:28px;white-space:nowrap;color:#212121;vertical-align:middle}.ngx-datex-day:hover:not(:disabled){background:#f5f5f5;color:#212121}.ngx-datex-day.ngx-datex-day-other-month{background-color:#fff!important;border:1px solid transparent!important;border-color:transparent!important;color:#999!important}.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-in-range,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-range-start,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-range-end,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-selected,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-active,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-range,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-start,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-end{background-color:#fff!important;border:1px solid transparent!important;border-color:transparent!important;color:#999!important;border-radius:4px!important;box-shadow:none!important;outline:none!important}.ngx-datex-day.ngx-datex-day-other-month:hover{background-color:#eee!important;border:1px solid transparent!important;border-color:transparent!important;color:inherit!important;box-shadow:none!important;outline:none!important}.ngx-datex-day.ngx-datex-day-today{font-weight:700;background:#1976d21a;color:#1976d2}.ngx-datex-day.ngx-datex-day-selected,.ngx-datex-day.ngx-datex-day-active{background-color:#1976d2;border-color:transparent;color:#fff}.ngx-datex-day.ngx-datex-day-selected:hover,.ngx-datex-day.ngx-datex-day-active:hover{background-color:#1976d2;opacity:.9}.ngx-datex-day.ngx-datex-day-in-range{background-color:#ebf4f8;border-color:transparent;color:#212121;border-radius:0}.ngx-datex-day.ngx-datex-day-range-start{background-color:#1976d2;border-color:transparent;color:#fff;border-radius:4px 0 0 4px}.ngx-datex-day.ngx-datex-day-range-end{background-color:#1976d2;border-color:transparent;color:#fff;border-radius:0 4px 4px 0}.ngx-datex-day.ngx-datex-day-range-start.ngx-datex-day-range-end{border-radius:4px}.ngx-datex-day.ngx-datex-day-hover-range{background-color:#ebf4f8;border-color:transparent;color:#212121;border-radius:0}.ngx-datex-day.ngx-datex-day-hover-start{background-color:#1976d2;border-color:transparent;color:#fff;border-radius:4px 0 0 4px}.ngx-datex-day.ngx-datex-day-hover-end{background-color:#1976d2;border-color:transparent;color:#fff;border-radius:0 4px 4px 0}.ngx-datex-day.ngx-datex-day-hover-start.ngx-datex-day-hover-end{border-radius:4px}.ngx-datex-day.ngx-datex-day-disabled{color:#bdbdbd;cursor:not-allowed;text-decoration:line-through}.ngx-datex-day.ngx-datex-day-disabled:hover{background:#fff;color:#bdbdbd}.ngx-datex-footer{padding:8px;border-top:1px solid #e0e0e0;background:#fff;border-radius:0 0 8px 8px;display:flex;justify-content:space-between;align-items:center;line-height:10px;vertical-align:middle;margin:0}.ngx-datex-selected-range{font-size:12px;color:#212121;font-weight:400;display:inline-block;padding-right:8px}.ngx-datex-footer-buttons{display:flex;gap:4px}.ngx-datex-cancel-button,.ngx-datex-apply-button{min-width:70px;font-weight:700;font-size:12px;padding:7px 8px;border-radius:3px;border:1px solid transparent;cursor:pointer;transition:all .15s ease-in-out;margin-left:4px}.ngx-datex-cancel-button{background-color:#dc3545;border-color:#dc3545;color:#fff}.ngx-datex-cancel-button:hover:not(:disabled){background-color:#dc3545;border-color:#dc3545;opacity:.8}.ngx-datex-apply-button{background-color:#22c55e;border-color:#22c55e;color:#fff}.ngx-datex-apply-button:disabled{background:#9ca3af;border-color:#9ca3af;opacity:.6;cursor:not-allowed}.ngx-datex-apply-button:hover:not(:disabled){background-color:#22c55e;border-color:#22c55e;opacity:.8}.ngx-datex-mobile .ngx-datex-overlay{position:fixed;inset:auto 0 0;width:100%;max-width:100vw;min-width:100vw;border-radius:12px 12px 0 0;margin:0;max-height:85vh;overflow-y:auto;z-index:999999;box-shadow:0 -4px 20px #00000026}.ngx-datex-mobile .ngx-datex-overlay:before,.ngx-datex-mobile .ngx-datex-overlay:after{display:none}.ngx-datex-mobile .ngx-datex-content{flex-direction:column}.ngx-datex-mobile .ngx-datex-ranges-sidebar{width:100%;border-right:none;border-bottom:1px solid #e0e0e0;border-radius:12px 12px 0 0;flex-direction:row;overflow-x:auto;padding:8px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.ngx-datex-mobile .ngx-datex-ranges-sidebar::-webkit-scrollbar{display:none}.ngx-datex-mobile .ngx-datex-range-item{white-space:nowrap;padding:8px 12px;margin:0 4px;border-radius:20px;background-color:#f5f5f5;border:1px solid #e0e0e0;flex:0 0 auto;min-width:60px;text-align:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.ngx-datex-mobile .ngx-datex-range-item:hover{background-color:#1976d21a;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.ngx-datex-mobile .ngx-datex-range-item.ngx-datex-range-active{background-color:#1976d2;color:#fff;border-color:#1976d2;font-weight:600}.ngx-datex-mobile .ngx-datex-calendars{flex-direction:column;padding:6px}.ngx-datex-mobile .ngx-datex-calendar{width:100%;padding:6px}.ngx-datex-mobile .ngx-datex-days-header{display:table;width:100%;border-collapse:collapse;border-spacing:0}.ngx-datex-mobile .ngx-datex-days-header-row{display:table-row}.ngx-datex-mobile .ngx-datex-calendar-grid{display:table;width:100%;border-collapse:collapse;border-spacing:0}.ngx-datex-mobile .ngx-datex-week{display:table-row}.ngx-datex-mobile .ngx-datex-week-number-header,.ngx-datex-mobile .ngx-datex-week-number{display:none}.ngx-datex-mobile .ngx-datex-day-header{display:table-cell;height:28px;line-height:28px;font-size:11px;font-weight:600;text-align:center;padding:0;margin:0;box-sizing:border-box;vertical-align:middle}.ngx-datex-mobile .ngx-datex-day{display:table-cell;height:40px;line-height:40px;font-size:15px;font-weight:500;border-radius:6px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;text-align:center;vertical-align:middle}.ngx-datex-mobile .ngx-datex-footer{display:none}.ngx-datex-mobile-header{width:100%;background-color:#fff;color:#333;border-radius:16px 16px 0 0;box-sizing:border-box;position:relative;z-index:3;border-bottom:1px solid #e0e0e0;display:flex;flex-direction:column;gap:0;padding:12px 0 8px}.ngx-datex-mobile-header-content{padding:0 16px 8px;text-align:center;flex:1}.ngx-datex-mobile-header-buttons{display:flex;justify-content:space-between;align-items:center;padding:8px 16px 0;gap:12px;border-top:1px solid #f0f0f0;background-color:#fff}.ngx-datex-mobile-selected-range{display:block;font-size:16px;font-weight:600;line-height:1.3;color:#1a1a1a;margin-bottom:2px}.ngx-datex-mobile-range-label{display:block;font-size:13px;font-weight:500;color:#2196f3;margin-top:2px}.ngx-datex-mobile-cancel-button,.ngx-datex-mobile-apply-button{flex:1;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;border:2px solid transparent;text-transform:none;letter-spacing:0;min-height:40px;display:flex;align-items:center;justify-content:center}.ngx-datex-mobile-cancel-button{background:#dc3545;border:2px solid #dc3545;color:#fff}.ngx-datex-mobile-cancel-button:hover{background:#c82333;border-color:#c82333;transform:translateY(-1px);box-shadow:0 4px 12px #dc35454d}.ngx-datex-mobile-cancel-button:active{transform:translateY(0);box-shadow:0 2px 4px #dc354533}.ngx-datex-mobile-apply-button{background:#28a745;border:2px solid #28a745;color:#fff}.ngx-datex-mobile-apply-button:hover{background:#218838;border-color:#218838;transform:translateY(-1px);box-shadow:0 4px 16px #28a7454d}.ngx-datex-mobile-apply-button:active{transform:translateY(0);box-shadow:0 2px 8px #28a74533}.ngx-datex-mobile-apply-button:disabled{background:#e0e0e0;border-color:#e0e0e0;color:#9e9e9e;cursor:not-allowed;transform:none;box-shadow:none}.ngx-datex-day:focus{outline:2px solid #1976d2;outline-offset:-2px;z-index:1}.ngx-datex-nav-button:focus{outline:2px solid #1976d2;outline-offset:2px}.ngx-datex-range-item:focus{outline:2px solid #1976d2;outline-offset:-2px}.ngx-datex-overlay{animation:fadeInScale .2s ease-out}.ngx-datex-overlay:before,.ngx-datex-overlay:after{animation:fadeInArrow .2s ease-out .1s both}.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-up:before,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-up:after,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-down:before,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-down:after{animation:fadeInArrowCenterHorizontal .2s ease-out .1s both}.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-left:before,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-left:after,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-right:before,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-right:after{animation:fadeInArrowCenterVertical .2s ease-out .1s both}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fadeInArrow{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fadeInArrowCenterHorizontal{0%{opacity:0;transform:translate(-50%) scale(.8)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes fadeInArrowCenterVertical{0%{opacity:0;transform:translateY(-50%) scale(.8)}to{opacity:1;transform:translateY(-50%) scale(1)}}.ngx-datex-overlay.ngx-datex-single .ngx-datex-calendar.ngx-datex-calendar-right{display:none}.ngx-datex-overlay.ngx-datex-single .ngx-datex-calendar.ngx-datex-calendar-left{padding:8px}.ngx-datex-time-picker{border-top:1px solid #e0e0e0;padding:8px;background:#fff;margin-top:8px}.ngx-datex-time-controls{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:nowrap}.ngx-datex-time-separator{font-size:14px;font-weight:700;color:#333;margin:0 2px;line-height:1}.ngx-datex-time-select{border:1px solid #ccc;border-radius:3px;padding:2px 4px;font-size:11px;background:#fff;color:#333;outline:none;cursor:pointer;appearance:auto;-webkit-appearance:menulist;-moz-appearance:menulist;min-height:22px;line-height:1}.ngx-datex-time-select:focus{border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.ngx-datex-time-select:disabled{background:#f5f5f5;color:#999;cursor:not-allowed;opacity:.6}.ngx-datex-time-select option{padding:2px 4px;font-size:11px}.ngx-datex-hour-select,.ngx-datex-minute-select{width:50px;text-align:center}.ngx-datex-ampm-select{width:45px;text-align:center}.ngx-datex-mobile .ngx-datex-time-picker{margin-top:12px;padding:12px}.ngx-datex-mobile .ngx-datex-time-controls{gap:6px}.ngx-datex-mobile .ngx-datex-time-separator{font-size:16px;margin:0 4px}.ngx-datex-mobile .ngx-datex-time-select{font-size:14px;padding:4px 6px;min-height:32px;border-radius:4px}.ngx-datex-mobile .ngx-datex-hour-select,.ngx-datex-mobile .ngx-datex-minute-select{width:60px}.ngx-datex-mobile .ngx-datex-ampm-select{width:55px}@media(min-width:564px)and (max-width:768px){.ngx-datex-overlay.ngx-datex-overlay-mobile{position:fixed;width:90%;max-width:500px;inset:auto auto 20px 50%;transform:translate(-50%);border-radius:8px}}@media(min-width:564px){.ngx-datex-mobile .ngx-datex-overlay{position:absolute;inset:100% auto auto 0;width:650px;max-width:90vw;border-radius:8px;margin-top:7px;max-height:none}.ngx-datex-mobile .ngx-datex-overlay:before,.ngx-datex-mobile .ngx-datex-overlay:after{display:inline-block}.ngx-datex-mobile .ngx-datex-footer{display:flex}.ngx-datex-mobile .ngx-datex-mobile-header{display:none}.ngx-datex-mobile .ngx-datex-ranges-sidebar{width:140px;flex-direction:column;border-right:1px solid #e0e0e0;border-bottom:none;border-radius:8px 0 0 8px;overflow-x:visible;padding:0}.ngx-datex-mobile .ngx-datex-range-item{white-space:normal;padding:8px 12px;margin:2px 0;border-radius:0;background:none;border:none;text-align:left;min-width:auto}.ngx-datex-mobile .ngx-datex-calendars{flex-direction:row;padding:0}.ngx-datex-mobile .ngx-datex-calendar{padding:8px 0 8px 8px}.ngx-datex-mobile .ngx-datex-calendar.ngx-datex-calendar-right{padding:8px 8px 8px 0}.ngx-datex-mobile .ngx-datex-days-header{display:table;width:100%;border-collapse:collapse;border-spacing:0}.ngx-datex-mobile .ngx-datex-days-header-row{display:table-row}.ngx-datex-mobile .ngx-datex-calendar-grid{display:table;width:100%;border-collapse:collapse;border-spacing:0}.ngx-datex-mobile .ngx-datex-week{display:table-row}.ngx-datex-mobile .ngx-datex-week-number-header,.ngx-datex-mobile .ngx-datex-week-number{display:none}.ngx-datex-mobile .ngx-datex-day-header{display:table-cell;width:14.28%;height:28px;line-height:28px;font-size:12px;box-sizing:border-box;text-align:center;vertical-align:middle}.ngx-datex-mobile .ngx-datex-day{display:table-cell;width:14.28%;height:28px;line-height:28px;font-size:12px;border-radius:4px;box-sizing:border-box;text-align:center;vertical-align:middle}}.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-selected,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-active,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-in-range,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-range-start,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-range-end,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-range,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-start,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-end{background-color:#fff!important;border:1px solid transparent!important;border-color:transparent!important;color:#999!important;border-radius:4px!important;box-shadow:none!important;outline:none!important}.ngx-datex-day.ngx-datex-day-other-month:hover,.ngx-datex-day.ngx-datex-day-other-month:focus{background-color:#eee!important;border:1px solid transparent!important;border-color:transparent!important;color:#999!important;box-shadow:none!important;outline:none!important}.ngx-datex-day.ngx-datex-day-other-month:focus{background-color:#eee!important;border:1px solid transparent!important;border-color:transparent!important;color:#999!important;box-shadow:none!important;outline:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxDatex, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-datex', imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatCheckboxModule,
+                        NgClass,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgxDatex),
+                            multi: true,
+                        },
+                        NgxDatexOverlayService,
+                        NgxDatexTimePickerService,
+                        NgxDatexCalendarService,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-datex-container\" [class.ngx-datex-mobile]=\"isMobileDevice()\">\r\n  <!-- Input Field -->\r\n  <mat-form-field\r\n    [appearance]=\"appearance()\"\r\n    [floatLabel]=\"floatLabel()\"\r\n    class=\"ngx-datex-input-field\"\r\n  >\r\n    @if (label()) {\r\n      <mat-label>{{ label() }}</mat-label>\r\n    }\r\n\r\n    <!-- Checkbox como prefix -->\r\n    @if (showCheckbox() && checkboxPosition() === 'prefix') {\r\n      <mat-checkbox\r\n        matPrefix\r\n        [checked]=\"checkboxValue()\"\r\n        (change)=\"onCheckboxChange($event.checked)\"\r\n        class=\"ngx-datex-checkbox ngx-datex-checkbox-prefix\"\r\n      >\r\n      </mat-checkbox>\r\n    }\r\n\r\n    <!-- \u00CDcono como prefix -->\r\n    @if (showCalendarIcon() && calendarIconPosition() === 'prefix') {\r\n      <mat-icon\r\n        matPrefix\r\n        class=\"ngx-datex-calendar-icon\"\r\n        [class.ngx-datex-icon-active]=\"isOpen()\"\r\n        (click)=\"toggle()\"\r\n        (keydown.enter)=\"toggle()\"\r\n        (keydown.space)=\"toggle()\"\r\n        tabindex=\"0\"\r\n        role=\"button\"\r\n        [attr.aria-label]=\"'Open calendar'\"\r\n      >\r\n        {{ calendarIcon() }}\r\n      </mat-icon>\r\n    }\r\n\r\n    <input\r\n      matInput\r\n      #inputElement\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"ariaLabel()\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n      (click)=\"onInputClick()\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (keyup)=\"onInputKeyup()\"\r\n      autocomplete=\"off\"\r\n    />\r\n\r\n    <!-- \u00CDcono como suffix -->\r\n    @if (showCalendarIcon() && calendarIconPosition() === 'suffix') {\r\n      <mat-icon\r\n        matSuffix\r\n        class=\"ngx-datex-calendar-icon\"\r\n        [class.ngx-datex-icon-active]=\"isOpen()\"\r\n        (click)=\"toggle()\"\r\n        (keydown.enter)=\"toggle()\"\r\n        (keydown.space)=\"toggle()\"\r\n        tabindex=\"0\"\r\n        role=\"button\"\r\n        [attr.aria-label]=\"'Open calendar'\"\r\n      >\r\n        {{ calendarIcon() }}\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Checkbox como suffix -->\r\n    @if (showCheckbox() && checkboxPosition() === 'suffix') {\r\n      <mat-checkbox\r\n        matSuffix\r\n        [checked]=\"checkboxValue()\"\r\n        (change)=\"onCheckboxChange($event.checked)\"\r\n        class=\"ngx-datex-checkbox ngx-datex-checkbox-suffix\"\r\n      >\r\n      </mat-checkbox>\r\n    }\r\n\r\n    @if (hasError()) {\r\n      <mat-error>{{ errorMessage() }}</mat-error>\r\n    }\r\n  </mat-form-field>\r\n\r\n  <!-- Calendar Template for CDK Overlay -->\r\n  <ng-template #calendarTemplate>\r\n    <div\r\n      class=\"ngx-datex-overlay\"\r\n      [class.ngx-datex-overlay-mobile]=\"isMobileDevice()\"\r\n      [class.ngx-datex-single]=\"singleDatePicker()\"\r\n      [class.ngx-datex-arrow-up]=\"arrowDirection() === 'up'\"\r\n      [class.ngx-datex-arrow-down]=\"arrowDirection() === 'down'\"\r\n      [class.ngx-datex-arrow-left]=\"arrowDirection() === 'left'\"\r\n      [class.ngx-datex-arrow-right]=\"arrowDirection() === 'right'\"\r\n      [class.ngx-datex-arrow-align-start]=\"arrowAlignment() === 'start'\"\r\n      [class.ngx-datex-arrow-align-center]=\"arrowAlignment() === 'center'\"\r\n      [class.ngx-datex-arrow-align-end]=\"arrowAlignment() === 'end'\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      [attr.aria-label]=\"headerTitle()\"\r\n      tabindex=\"-1\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (keydown)=\"onCalendarKeydown($event)\"\r\n    >\r\n      <!-- Mobile Header (only shown on mobile) -->\r\n      @if (isMobileDevice()) {\r\n        <div class=\"ngx-datex-mobile-header\">\r\n          <div class=\"ngx-datex-mobile-header-content\">\r\n            <div class=\"ngx-datex-mobile-selected-range\">\r\n              @if (hasStartDate()) {\r\n                {{ formattedSelectedRange() }}\r\n              } @else {\r\n                Selecciona un rango de fechas\r\n              }\r\n            </div>\r\n            <div class=\"ngx-datex-mobile-range-label\">\r\n              @if (currentLabel()) {\r\n                {{ currentLabel() }}\r\n              }\r\n            </div>\r\n          </div>\r\n          <div class=\"ngx-datex-mobile-header-buttons\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"ngx-datex-mobile-cancel-button\"\r\n              [ngClass]=\"[buttonClasses(), cancelButtonClasses()]\"\r\n              (click)=\"cancel()\"\r\n            >\r\n              {{ locale().cancelLabel || 'Cancelar' }}\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"ngx-datex-mobile-apply-button\"\r\n              [ngClass]=\"[buttonClasses(), applyButtonClasses()]\"\r\n              [disabled]=\"!canApplyValue()\"\r\n              (click)=\"apply()\"\r\n            >\r\n              {{ locale().applyLabel || 'Aplicar' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"ngx-datex-content\">\r\n        <!-- Predefined Ranges - Desktop: Sidebar, Mobile: Horizontal Chips -->\r\n        @if (showRanges()) {\r\n          <!-- Desktop Ranges Sidebar -->\r\n          @if (!isMobileDevice()) {\r\n            <div class=\"ngx-datex-ranges-sidebar\">\r\n              @for (rangeEntry of rangeEntries(); track rangeEntry.label) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-range-item\"\r\n                  [class.ngx-datex-range-active]=\"isRangeActive(rangeEntry.label)\"\r\n                  (click)=\"selectRange(rangeEntry.label)\"\r\n                >\r\n                  {{ rangeEntry.label }}\r\n                </button>\r\n              }\r\n              <!-- Rango Personalizado -->\r\n              @if (showCustomRangeLabel()) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-range-item\"\r\n                  [class.ngx-datex-range-active]=\"isCustomRange()\"\r\n                  (click)=\"selectCustomRange()\"\r\n                >\r\n                  {{ locale().customRangeLabel || 'Rango Personalizado' }}\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          <!-- Mobile Ranges Chips -->\r\n          @if (isMobileDevice()) {\r\n            <div class=\"ngx-datex-ranges-chips\">\r\n              <div class=\"ngx-datex-ranges-chips-container\">\r\n                @for (rangeEntry of rangeEntries(); track rangeEntry.label) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"ngx-datex-range-chip\"\r\n                    [class.ngx-datex-range-chip-active]=\"isRangeActive(rangeEntry.label)\"\r\n                    (click)=\"selectRange(rangeEntry.label)\"\r\n                  >\r\n                    {{ rangeEntry.label }}\r\n                  </button>\r\n                }\r\n                <!-- Rango Personalizado -->\r\n                @if (showCustomRangeLabel()) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"ngx-datex-range-chip\"\r\n                    [class.ngx-datex-range-chip-active]=\"isCustomRange()\"\r\n                    (click)=\"selectCustomRange()\"\r\n                  >\r\n                    {{ locale().customRangeLabel || 'Personalizado' }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        }\r\n\r\n        <!-- Calendar Section -->\r\n        <div class=\"ngx-datex-calendar-section\">\r\n          <!-- Calendar Container -->\r\n          <div class=\"ngx-datex-calendars\" (mouseleave)=\"onCalendarMouseLeave()\">\r\n            <!-- Left Calendar -->\r\n            <div\r\n              class=\"ngx-datex-calendar ngx-datex-calendar-left\"\r\n              [class.ngx-datex-calendar-single]=\"singleDatePicker()\"\r\n            >\r\n              <div class=\"ngx-datex-calendar-header\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-nav-button\"\r\n                  (click)=\"previousMonth('left')\"\r\n                  [disabled]=\"!canNavigatePrevious('left')\"\r\n                  aria-label=\"Mes anterior\"\r\n                >\r\n                  <mat-icon>chevron_left</mat-icon>\r\n                </button>\r\n\r\n                <div class=\"ngx-datex-month-year\">\r\n                  @if (showDropdowns()) {\r\n                    <select\r\n                      class=\"ngx-datex-month-select\"\r\n                      [value]=\"leftCalendarMonthValue()\"\r\n                      (change)=\"onMonthChange('left', $event)\"\r\n                      aria-label=\"Seleccionar mes\"\r\n                    >\r\n                      @for (month of monthNames(); track $index) {\r\n                        <option [value]=\"$index\">{{ month }}</option>\r\n                      }\r\n                    </select>\r\n\r\n                    <select\r\n                      class=\"ngx-datex-year-select\"\r\n                      [value]=\"leftCalendarYearValue()\"\r\n                      (change)=\"onYearChange('left', $event)\"\r\n                      aria-label=\"Seleccionar a\u00F1o\"\r\n                    >\r\n                      @for (year of availableYears(); track year) {\r\n                        <option [value]=\"year\">{{ year }}</option>\r\n                      }\r\n                    </select>\r\n                  } @else {\r\n                    <span class=\"ngx-datex-month-year-display\">\r\n                      {{ monthNames()[leftCalendarMonthValue()] }} {{ leftCalendarYearValue() }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-nav-button\"\r\n                  (click)=\"nextMonth('left')\"\r\n                  [disabled]=\"!canNavigateNext('left')\"\r\n                  aria-label=\"Mes siguiente\"\r\n                >\r\n                  <mat-icon>chevron_right</mat-icon>\r\n                </button>\r\n              </div>\r\n\r\n              <!-- Days of Week Header -->\r\n              <div class=\"ngx-datex-days-header\">\r\n                <div class=\"ngx-datex-days-header-row\">\r\n                  @for (day of daysOfWeek(); track day) {\r\n                    <div class=\"ngx-datex-day-header\">{{ day }}</div>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Calendar Grid -->\r\n              <div class=\"ngx-datex-calendar-grid\">\r\n                @for (week of leftCalendarMatrix(); track $index) {\r\n                  <div class=\"ngx-datex-week\">\r\n                    @for (date of week; track date.getTime()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"ngx-datex-day\"\r\n                        [class.ngx-datex-day-other-month]=\"isOtherMonth(date, leftCalendarMonth())\"\r\n                        [class.ngx-datex-day-today]=\"isToday(date)\"\r\n                        [class.ngx-datex-day-selected]=\"isSelected(date)\"\r\n                        [class.ngx-datex-day-active]=\"isSelected(date)\"\r\n                        [class.ngx-datex-day-in-range]=\"isInRange(date)\"\r\n                        [class.ngx-datex-day-range-start]=\"isRangeStart(date)\"\r\n                        [class.ngx-datex-day-range-end]=\"isRangeEnd(date)\"\r\n                        [class.ngx-datex-day-hover-range]=\"\r\n                          isHovered(date) && !isHoverStart(date) && !isHoverEnd(date)\r\n                        \"\r\n                        [class.ngx-datex-day-hover-start]=\"isHoverStart(date)\"\r\n                        [class.ngx-datex-day-hover-end]=\"isHoverEnd(date)\"\r\n                        [class.ngx-datex-day-disabled]=\"isDisabled(date)\"\r\n                        [disabled]=\"isDisabled(date)\"\r\n                        (click)=\"selectDate(date)\"\r\n                        (mouseenter)=\"onDateHover(date)\"\r\n                        [attr.aria-label]=\"formatDateForAria(date)\"\r\n                      >\r\n                        {{ date.getDate() }}\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <!-- Time Picker for Left Calendar -->\r\n              @if (timePicker()) {\r\n                <div class=\"ngx-datex-time-picker\">\r\n                  <div class=\"ngx-datex-time-controls\">\r\n                    <select\r\n                      class=\"ngx-datex-time-select ngx-datex-hour-select\"\r\n                      [value]=\"selectedStartHour()\"\r\n                      (change)=\"onStartHourChange($event)\"\r\n                      aria-label=\"Seleccionar hora\"\r\n                    >\r\n                      @if (timePicker24Hour()) {\r\n                        @for (hourOption of availableStartHours(); track hourOption.value) {\r\n                          <option\r\n                            [value]=\"hourOption.value\"\r\n                            [selected]=\"selectedStartHour() === hourOption.value\"\r\n                            [disabled]=\"hourOption.disabled\"\r\n                          >\r\n                            {{ hourOption.value.toString().padStart(2, '0') }}\r\n                          </option>\r\n                        }\r\n                      } @else {\r\n                        @for (hourOption of availableStartHours(); track hourOption.value) {\r\n                          <option\r\n                            [value]=\"hourOption.value\"\r\n                            [selected]=\"selectedStartHour() === hourOption.value\"\r\n                            [disabled]=\"hourOption.disabled\"\r\n                          >\r\n                            {{ hourOption.value }}\r\n                          </option>\r\n                        }\r\n                      }\r\n                    </select>\r\n\r\n                    <span class=\"ngx-datex-time-separator\">:</span>\r\n\r\n                    <select\r\n                      class=\"ngx-datex-time-select ngx-datex-minute-select\"\r\n                      [value]=\"selectedStartMinute()\"\r\n                      (change)=\"onStartMinuteChange($event)\"\r\n                      aria-label=\"Seleccionar minuto\"\r\n                    >\r\n                      @for (minuteOption of availableStartMinutes(); track minuteOption.value) {\r\n                        <option\r\n                          [value]=\"minuteOption.value\"\r\n                          [selected]=\"selectedStartMinute() === minuteOption.value\"\r\n                          [disabled]=\"minuteOption.disabled\"\r\n                        >\r\n                          {{ minuteOption.value.toString().padStart(2, '0') }}\r\n                        </option>\r\n                      }\r\n                    </select>\r\n\r\n                    @if (!timePicker24Hour()) {\r\n                      <select\r\n                        class=\"ngx-datex-time-select ngx-datex-ampm-select\"\r\n                        [value]=\"selectedStartAmPm()\"\r\n                        (change)=\"onStartAmPmChange($event)\"\r\n                        aria-label=\"Seleccionar AM/PM\"\r\n                      >\r\n                        <option value=\"AM\">AM</option>\r\n                        <option value=\"PM\">PM</option>\r\n                      </select>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Right Calendar (for range picker) -->\r\n            @if (!singleDatePicker()) {\r\n              <div class=\"ngx-datex-calendar ngx-datex-calendar-right\">\r\n                <div class=\"ngx-datex-calendar-header\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"ngx-datex-nav-button\"\r\n                    (click)=\"previousMonth('right')\"\r\n                    [disabled]=\"!canNavigatePrevious('right')\"\r\n                    aria-label=\"Mes anterior\"\r\n                  >\r\n                    <mat-icon>chevron_left</mat-icon>\r\n                  </button>\r\n\r\n                  <div class=\"ngx-datex-month-year\">\r\n                    @if (showDropdowns()) {\r\n                      <select\r\n                        class=\"ngx-datex-month-select\"\r\n                        [value]=\"rightCalendarMonthValue()\"\r\n                        (change)=\"onMonthChange('right', $event)\"\r\n                        aria-label=\"Seleccionar mes\"\r\n                      >\r\n                        @for (month of monthNames(); track $index) {\r\n                          <option [value]=\"$index\">{{ month }}</option>\r\n                        }\r\n                      </select>\r\n\r\n                      <select\r\n                        class=\"ngx-datex-year-select\"\r\n                        [value]=\"rightCalendarYearValue()\"\r\n                        (change)=\"onYearChange('right', $event)\"\r\n                        aria-label=\"Seleccionar a\u00F1o\"\r\n                      >\r\n                        @for (year of availableYears(); track year) {\r\n                          <option [value]=\"year\">{{ year }}</option>\r\n                        }\r\n                      </select>\r\n                    } @else {\r\n                      <span class=\"ngx-datex-month-year-display\">\r\n                        {{ monthNames()[rightCalendarMonthValue()] }} {{ rightCalendarYearValue() }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"ngx-datex-nav-button\"\r\n                    (click)=\"nextMonth('right')\"\r\n                    [disabled]=\"!canNavigateNext('right')\"\r\n                    aria-label=\"Mes siguiente\"\r\n                  >\r\n                    <mat-icon>chevron_right</mat-icon>\r\n                  </button>\r\n                </div>\r\n\r\n                <!-- Days of Week Header -->\r\n                <div class=\"ngx-datex-days-header\">\r\n                  <div class=\"ngx-datex-days-header-row\">\r\n                    @for (day of daysOfWeek(); track day) {\r\n                      <div class=\"ngx-datex-day-header\">{{ day }}</div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Calendar Grid -->\r\n                <div class=\"ngx-datex-calendar-grid\">\r\n                  @for (week of rightCalendarMatrix(); track $index) {\r\n                    <div class=\"ngx-datex-week\">\r\n                      @for (date of week; track date.getTime()) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"ngx-datex-day\"\r\n                          [class.ngx-datex-day-other-month]=\"\r\n                            isOtherMonth(date, rightCalendarMonth())\r\n                          \"\r\n                          [class.ngx-datex-day-today]=\"isToday(date)\"\r\n                          [class.ngx-datex-day-selected]=\"isSelected(date)\"\r\n                          [class.ngx-datex-day-active]=\"isSelected(date)\"\r\n                          [class.ngx-datex-day-in-range]=\"isInRange(date)\"\r\n                          [class.ngx-datex-day-range-start]=\"isRangeStart(date)\"\r\n                          [class.ngx-datex-day-range-end]=\"isRangeEnd(date)\"\r\n                          [class.ngx-datex-day-hover-range]=\"\r\n                            isHovered(date) && !isHoverStart(date) && !isHoverEnd(date)\r\n                          \"\r\n                          [class.ngx-datex-day-hover-start]=\"isHoverStart(date)\"\r\n                          [class.ngx-datex-day-hover-end]=\"isHoverEnd(date)\"\r\n                          [class.ngx-datex-day-disabled]=\"isDisabled(date)\"\r\n                          [disabled]=\"isDisabled(date)\"\r\n                          (click)=\"selectDate(date)\"\r\n                          (mouseenter)=\"onDateHover(date)\"\r\n                          [attr.aria-label]=\"formatDateForAria(date)\"\r\n                        >\r\n                          {{ date.getDate() }}\r\n                        </button>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n\r\n                <!-- Time Picker for Right Calendar -->\r\n                @if (timePicker() && !singleDatePicker()) {\r\n                  <div class=\"ngx-datex-time-picker\">\r\n                    <div class=\"ngx-datex-time-controls\">\r\n                      <select\r\n                        class=\"ngx-datex-time-select ngx-datex-hour-select\"\r\n                        [value]=\"selectedEndHour()\"\r\n                        [disabled]=\"!hasEndDate()\"\r\n                        (change)=\"onEndHourChange($event)\"\r\n                        aria-label=\"Seleccionar hora\"\r\n                      >\r\n                        @if (timePicker24Hour()) {\r\n                          @for (hourOption of availableEndHours(); track hourOption.value) {\r\n                            <option\r\n                              [value]=\"hourOption.value\"\r\n                              [selected]=\"selectedEndHour() === hourOption.value\"\r\n                              [disabled]=\"hourOption.disabled\"\r\n                            >\r\n                              {{ hourOption.value.toString().padStart(2, '0') }}\r\n                            </option>\r\n                          }\r\n                        } @else {\r\n                          @for (hourOption of availableEndHours(); track hourOption.value) {\r\n                            <option\r\n                              [value]=\"hourOption.value\"\r\n                              [selected]=\"selectedEndHour() === hourOption.value\"\r\n                              [disabled]=\"hourOption.disabled\"\r\n                            >\r\n                              {{ hourOption.value }}\r\n                            </option>\r\n                          }\r\n                        }\r\n                      </select>\r\n\r\n                      <span class=\"ngx-datex-time-separator\">:</span>\r\n\r\n                      <select\r\n                        class=\"ngx-datex-time-select ngx-datex-minute-select\"\r\n                        [value]=\"selectedEndMinute()\"\r\n                        [disabled]=\"!hasEndDate()\"\r\n                        (change)=\"onEndMinuteChange($event)\"\r\n                        aria-label=\"Seleccionar minuto\"\r\n                      >\r\n                        @for (minuteOption of availableEndMinutes(); track minuteOption.value) {\r\n                          <option\r\n                            [value]=\"minuteOption.value\"\r\n                            [selected]=\"selectedEndMinute() === minuteOption.value\"\r\n                            [disabled]=\"minuteOption.disabled\"\r\n                          >\r\n                            {{ minuteOption.value.toString().padStart(2, '0') }}\r\n                          </option>\r\n                        }\r\n                      </select>\r\n\r\n                      @if (!timePicker24Hour()) {\r\n                        <select\r\n                          class=\"ngx-datex-time-select ngx-datex-ampm-select\"\r\n                          [value]=\"selectedEndAmPm()\"\r\n                          [disabled]=\"!hasEndDate()\"\r\n                          (change)=\"onEndAmPmChange($event)\"\r\n                          aria-label=\"Seleccionar AM/PM\"\r\n                        >\r\n                          <option value=\"AM\">AM</option>\r\n                          <option value=\"PM\">PM</option>\r\n                        </select>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Footer with selected range and buttons (desktop only) -->\r\n          @if (!isMobileDevice()) {\r\n            <div class=\"ngx-datex-footer\">\r\n              <div class=\"ngx-datex-selected-range\">\r\n                @if (hasStartDate()) {\r\n                  {{ formattedSelectedRange() }}\r\n                } @else {\r\n                  Selecciona un rango de fechas\r\n                }\r\n              </div>\r\n              <div class=\"ngx-datex-footer-buttons\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-cancel-button\"\r\n                  [ngClass]=\"[buttonClasses(), cancelButtonClasses()]\"\r\n                  (click)=\"cancel()\"\r\n                >\r\n                  {{ locale().cancelLabel || 'Cancelar' }}\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"ngx-datex-apply-button\"\r\n                  [ngClass]=\"[buttonClasses(), applyButtonClasses()]\"\r\n                  [disabled]=\"!canApplyValue()\"\r\n                  (click)=\"apply()\"\r\n                >\r\n                  {{ locale().applyLabel || 'Aplicar' }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n", styles: [".ngx-datex-container{position:relative;display:inline-block;width:100%}.ngx-datex-input-field{width:100%}.ngx-datex-calendar-icon{cursor:pointer;transition:color .2s ease;font-size:20px}.ngx-datex-calendar-icon:hover,.ngx-datex-calendar-icon.ngx-datex-icon-active{color:var(--ngx-datex-primary-color, #1976d2)}.ngx-datex-overlay-panel{z-index:1000}.ngx-datex-mobile-overlay{z-index:1001}.ngx-datex-overlay{background:#fff;border-radius:8px;box-shadow:0 5px 15px #00000026,0 2px 4px #0000001f;border:1px solid #e0e0e0;width:650px;font-family:Roboto,sans-serif;font-size:12px;line-height:1em;position:relative;color:#212121}.ngx-datex-overlay:before,.ngx-datex-overlay:after{position:absolute;content:\"\";display:none;z-index:10}.ngx-datex-overlay.ngx-datex-arrow-down:before{display:block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #e0e0e0;top:-7px}.ngx-datex-overlay.ngx-datex-arrow-down:after{display:block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #ffffff;top:-6px}.ngx-datex-overlay.ngx-datex-arrow-up:before{display:block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #e0e0e0;bottom:-7px}.ngx-datex-overlay.ngx-datex-arrow-up:after{display:block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #ffffff;bottom:-6px}.ngx-datex-overlay.ngx-datex-arrow-right:before{display:block;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #e0e0e0;left:-7px}.ngx-datex-overlay.ngx-datex-arrow-right:after{display:block;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #ffffff;left:-6px}.ngx-datex-overlay.ngx-datex-arrow-left:before{display:block;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid #e0e0e0;right:-7px}.ngx-datex-overlay.ngx-datex-arrow-left:after{display:block;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #ffffff;right:-6px}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-start:before,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-start:before{left:20px}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-start:after,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-start:after{left:21px}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-center:before,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-center:before{left:50%;transform:translate(-50%)}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-center:after,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-center:after{left:50%;transform:translate(-50%)}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-end:before,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-end:before{right:20px}.ngx-datex-overlay.ngx-datex-arrow-up.ngx-datex-arrow-align-end:after,.ngx-datex-overlay.ngx-datex-arrow-down.ngx-datex-arrow-align-end:after{right:21px}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-start:before,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-start:before{top:20px}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-start:after,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-start:after{top:21px}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-center:before,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-center:before{top:50%;transform:translateY(-50%)}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-center:after,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-center:after{top:50%;transform:translateY(-50%)}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-end:before,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-end:before{bottom:20px}.ngx-datex-overlay.ngx-datex-arrow-left.ngx-datex-arrow-align-end:after,.ngx-datex-overlay.ngx-datex-arrow-right.ngx-datex-arrow-align-end:after{bottom:21px}.ngx-datex-overlay.ngx-datex-single{width:300px}.ngx-datex-overlay.ngx-datex-single .ngx-datex-ranges-sidebar{display:none}.ngx-datex-overlay.ngx-datex-overlay-mobile{width:100vw;max-width:100vw;min-width:100vw;border-radius:16px 16px 0 0;max-height:90vh;overflow-y:auto;box-shadow:0 -8px 32px #0003;border:none;margin:0;padding:0}.ngx-datex-overlay.ngx-datex-overlay-mobile:before,.ngx-datex-overlay.ngx-datex-overlay-mobile:after{display:none}.ngx-datex-overlay.ngx-datex-overlay-mobile .ngx-datex-content{min-height:auto;padding:0;margin:0;width:100%;display:flex;flex-direction:column}.ngx-datex-overlay.ngx-datex-overlay-mobile .ngx-datex-calendar-section{padding:0;margin:0;width:100%;flex:1}.ngx-datex-overlay.ngx-datex-overlay-mobile .ngx-datex-calendars{padding:16px;gap:20px;margin:0;width:100%;box-sizing:border-box}.ngx-datex-overlay.ngx-datex-overlay-mobile .ngx-datex-calendar{padding:0;margin:0;border-radius:0;background:transparent;border:none;box-shadow:none;width:100%}.ngx-datex-content{display:flex;min-height:350px}.ngx-datex-ranges-sidebar{width:140px;background:#fff;border-right:1px solid #e0e0e0;padding:0;border-radius:8px 0 0 8px;display:flex;flex-direction:column}.ngx-datex-range-item{background:none;border:none;padding:8px 12px;text-align:left;cursor:pointer;font-size:12px;color:#212121;transition:all .2s ease;border-radius:0;margin:2px 0}.ngx-datex-range-item:hover{background:#f5f5f5;color:#1976d2}.ngx-datex-range-item.ngx-datex-range-active{background:#1976d2;color:#fff;font-weight:500}.ngx-datex-ranges-chips{width:100%;background:#fff;border-bottom:1px solid #e0e0e0;padding:16px 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.ngx-datex-ranges-chips::-webkit-scrollbar{display:none}.ngx-datex-ranges-chips-container{display:flex;gap:12px;padding:0 16px;min-width:max-content}.ngx-datex-range-chip{background:#f8f9fa;border:1px solid #dee2e6;border-radius:20px;padding:10px 16px;font-size:14px;font-weight:500;color:#495057;cursor:pointer;transition:all .3s ease;white-space:nowrap;flex-shrink:0;min-height:40px;display:flex;align-items:center;justify-content:center;min-width:80px;text-align:center}.ngx-datex-range-chip:hover{background:#e3f2fd;border-color:#2196f3;color:#1976d2;transform:translateY(-2px);box-shadow:0 4px 12px #2196f340}.ngx-datex-range-chip.ngx-datex-range-chip-active{background:linear-gradient(135deg,#2196f3,#1976d2);border-color:#1976d2;color:#fff;font-weight:600;box-shadow:0 4px 16px #1976d266;transform:translateY(-1px)}.ngx-datex-range-chip:active{transform:translateY(0)}.ngx-datex-calendar-section{flex:1;display:flex;flex-direction:column}@media(max-width:768px){.ngx-datex-ranges-chips+.ngx-datex-calendar-section{padding-top:0}.ngx-datex-calendar-section{padding:0;background:#fff;width:100%;margin:0}}.ngx-datex-calendars{display:flex;padding:0;gap:0;flex:1}@media(max-width:768px){.ngx-datex-calendars{flex-direction:column;gap:16px;padding:12px;width:100%;margin:0;box-sizing:border-box}}.ngx-datex-calendar{flex:1;padding:8px;min-width:0}.ngx-datex-calendar.ngx-datex-calendar-right{padding:8px}@media(max-width:768px){.ngx-datex-calendar{padding:0;background:transparent;border:none;box-shadow:none;width:100%;flex:none;min-width:unset;box-sizing:border-box;margin:0}.ngx-datex-calendar .ngx-datex-calendar-grid{width:100%;margin:0}.ngx-datex-calendar .ngx-datex-week{width:100%;display:table-row;margin:0}.ngx-datex-calendar .ngx-datex-day{display:table-cell;width:14.28%;margin:0;padding:0}.ngx-datex-calendar .ngx-datex-days-header{width:100%;margin:0 0 8px}.ngx-datex-calendar .ngx-datex-calendar-header{margin:0 0 16px;padding:0}}.ngx-datex-calendar.ngx-datex-calendar-single{padding:8px}.ngx-datex-calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0;height:28px}@media(max-width:768px){.ngx-datex-calendar-header{height:40px;margin-bottom:12px;padding:0 4px}}.ngx-datex-nav-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:3px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;color:#757575;width:32px;height:28px}@media(max-width:768px){.ngx-datex-nav-button{width:40px;height:40px;border-radius:6px;background:#f5f5f5}.ngx-datex-nav-button mat-icon{font-size:18px}}.ngx-datex-nav-button:hover:not(:disabled){background:#f5f5f5;color:#1976d2}.ngx-datex-nav-button:disabled{opacity:.5;cursor:not-allowed}.ngx-datex-nav-button mat-icon{font-size:18px;width:18px;height:18px;color:inherit}.ngx-datex-month-year{display:flex;align-items:center;gap:4px;font-weight:500;font-size:12px}@media(max-width:768px){.ngx-datex-month-year{font-size:16px;font-weight:600;gap:8px}}.ngx-datex-month-select,.ngx-datex-year-select{border:1px solid #e0e0e0;border-radius:3px;padding:1px 2px;font-size:12px;background:#fff;cursor:pointer;color:#212121;height:auto;margin:0;outline:none;appearance:auto;-webkit-appearance:menulist;-moz-appearance:menulist;min-height:20px}@media(max-width:768px){.ngx-datex-month-select,.ngx-datex-year-select{font-size:14px;padding:4px 8px;border-radius:6px;min-height:32px;border:2px solid #e0e0e0}}.ngx-datex-month-select:focus,.ngx-datex-year-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 2px #1976d233}.ngx-datex-month-select option,.ngx-datex-year-select option{background:#fff;color:#212121}.ngx-datex-month-select{margin-right:2%;width:56%;min-width:50px}.ngx-datex-year-select{width:40%;min-width:50px}.ngx-datex-days-header{display:table;width:100%;margin-bottom:0;border-collapse:collapse;border-spacing:0}@media(max-width:768px){.ngx-datex-days-header{width:100%;margin:0 0 8px;padding:0}}.ngx-datex-days-header-row{display:table-row}.ngx-datex-day-header{display:table-cell;text-align:center;font-size:12px;font-weight:500;width:14.28%;height:28px;line-height:28px;background:#fff;color:#212121;box-sizing:border-box;vertical-align:middle;padding:0}@media(max-width:768px){.ngx-datex-day-header{height:36px;line-height:36px;font-size:13px;font-weight:600;background:#f8f9fa;color:#495057;border-bottom:1px solid #e0e0e0}}.ngx-datex-calendar-grid{display:table;width:100%;margin:0;padding:0;border-collapse:collapse;border-spacing:0;table-layout:fixed}@media(max-width:768px){.ngx-datex-calendar-grid{border-radius:0;overflow:visible;width:100%;margin:0;padding:0}}.ngx-datex-week{display:table-row}.ngx-datex-day{display:table-cell;width:14.28%;height:28px;text-align:center;font-size:12px;padding:0;margin:0;box-sizing:border-box;border:1px solid transparent;background:#fff;cursor:pointer}@media(max-width:768px){.ngx-datex-day{height:40px;font-size:15px;font-weight:500;line-height:40px;vertical-align:middle;border:1px solid #f0f0f0}}.ngx-datex-day{transition:all .15s ease;position:relative;border-radius:4px;line-height:28px;white-space:nowrap;color:#212121;vertical-align:middle}.ngx-datex-day:hover:not(:disabled){background:#f5f5f5;color:#212121}.ngx-datex-day.ngx-datex-day-other-month{background-color:#fff!important;border:1px solid transparent!important;border-color:transparent!important;color:#999!important}.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-in-range,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-range-start,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-range-end,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-selected,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-active,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-range,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-start,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-end{background-color:#fff!important;border:1px solid transparent!important;border-color:transparent!important;color:#999!important;border-radius:4px!important;box-shadow:none!important;outline:none!important}.ngx-datex-day.ngx-datex-day-other-month:hover{background-color:#eee!important;border:1px solid transparent!important;border-color:transparent!important;color:inherit!important;box-shadow:none!important;outline:none!important}.ngx-datex-day.ngx-datex-day-today{font-weight:700;background:#1976d21a;color:#1976d2}.ngx-datex-day.ngx-datex-day-selected,.ngx-datex-day.ngx-datex-day-active{background-color:#1976d2;border-color:transparent;color:#fff}.ngx-datex-day.ngx-datex-day-selected:hover,.ngx-datex-day.ngx-datex-day-active:hover{background-color:#1976d2;opacity:.9}.ngx-datex-day.ngx-datex-day-in-range{background-color:#ebf4f8;border-color:transparent;color:#212121;border-radius:0}.ngx-datex-day.ngx-datex-day-range-start{background-color:#1976d2;border-color:transparent;color:#fff;border-radius:4px 0 0 4px}.ngx-datex-day.ngx-datex-day-range-end{background-color:#1976d2;border-color:transparent;color:#fff;border-radius:0 4px 4px 0}.ngx-datex-day.ngx-datex-day-range-start.ngx-datex-day-range-end{border-radius:4px}.ngx-datex-day.ngx-datex-day-hover-range{background-color:#ebf4f8;border-color:transparent;color:#212121;border-radius:0}.ngx-datex-day.ngx-datex-day-hover-start{background-color:#1976d2;border-color:transparent;color:#fff;border-radius:4px 0 0 4px}.ngx-datex-day.ngx-datex-day-hover-end{background-color:#1976d2;border-color:transparent;color:#fff;border-radius:0 4px 4px 0}.ngx-datex-day.ngx-datex-day-hover-start.ngx-datex-day-hover-end{border-radius:4px}.ngx-datex-day.ngx-datex-day-disabled{color:#bdbdbd;cursor:not-allowed;text-decoration:line-through}.ngx-datex-day.ngx-datex-day-disabled:hover{background:#fff;color:#bdbdbd}.ngx-datex-footer{padding:8px;border-top:1px solid #e0e0e0;background:#fff;border-radius:0 0 8px 8px;display:flex;justify-content:space-between;align-items:center;line-height:10px;vertical-align:middle;margin:0}.ngx-datex-selected-range{font-size:12px;color:#212121;font-weight:400;display:inline-block;padding-right:8px}.ngx-datex-footer-buttons{display:flex;gap:4px}.ngx-datex-cancel-button,.ngx-datex-apply-button{min-width:70px;font-weight:700;font-size:12px;padding:7px 8px;border-radius:3px;border:1px solid transparent;cursor:pointer;transition:all .15s ease-in-out;margin-left:4px}.ngx-datex-cancel-button{background-color:#dc3545;border-color:#dc3545;color:#fff}.ngx-datex-cancel-button:hover:not(:disabled){background-color:#dc3545;border-color:#dc3545;opacity:.8}.ngx-datex-apply-button{background-color:#22c55e;border-color:#22c55e;color:#fff}.ngx-datex-apply-button:disabled{background:#9ca3af;border-color:#9ca3af;opacity:.6;cursor:not-allowed}.ngx-datex-apply-button:hover:not(:disabled){background-color:#22c55e;border-color:#22c55e;opacity:.8}.ngx-datex-mobile .ngx-datex-overlay{position:fixed;inset:auto 0 0;width:100%;max-width:100vw;min-width:100vw;border-radius:12px 12px 0 0;margin:0;max-height:85vh;overflow-y:auto;z-index:999999;box-shadow:0 -4px 20px #00000026}.ngx-datex-mobile .ngx-datex-overlay:before,.ngx-datex-mobile .ngx-datex-overlay:after{display:none}.ngx-datex-mobile .ngx-datex-content{flex-direction:column}.ngx-datex-mobile .ngx-datex-ranges-sidebar{width:100%;border-right:none;border-bottom:1px solid #e0e0e0;border-radius:12px 12px 0 0;flex-direction:row;overflow-x:auto;padding:8px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.ngx-datex-mobile .ngx-datex-ranges-sidebar::-webkit-scrollbar{display:none}.ngx-datex-mobile .ngx-datex-range-item{white-space:nowrap;padding:8px 12px;margin:0 4px;border-radius:20px;background-color:#f5f5f5;border:1px solid #e0e0e0;flex:0 0 auto;min-width:60px;text-align:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.ngx-datex-mobile .ngx-datex-range-item:hover{background-color:#1976d21a;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.ngx-datex-mobile .ngx-datex-range-item.ngx-datex-range-active{background-color:#1976d2;color:#fff;border-color:#1976d2;font-weight:600}.ngx-datex-mobile .ngx-datex-calendars{flex-direction:column;padding:6px}.ngx-datex-mobile .ngx-datex-calendar{width:100%;padding:6px}.ngx-datex-mobile .ngx-datex-days-header{display:table;width:100%;border-collapse:collapse;border-spacing:0}.ngx-datex-mobile .ngx-datex-days-header-row{display:table-row}.ngx-datex-mobile .ngx-datex-calendar-grid{display:table;width:100%;border-collapse:collapse;border-spacing:0}.ngx-datex-mobile .ngx-datex-week{display:table-row}.ngx-datex-mobile .ngx-datex-week-number-header,.ngx-datex-mobile .ngx-datex-week-number{display:none}.ngx-datex-mobile .ngx-datex-day-header{display:table-cell;height:28px;line-height:28px;font-size:11px;font-weight:600;text-align:center;padding:0;margin:0;box-sizing:border-box;vertical-align:middle}.ngx-datex-mobile .ngx-datex-day{display:table-cell;height:40px;line-height:40px;font-size:15px;font-weight:500;border-radius:6px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;text-align:center;vertical-align:middle}.ngx-datex-mobile .ngx-datex-footer{display:none}.ngx-datex-mobile-header{width:100%;background-color:#fff;color:#333;border-radius:16px 16px 0 0;box-sizing:border-box;position:relative;z-index:3;border-bottom:1px solid #e0e0e0;display:flex;flex-direction:column;gap:0;padding:12px 0 8px}.ngx-datex-mobile-header-content{padding:0 16px 8px;text-align:center;flex:1}.ngx-datex-mobile-header-buttons{display:flex;justify-content:space-between;align-items:center;padding:8px 16px 0;gap:12px;border-top:1px solid #f0f0f0;background-color:#fff}.ngx-datex-mobile-selected-range{display:block;font-size:16px;font-weight:600;line-height:1.3;color:#1a1a1a;margin-bottom:2px}.ngx-datex-mobile-range-label{display:block;font-size:13px;font-weight:500;color:#2196f3;margin-top:2px}.ngx-datex-mobile-cancel-button,.ngx-datex-mobile-apply-button{flex:1;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;border:2px solid transparent;text-transform:none;letter-spacing:0;min-height:40px;display:flex;align-items:center;justify-content:center}.ngx-datex-mobile-cancel-button{background:#dc3545;border:2px solid #dc3545;color:#fff}.ngx-datex-mobile-cancel-button:hover{background:#c82333;border-color:#c82333;transform:translateY(-1px);box-shadow:0 4px 12px #dc35454d}.ngx-datex-mobile-cancel-button:active{transform:translateY(0);box-shadow:0 2px 4px #dc354533}.ngx-datex-mobile-apply-button{background:#28a745;border:2px solid #28a745;color:#fff}.ngx-datex-mobile-apply-button:hover{background:#218838;border-color:#218838;transform:translateY(-1px);box-shadow:0 4px 16px #28a7454d}.ngx-datex-mobile-apply-button:active{transform:translateY(0);box-shadow:0 2px 8px #28a74533}.ngx-datex-mobile-apply-button:disabled{background:#e0e0e0;border-color:#e0e0e0;color:#9e9e9e;cursor:not-allowed;transform:none;box-shadow:none}.ngx-datex-day:focus{outline:2px solid #1976d2;outline-offset:-2px;z-index:1}.ngx-datex-nav-button:focus{outline:2px solid #1976d2;outline-offset:2px}.ngx-datex-range-item:focus{outline:2px solid #1976d2;outline-offset:-2px}.ngx-datex-overlay{animation:fadeInScale .2s ease-out}.ngx-datex-overlay:before,.ngx-datex-overlay:after{animation:fadeInArrow .2s ease-out .1s both}.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-up:before,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-up:after,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-down:before,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-down:after{animation:fadeInArrowCenterHorizontal .2s ease-out .1s both}.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-left:before,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-left:after,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-right:before,.ngx-datex-overlay.ngx-datex-arrow-align-center.ngx-datex-arrow-right:after{animation:fadeInArrowCenterVertical .2s ease-out .1s both}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fadeInArrow{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fadeInArrowCenterHorizontal{0%{opacity:0;transform:translate(-50%) scale(.8)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes fadeInArrowCenterVertical{0%{opacity:0;transform:translateY(-50%) scale(.8)}to{opacity:1;transform:translateY(-50%) scale(1)}}.ngx-datex-overlay.ngx-datex-single .ngx-datex-calendar.ngx-datex-calendar-right{display:none}.ngx-datex-overlay.ngx-datex-single .ngx-datex-calendar.ngx-datex-calendar-left{padding:8px}.ngx-datex-time-picker{border-top:1px solid #e0e0e0;padding:8px;background:#fff;margin-top:8px}.ngx-datex-time-controls{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:nowrap}.ngx-datex-time-separator{font-size:14px;font-weight:700;color:#333;margin:0 2px;line-height:1}.ngx-datex-time-select{border:1px solid #ccc;border-radius:3px;padding:2px 4px;font-size:11px;background:#fff;color:#333;outline:none;cursor:pointer;appearance:auto;-webkit-appearance:menulist;-moz-appearance:menulist;min-height:22px;line-height:1}.ngx-datex-time-select:focus{border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.ngx-datex-time-select:disabled{background:#f5f5f5;color:#999;cursor:not-allowed;opacity:.6}.ngx-datex-time-select option{padding:2px 4px;font-size:11px}.ngx-datex-hour-select,.ngx-datex-minute-select{width:50px;text-align:center}.ngx-datex-ampm-select{width:45px;text-align:center}.ngx-datex-mobile .ngx-datex-time-picker{margin-top:12px;padding:12px}.ngx-datex-mobile .ngx-datex-time-controls{gap:6px}.ngx-datex-mobile .ngx-datex-time-separator{font-size:16px;margin:0 4px}.ngx-datex-mobile .ngx-datex-time-select{font-size:14px;padding:4px 6px;min-height:32px;border-radius:4px}.ngx-datex-mobile .ngx-datex-hour-select,.ngx-datex-mobile .ngx-datex-minute-select{width:60px}.ngx-datex-mobile .ngx-datex-ampm-select{width:55px}@media(min-width:564px)and (max-width:768px){.ngx-datex-overlay.ngx-datex-overlay-mobile{position:fixed;width:90%;max-width:500px;inset:auto auto 20px 50%;transform:translate(-50%);border-radius:8px}}@media(min-width:564px){.ngx-datex-mobile .ngx-datex-overlay{position:absolute;inset:100% auto auto 0;width:650px;max-width:90vw;border-radius:8px;margin-top:7px;max-height:none}.ngx-datex-mobile .ngx-datex-overlay:before,.ngx-datex-mobile .ngx-datex-overlay:after{display:inline-block}.ngx-datex-mobile .ngx-datex-footer{display:flex}.ngx-datex-mobile .ngx-datex-mobile-header{display:none}.ngx-datex-mobile .ngx-datex-ranges-sidebar{width:140px;flex-direction:column;border-right:1px solid #e0e0e0;border-bottom:none;border-radius:8px 0 0 8px;overflow-x:visible;padding:0}.ngx-datex-mobile .ngx-datex-range-item{white-space:normal;padding:8px 12px;margin:2px 0;border-radius:0;background:none;border:none;text-align:left;min-width:auto}.ngx-datex-mobile .ngx-datex-calendars{flex-direction:row;padding:0}.ngx-datex-mobile .ngx-datex-calendar{padding:8px 0 8px 8px}.ngx-datex-mobile .ngx-datex-calendar.ngx-datex-calendar-right{padding:8px 8px 8px 0}.ngx-datex-mobile .ngx-datex-days-header{display:table;width:100%;border-collapse:collapse;border-spacing:0}.ngx-datex-mobile .ngx-datex-days-header-row{display:table-row}.ngx-datex-mobile .ngx-datex-calendar-grid{display:table;width:100%;border-collapse:collapse;border-spacing:0}.ngx-datex-mobile .ngx-datex-week{display:table-row}.ngx-datex-mobile .ngx-datex-week-number-header,.ngx-datex-mobile .ngx-datex-week-number{display:none}.ngx-datex-mobile .ngx-datex-day-header{display:table-cell;width:14.28%;height:28px;line-height:28px;font-size:12px;box-sizing:border-box;text-align:center;vertical-align:middle}.ngx-datex-mobile .ngx-datex-day{display:table-cell;width:14.28%;height:28px;line-height:28px;font-size:12px;border-radius:4px;box-sizing:border-box;text-align:center;vertical-align:middle}}.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-selected,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-active,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-in-range,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-range-start,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-range-end,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-range,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-start,.ngx-datex-day.ngx-datex-day-other-month.ngx-datex-day-hover-end{background-color:#fff!important;border:1px solid transparent!important;border-color:transparent!important;color:#999!important;border-radius:4px!important;box-shadow:none!important;outline:none!important}.ngx-datex-day.ngx-datex-day-other-month:hover,.ngx-datex-day.ngx-datex-day-other-month:focus{background-color:#eee!important;border:1px solid transparent!important;border-color:transparent!important;color:#999!important;box-shadow:none!important;outline:none!important}.ngx-datex-day.ngx-datex-day-other-month:focus{background-color:#eee!important;border:1px solid transparent!important;border-color:transparent!important;color:#999!important;box-shadow:none!important;outline:none!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputElement: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }], calendarTemplate: [{
+                type: ViewChild,
+                args: ['calendarTemplate']
+            }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], calendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarIcon", required: false }] }], showCalendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarIcon", required: false }] }], calendarIconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarIconPosition", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], checkboxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxPosition", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], singleDatePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleDatePicker", required: false }] }], autoApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoApply", required: false }] }], showDropdowns: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropdowns", required: false }] }], timePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker", required: false }] }], timePicker24Hour: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker24Hour", required: false }] }], timePickerIncrement: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePickerIncrement", required: false }] }], timePickerSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePickerSeconds", required: false }] }], linkedCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkedCalendars", required: false }] }], autoUpdateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpdateInput", required: false }] }], alwaysShowCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowCalendars", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], maxSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSpan", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], showISOWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showISOWeekNumbers", required: false }] }], buttonClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClasses", required: false }] }], applyButtonClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyButtonClasses", required: false }] }], cancelButtonClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonClasses", required: false }] }], isInvalidDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalidDate", required: false }] }], isCustomDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCustomDate", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], ranges: [{ type: i0.Input, args: [{ isSignal: true, alias: "ranges", required: false }] }], opens: [{ type: i0.Input, args: [{ isSignal: true, alias: "opens", required: false }] }], drops: [{ type: i0.Input, args: [{ isSignal: true, alias: "drops", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], dayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayTemplate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], openEvent: [{ type: i0.Output, args: ["openEvent"] }], closeEvent: [{ type: i0.Output, args: ["closeEvent"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], yearChange: [{ type: i0.Output, args: ["yearChange"] }], dateHover: [{ type: i0.Output, args: ["dateHover"] }], validationError: [{ type: i0.Output, args: ["validationError"] }], checkboxChange: [{ type: i0.Output, args: ["checkboxChange"] }] } });
+
+/*
+ * Public API Surface of ngx-datex
+ */
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_RANGES, MATERIAL_LIGHT_THEME, NgxDatex, NgxDatexCalendarService, NgxDatexOverlayService, NgxDatexService, NgxDatexTimePickerService, SPANISH_LOCALE, addDays, addMonths, endOfDay, formatDateValue, getStartOfMonth, getStartOfWeek, isBeforeDate, isMobileDevice, isSameDate, isSameDay, isSameMonth, isSameYear, isValidDate, parseDateValue, startOfDay, startOfMonth, startOfWeek };
+//# sourceMappingURL=ngx-datex.mjs.map