ngx-datex 1.0.0 → 1.0.2

package/fesm2022/ngx-datex.mjs

@@ -172,11 +172,30 @@ function isSameMonth(date1, date2) {
 function isSameYear(date1, date2) {
     return sameYear(date1, date2);
 }
-function formatDateValue(date, formatStr) {
+/**
+ * Formats a date using the specified format string and locale.
+ * Follows vanilla-daterangepicker logic by always using locale.format.
+ *
+ * @param date - The date to format
+ * @param formatStr - Format string (e.g., 'DD/MM/YYYY', 'MM/DD/YYYY HH:mm')
+ * @param locale - Optional locale string (e.g., 'es-ES', 'en-US')
+ * @returns Formatted date string
+ *
+ * @example
+ * ```typescript
+ * const date = new Date('2024-01-15 14:30:00');
+ * formatDateValue(date, 'DD/MM/YYYY'); // '15/01/2024'
+ * formatDateValue(date, 'MM/DD/YYYY hh:mm A'); // '01/15/2024 02:30 PM'
+ * formatDateValue(date, 'DD/MM/YYYY HH:mm', 'es-ES'); // '15/01/2024 14:30'
+ * ```
+ */
+function formatDateValue(date, formatStr, locale) {
     try {
-        return format(date, formatStr);
+        // Use @formkit/tempo with locale support (following vanilla-daterangepicker pattern)
+        return format(date, formatStr, locale);
     }
     catch {
+        // Fallback to manual formatting if tempo fails
         const year = date.getFullYear();
         const month = String(date.getMonth() + 1).padStart(2, '0');
         const day = String(date.getDate()).padStart(2, '0');
@@ -196,9 +215,26 @@ function formatDateValue(date, formatStr) {
             .replace(/A/g, ampm);
     }
 }
-function parseDateValue(dateStr, formatStr) {
+/**
+ * Parses a date string using the specified format string and locale.
+ * Follows vanilla-daterangepicker logic by always using locale.format.
+ *
+ * @param dateStr - The date string to parse
+ * @param formatStr - Format string (e.g., 'DD/MM/YYYY', 'MM/DD/YYYY HH:mm')
+ * @param locale - Optional locale string (e.g., 'es-ES', 'en-US')
+ * @returns Parsed Date object
+ *
+ * @example
+ * ```typescript
+ * const date1 = parseDateValue('15/01/2024', 'DD/MM/YYYY'); // January 15, 2024
+ * const date2 = parseDateValue('01/15/2024 02:30 PM', 'MM/DD/YYYY hh:mm A'); // January 15, 2024 14:30
+ * const date3 = parseDateValue('15/01/2024 14:30', 'DD/MM/YYYY HH:mm', 'es-ES'); // January 15, 2024 14:30
+ * ```
+ */
+function parseDateValue(dateStr, formatStr, locale) {
     try {
-        const parsed = parse(dateStr, formatStr);
+        // Use @formkit/tempo with locale support (following vanilla-daterangepicker pattern)
+        const parsed = parse(dateStr, formatStr, locale);
         if (isValidDate(parsed)) {
             return parsed;
         }
@@ -206,6 +242,7 @@ function parseDateValue(dateStr, formatStr) {
     catch {
         // Fallback to manual parsing
     }
+    // Manual parsing fallback for common formats
     if (formatStr === 'YYYY-MM-DD') {
         const parts = dateStr.split('-');
         if (parts.length === 3) {
@@ -243,6 +280,7 @@ function parseDateValue(dateStr, formatStr) {
             return date;
         }
     }
+    // Final fallback to native Date parsing
     return new Date(dateStr);
 }
 function isSameDate(date1, date2, unit = 'day') {
@@ -255,6 +293,15 @@ function isSameDate(date1, date2, unit = 'day') {
             return isSameMonth(date1, date2);
         case 'year':
             return isSameYear(date1, date2);
+        case 'minute':
+            return (isSameDay(date1, date2) &&
+                date1.getHours() === date2.getHours() &&
+                date1.getMinutes() === date2.getMinutes());
+        case 'second':
+            return (isSameDay(date1, date2) &&
+                date1.getHours() === date2.getHours() &&
+                date1.getMinutes() === date2.getMinutes() &&
+                date1.getSeconds() === date2.getSeconds());
         default:
             return false;
     }
@@ -293,6 +340,7 @@ function isMobileDevice() {
  * ```
  */
 const SPANISH_LOCALE = {
+    locale: 'es-ES',
     direction: 'ltr',
     format: 'DD/MM/YYYY',
     separator: ' - ',
@@ -317,6 +365,136 @@ const SPANISH_LOCALE = {
     ],
     firstDay: 1, // Lunes como primer día
 };
+/**
+ * Spanish locale with time picker support (24-hour format).
+ *
+ * Same as SPANISH_LOCALE but with DD/MM/YYYY HH:mm format for time picker usage.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="SPANISH_LOCALE_WITH_TIME" [timePicker]="true"></ngx-datex>
+ * ```
+ */
+const SPANISH_LOCALE_WITH_TIME = {
+    ...SPANISH_LOCALE,
+    format: 'DD/MM/YYYY HH:mm',
+};
+/**
+ * Spanish locale with time picker support (12-hour format).
+ *
+ * Same as SPANISH_LOCALE but with DD/MM/YYYY hh:mm A format for 12-hour time picker.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="SPANISH_LOCALE_WITH_TIME_12H" [timePicker]="true" [timePicker24Hour]="false"></ngx-datex>
+ * ```
+ */
+const SPANISH_LOCALE_WITH_TIME_12H = {
+    ...SPANISH_LOCALE,
+    format: 'DD/MM/YYYY hh:mm A',
+};
+/**
+ * US English locale configuration.
+ *
+ * Provides English language support with MM/DD/YYYY format,
+ * English day/month names, and Sunday as the first day of the week.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="US_ENGLISH_LOCALE"></ngx-datex>
+ * ```
+ */
+const US_ENGLISH_LOCALE = {
+    locale: 'en-US',
+    direction: 'ltr',
+    format: 'MM/DD/YYYY',
+    separator: ' - ',
+    applyLabel: 'Apply',
+    cancelLabel: 'Cancel',
+    weekLabel: 'W',
+    customRangeLabel: 'Custom Range',
+    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    monthNames: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+    firstDay: 0, // Sunday as first day
+};
+/**
+ * US English locale with time picker support (12-hour format).
+ *
+ * Same as US_ENGLISH_LOCALE but with MM/DD/YYYY hh:mm A format for time picker usage.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="US_ENGLISH_LOCALE_WITH_TIME" [timePicker]="true" [timePicker24Hour]="false"></ngx-datex>
+ * ```
+ */
+const US_ENGLISH_LOCALE_WITH_TIME = {
+    ...US_ENGLISH_LOCALE,
+    format: 'MM/DD/YYYY hh:mm A',
+};
+/**
+ * ISO format locale configuration.
+ *
+ * Provides YYYY-MM-DD format commonly used in APIs and databases,
+ * with English labels and Monday as the first day of the week.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="ISO_LOCALE"></ngx-datex>
+ * ```
+ */
+const ISO_LOCALE = {
+    locale: 'en-US',
+    direction: 'ltr',
+    format: 'YYYY-MM-DD',
+    separator: ' / ',
+    applyLabel: 'Apply',
+    cancelLabel: 'Cancel',
+    weekLabel: 'W',
+    customRangeLabel: 'Custom Range',
+    daysOfWeek: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+    monthNames: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+    firstDay: 1, // Monday as first day
+};
+/**
+ * ISO format locale with time picker support (24-hour format).
+ *
+ * Same as ISO_LOCALE but with YYYY-MM-DD HH:mm format for time picker usage.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="ISO_LOCALE_WITH_TIME" [timePicker]="true"></ngx-datex>
+ * ```
+ */
+const ISO_LOCALE_WITH_TIME = {
+    ...ISO_LOCALE,
+    format: 'YYYY-MM-DD HH:mm',
+};
 /**
  * Default Material Design light theme.
  *
@@ -486,8 +664,8 @@ const DEFAULT_RANGES = {
  *
  * // Update configuration
  * this.datexService.updateConfig({
- *   dateFormat: 'DD/MM/YYYY',
- *   firstDayOfWeek: 1
+ *   firstDayOfWeek: 1,
+ *   businessDaysOnly: true
  * });
  *
  * // Format a date range
@@ -505,9 +683,9 @@ class NgxDatexService {
      * @example
      * ```typescript
      * this.datexService.updateConfig({
-     *   dateFormat: 'YYYY-MM-DD',
      *   firstDayOfWeek: 0, // Sunday
-     *   businessDaysOnly: true
+     *   businessDaysOnly: true,
+     *   showWeekNumbers: true
      * });
      * ```
      */
@@ -1302,11 +1480,20 @@ class NgxDatexCalendarService {
             onLeftMonthChange(maxLeftMonth);
         }
     }
-    setStartDate(startDate, minDate, maxDate, timePicker, timePickerIncrement) {
+    setStartDate(startDate, minDate, maxDate, timePicker, timePickerIncrement, currentStartDate) {
         let newStartDate = new Date(startDate);
         if (!timePicker) {
             newStartDate = startOfDay(newStartDate);
         }
+        else if (currentStartDate && timePicker) {
+            // When timePicker is enabled, preserve existing time if only date is changing
+            if (newStartDate.getFullYear() !== currentStartDate.getFullYear() ||
+                newStartDate.getMonth() !== currentStartDate.getMonth() ||
+                newStartDate.getDate() !== currentStartDate.getDate()) {
+                // Only date changed, preserve time
+                newStartDate.setHours(currentStartDate.getHours(), currentStartDate.getMinutes(), currentStartDate.getSeconds(), currentStartDate.getMilliseconds());
+            }
+        }
         if (timePicker && timePickerIncrement) {
             const minutes = newStartDate.getMinutes();
             const roundedMinutes = Math.round(minutes / timePickerIncrement) * timePickerIncrement;
@@ -1330,11 +1517,20 @@ class NgxDatexCalendarService {
         }
         return newStartDate;
     }
-    setEndDate(endDate, startDate, maxDate, maxSpan, timePicker, timePickerIncrement) {
+    setEndDate(endDate, startDate, maxDate, maxSpan, timePicker, timePickerIncrement, currentEndDate) {
         let newEndDate = new Date(endDate);
         if (!timePicker) {
             newEndDate = endOfDay(newEndDate);
         }
+        else if (currentEndDate && timePicker) {
+            // When timePicker is enabled, preserve existing time if only date is changing
+            if (newEndDate.getFullYear() !== currentEndDate.getFullYear() ||
+                newEndDate.getMonth() !== currentEndDate.getMonth() ||
+                newEndDate.getDate() !== currentEndDate.getDate()) {
+                // Only date changed, preserve time
+                newEndDate.setHours(currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds(), currentEndDate.getMilliseconds());
+            }
+        }
         if (timePicker && timePickerIncrement) {
             const minutes = newEndDate.getMinutes();
             const roundedMinutes = Math.round(minutes / timePickerIncrement) * timePickerIncrement;
@@ -1533,28 +1729,165 @@ class NgxDatex {
      * @example
      * ```typescript
      * const config: NgxDatexConfig = {
-     *   dateFormat: 'DD/MM/YYYY',
      *   firstDayOfWeek: 1,
-     *   businessDaysOnly: true
+     *   businessDaysOnly: true,
+     *   showWeekNumbers: true
      * };
      * ```
      */
     config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
     /**
      * Localization settings for internationalization.
-     * Controls language, date formats, and UI text.
+     * Controls language, date formats, UI text, and regional preferences.
+     *
+     * This is the primary configuration for adapting the date picker to different
+     * languages, regions, and cultural conventions. The most important property
+     * is `format`, which controls how dates are displayed and parsed.
      *
      * @default SPANISH_LOCALE
      *
-     * @example
+     * ## Key Properties:
+     *
+     * - **`format`**: Date format string (REQUIRED for timePicker usage)
+     * - **`locale`**: Locale code for @formkit/tempo formatting
+     * - **`separator`**: Text between start and end dates
+     * - **`daysOfWeek`**: Short day names array
+     * - **`monthNames`**: Full month names array
+     * - **`applyLabel`**: Apply button text
+     * - **`cancelLabel`**: Cancel button text
+     *
+     * ## Format Examples:
+     *
+     * ### Date Only Formats:
      * ```typescript
+     * // European format (DD/MM/YYYY)
+     * const europeanLocale: NgxDatexLocale = {
+     *   locale: 'es-ES',
+     *   format: 'DD/MM/YYYY',        // 15/01/2024
+     *   separator: ' - ',
+     *   daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+     *   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+     *                'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
+     *   applyLabel: 'Aplicar',
+     *   cancelLabel: 'Cancelar',
+     *   firstDay: 1  // Monday first
+     * };
+     *
+     * // US format (MM/DD/YYYY)
+     * const usLocale: NgxDatexLocale = {
+     *   locale: 'en-US',
+     *   format: 'MM/DD/YYYY',        // 01/15/2024
+     *   separator: ' - ',
+     *   daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+     *   monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
+     *                'July', 'August', 'September', 'October', 'November', 'December'],
+     *   applyLabel: 'Apply',
+     *   cancelLabel: 'Cancel',
+     *   firstDay: 0  // Sunday first
+     * };
+     *
+     * // ISO format (YYYY-MM-DD)
+     * const isoLocale: NgxDatexLocale = {
+     *   locale: 'en-US',
+     *   format: 'YYYY-MM-DD',        // 2024-01-15
+     *   separator: ' / ',
+     *   daysOfWeek: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+     *   monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
+     *                'July', 'August', 'September', 'October', 'November', 'December'],
+     *   applyLabel: 'Apply',
+     *   cancelLabel: 'Cancel',
+     *   firstDay: 1  // Monday first
+     * };
+     * ```
+     *
+     * ### Time Picker Formats:
+     * ```typescript
+     * // Spanish with 24-hour time
+     * const spanishWithTime: NgxDatexLocale = {
+     *   locale: 'es-ES',
+     *   format: 'DD/MM/YYYY HH:mm',  // 15/01/2024 14:30
+     *   separator: ' - ',
+     *   daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+     *   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+     *                'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
+     *   applyLabel: 'Aplicar',
+     *   cancelLabel: 'Cancelar'
+     * };
+     *
+     * // US with 12-hour time
+     * const usWithTime: NgxDatexLocale = {
+     *   locale: 'en-US',
+     *   format: 'MM/DD/YYYY hh:mm A', // 01/15/2024 02:30 PM
+     *   separator: ' - ',
+     *   daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+     *   monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
+     *                'July', 'August', 'September', 'October', 'November', 'December'],
+     *   applyLabel: 'Apply',
+     *   cancelLabel: 'Cancel'
+     * };
+     *
+     * // French locale
      * const frenchLocale: NgxDatexLocale = {
+     *   locale: 'fr-FR',
      *   format: 'DD/MM/YYYY',
+     *   separator: ' au ',
      *   daysOfWeek: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
+     *   monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+     *                'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
      *   applyLabel: 'Appliquer',
-     *   cancelLabel: 'Annuler'
+     *   cancelLabel: 'Annuler',
+     *   customRangeLabel: 'Plage personnalisée',
+     *   firstDay: 1
      * };
+     *
+     * // German locale
+     * const germanLocale: NgxDatexLocale = {
+     *   locale: 'de-DE',
+     *   format: 'DD.MM.YYYY',
+     *   separator: ' bis ',
+     *   daysOfWeek: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
+     *   monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
+     *                'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
+     *   applyLabel: 'Anwenden',
+     *   cancelLabel: 'Abbrechen',
+     *   customRangeLabel: 'Benutzerdefiniert',
+     *   firstDay: 1
+     * };
+     * ```
+     *
+     * ## Component Usage:
+     * ```html
+     * <!-- Spanish date picker -->
+     * <ngx-datex [locale]="spanishLocale"></ngx-datex>
+     *
+     * <!-- US date picker with time -->
+     * <ngx-datex
+     *   [locale]="usWithTime"
+     *   [timePicker]="true"
+     *   [timePicker24Hour]="false">
+     * </ngx-datex>
+     *
+     * <!-- French date picker -->
+     * <ngx-datex [locale]="frenchLocale"></ngx-datex>
+     *
+     * <!-- Using predefined locales -->
+     * <ngx-datex [locale]="SPANISH_LOCALE"></ngx-datex>
+     * <ngx-datex [locale]="US_ENGLISH_LOCALE"></ngx-datex>
+     * <ngx-datex [locale]="SPANISH_LOCALE_WITH_TIME"></ngx-datex>
      * ```
+     *
+     * ## Important Notes:
+     *
+     * 1. **TimePicker Format**: When `timePicker=true`, you MUST include time tokens in the format
+     * 2. **Locale Code**: The `locale` property affects @formkit/tempo formatting behavior
+     * 3. **Day Order**: `daysOfWeek` array should match your `firstDay` setting
+     * 4. **Separator**: Used between start and end dates in range display
+     * 5. **Predefined Locales**: Use exported constants like `SPANISH_LOCALE`, `US_ENGLISH_LOCALE`
+     *
+     * @see {@link NgxDatexLocale} for complete interface documentation
+     * @see {@link SPANISH_LOCALE} for default Spanish configuration
+     * @see {@link US_ENGLISH_LOCALE} for US English configuration
+     * @see {@link SPANISH_LOCALE_WITH_TIME} for Spanish with time support
      */
     locale = input(SPANISH_LOCALE, ...(ngDevMode ? [{ debugName: "locale" }] : []));
     /**
@@ -1663,6 +1996,18 @@ class NgxDatex {
      * ```
      */
     showCheckbox = input(false, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
+    /**
+     * Initial checked state of the checkbox.
+     * Only applies when showCheckbox is true.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCheckbox]="true" [checkboxChecked]="true"></ngx-datex>
+     * ```
+     */
+    checkboxChecked = input(false, ...(ngDevMode ? [{ debugName: "checkboxChecked" }] : []));
     /**
      * Position of the checkbox relative to the input.
      *
@@ -2574,17 +2919,18 @@ class NgxDatex {
         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);
+        const locale = this.locale();
+        const format = locale.format || 'DD/MM/YYYY';
+        // Following vanilla-daterangepicker: ALWAYS use locale.format as-is
+        // User must configure format to include time if timePicker is enabled
+        const start = formatDateValue(startDate, format, locale.locale);
         if (this.singleDatePicker()) {
             return start;
         }
         if (!endDate) {
             return start;
         }
-        const end = formatDateValue(endDate, fullFormat);
+        const end = formatDateValue(endDate, format, locale.locale);
         return `${start} - ${end}`;
     }, ...(ngDevMode ? [{ debugName: "formattedSelectedRange" }] : []));
     // Current label for selected range
@@ -2597,15 +2943,16 @@ class NgxDatex {
             return '';
         let customRange = true;
         const ranges = this.ranges();
+        const locale = this.locale();
         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);
+                const startFormatted = formatDateValue(startDate, format, locale.locale);
+                const endFormatted = formatDateValue(endDate, format, locale.locale);
+                const rangeStartFormatted = formatDateValue(rangeStart, format, locale.locale);
+                const rangeEndFormatted = formatDateValue(rangeEnd, format, locale.locale);
                 startMatches = startFormatted === rangeStartFormatted;
                 endMatches = endFormatted === rangeEndFormatted;
             }
@@ -2619,7 +2966,7 @@ class NgxDatex {
             }
         }
         if (customRange) {
-            return this.locale().customRangeLabel || 'Rango Personalizado';
+            return locale.customRangeLabel || 'Rango Personalizado';
         }
         return '';
     }, ...(ngDevMode ? [{ debugName: "currentLabel" }] : []));
@@ -2629,15 +2976,16 @@ class NgxDatex {
         if (!startDate || !endDate)
             return false;
         const ranges = this.ranges();
+        const locale = this.locale();
         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);
+                const startFormatted = formatDateValue(startDate, format, locale.locale);
+                const endFormatted = formatDateValue(endDate, format, locale.locale);
+                const rangeStartFormatted = formatDateValue(rangeStart, format, locale.locale);
+                const rangeEndFormatted = formatDateValue(rangeEnd, format, locale.locale);
                 startMatches = startFormatted === rangeStartFormatted;
                 endMatches = endFormatted === rangeEndFormatted;
             }
@@ -2707,10 +3055,14 @@ class NgxDatex {
             this.currentStartDate = new Date(value.startDate);
             this.currentEndDate = value.endDate ? new Date(value.endDate) : null;
             this._currentValue.set(value);
+            // Initialize old values for change tracking
+            this.oldStartDate = new Date(this.currentStartDate);
+            this.oldEndDate = this.currentEndDate ? new Date(this.currentEndDate) : null;
             if (value.startDate) {
                 this.updateMonthsInView();
             }
             if (this.timePicker()) {
+                // Always update time signals from the provided dates to ensure sync
                 this.updateTimeSignalsFromDate(value.startDate, 'start');
                 if (value.endDate) {
                     this.updateTimeSignalsFromDate(value.endDate, 'end');
@@ -2771,12 +3123,13 @@ class NgxDatex {
     openCalendar() {
         if (this.disabled() || this.readonly() || this._isOpen())
             return;
-        // Save old values for potential cancellation
+        // Save old values for potential cancellation (following vanilla daterangepicker)
         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);
+        // Sync time signals with current dates when opening (don't modify the dates)
         if (this.timePicker()) {
             this.updateTimeSignalsFromDate(this.currentStartDate, 'start');
             if (this.currentEndDate) {
@@ -2799,22 +3152,33 @@ class NgxDatex {
     closeCalendar() {
         this._isOpen.set(false);
         this._hoverDate.set(null);
-        // Handle incomplete selection
+        // Handle incomplete selection (following vanilla daterangepicker logic)
         if (!this.currentEndDate && this.oldStartDate && this.oldEndDate) {
             this.currentStartDate = this.oldStartDate;
             this.currentEndDate = this.oldEndDate;
             this.updateCurrentValue();
         }
+        // Note: Do NOT emit dateChange here - it should only be emitted via apply() or autoApply
+        // This prevents double emission when apply() -> closeCalendar() is called
+        this.updateElement();
+        this.overlayService.closeOverlay();
+        this.closeEvent.emit();
+    }
+    /**
+     * Closes the calendar and checks for pending changes to emit.
+     * Used when calendar is closed without explicit apply (ESC, click outside, etc.)
+     */
+    closeCalendarWithChangeCheck() {
+        // Check for changes using appropriate precision based on timePicker
         if (this.oldStartDate && this.oldEndDate) {
-            const hasChanges = !isSameDate(this.currentStartDate, this.oldStartDate, 'day') ||
-                (this.currentEndDate && !isSameDate(this.currentEndDate, this.oldEndDate, 'day'));
+            const precision = this.timePicker() ? 'minute' : 'day';
+            const hasChanges = !isSameDate(this.currentStartDate, this.oldStartDate, precision) ||
+                (this.currentEndDate && !isSameDate(this.currentEndDate, this.oldEndDate, precision));
             if (hasChanges && this.currentEndDate) {
                 this.emitValueChange();
             }
         }
-        this.updateElement();
-        this.overlayService.closeOverlay();
-        this.closeEvent.emit();
+        this.closeCalendar();
     }
     /**
      * Applies the current selection and closes the calendar.
@@ -2831,6 +3195,34 @@ class NgxDatex {
     apply() {
         if (!this.canApplyValue())
             return;
+        // Ensure time values are applied to the dates before closing
+        if (this.timePicker()) {
+            const startTime = this._startTime();
+            const endTime = this._endTime();
+            // Apply start time
+            let startHour = startTime.hour;
+            if (!this.timePicker24Hour()) {
+                if (startTime.ampm === 'PM' && startHour < 12)
+                    startHour += 12;
+                if (startTime.ampm === 'AM' && startHour === 12)
+                    startHour = 0;
+            }
+            this.currentStartDate.setHours(startHour, startTime.minute, 0, 0);
+            // Apply end time if exists
+            if (this.currentEndDate) {
+                let endHour = endTime.hour;
+                if (!this.timePicker24Hour()) {
+                    if (endTime.ampm === 'PM' && endHour < 12)
+                        endHour += 12;
+                    if (endTime.ampm === 'AM' && endHour === 12)
+                        endHour = 0;
+                }
+                this.currentEndDate.setHours(endHour, endTime.minute, 0, 0);
+            }
+            this.updateCurrentValue();
+        }
+        // Emit value change when applying (following vanilla daterangepicker behavior)
+        this.emitValueChange();
         this.updateElement();
         this.closeCalendar();
     }
@@ -2948,16 +3340,62 @@ class NgxDatex {
         const range = ranges[label];
         if (!range)
             return;
+        const locale = this.locale();
+        // Handle custom range selection (following vanilla daterangepicker logic)
+        if (label === (locale.customRangeLabel || 'Rango Personalizado')) {
+            this.selectCustomRange();
+            return;
+        }
         const [rangeStart, rangeEnd] = range;
-        this.currentStartDate = startOfDay(new Date(rangeStart));
-        this.currentEndDate = endOfDay(new Date(rangeEnd));
+        if (this.timePicker()) {
+            // When timePicker is enabled, preserve the exact time from the range
+            this.currentStartDate = new Date(rangeStart);
+            this.currentEndDate = new Date(rangeEnd);
+            // Update time signals to match the selected range
+            this.updateTimeSignalsFromDate(this.currentStartDate, 'start');
+            this.updateTimeSignalsFromDate(this.currentEndDate, 'end');
+        }
+        else {
+            // When timePicker is disabled, use start/end of day (following vanilla daterangepicker)
+            this.currentStartDate = startOfDay(new Date(rangeStart));
+            this.currentEndDate = endOfDay(new Date(rangeEnd));
+        }
         this.updateCurrentValue();
         this.updateMonthsInView();
+        // Following vanilla daterangepicker: predefined ranges always auto-apply
+        // regardless of autoApply setting (except custom range)
         this.apply();
     }
     selectCustomRange() {
         // Custom range selection logic - mainly visual
     }
+    /**
+     * Gets the current checkbox state.
+     *
+     * @returns Current checkbox checked state
+     *
+     * @example
+     * ```typescript
+     * const isChecked = this.datePicker.getCheckboxValue();
+     * ```
+     */
+    getCheckboxValue() {
+        return this._checkboxValue();
+    }
+    /**
+     * Sets the checkbox state programmatically.
+     *
+     * @param checked - New checkbox state
+     *
+     * @example
+     * ```typescript
+     * this.datePicker.setCheckboxValue(true);
+     * ```
+     */
+    setCheckboxValue(checked) {
+        this._checkboxValue.set(checked);
+        this.checkboxChange.emit(checked);
+    }
     // Event handlers
     onInputClick() {
         if (this.readonly())
@@ -2975,6 +3413,18 @@ class NgxDatex {
     onInputBlur() {
         this._inputFocused.set(false);
         this.elementChanged();
+        // Following vanilla daterangepicker: check if there were actual changes
+        // and emit dateChange only if autoApply is enabled and values actually changed
+        if (this.effectiveAutoApply() && this.oldStartDate && this.oldEndDate) {
+            const precision = this.timePicker() ? 'minute' : 'day';
+            const hasChanges = !isSameDate(this.currentStartDate, this.oldStartDate, precision) ||
+                (this.currentEndDate && !isSameDate(this.currentEndDate, this.oldEndDate, precision));
+            if (hasChanges && this.currentEndDate && !this._isOpen()) {
+                // Only emit if autoApply is enabled, there are actual changes, and calendar is closed
+                this.emitValueChange();
+            }
+        }
+        this.onTouched();
     }
     onInputKeydown(event) {
         if (event.key === 'Enter' || event.key === ' ') {
@@ -2983,12 +3433,12 @@ class NgxDatex {
         }
         else if (event.key === 'Escape') {
             if (!this._inputFocused() || (this._inputFocused() && this._isOpen())) {
-                this.closeCalendar();
+                this.closeCalendarWithChangeCheck();
             }
         }
         else if (event.key === 'Tab' || event.key === 'Enter') {
             if (this._isOpen()) {
-                this.closeCalendar();
+                this.closeCalendarWithChangeCheck();
             }
         }
     }
@@ -3008,7 +3458,7 @@ class NgxDatex {
     }
     onCalendarKeydown(event) {
         if (event.key === 'Escape' && !this._inputFocused()) {
-            this.closeCalendar();
+            this.closeCalendarWithChangeCheck();
         }
     }
     onCheckboxChange(checked) {
@@ -3288,32 +3738,74 @@ class NgxDatex {
         else {
             this.initializeWithInputDates(inputStartDate, inputEndDate);
         }
+        // Initialize old values for change tracking
+        this.oldStartDate = new Date(this.currentStartDate);
+        this.oldEndDate = this.currentEndDate ? new Date(this.currentEndDate) : null;
+        // Initialize checkbox state from input
+        this._checkboxValue.set(this.checkboxChecked());
         this.datexService.updateConfig(this.config());
         this.datexService.setLocale(this.locale());
         this.updateElement();
     }
     initializeDefaultDates() {
         const today = new Date();
+        // Following vanilla daterangepicker: always start with startOf/endOf day
+        // moment().startOf('day') = 00:00:00
+        // moment().endOf('day') = 23:59:59
         const startDate = startOfDay(today);
         const endDate = this.singleDatePicker() ? startOfDay(today) : endOfDay(today);
+        // When timePicker is enabled, preserve these default times
+        // (vanilla daterangepicker doesn't modify them when timePicker=true)
+        if (this.timePicker()) {
+            // Initialize time signals from the default dates
+            this.updateTimeSignalsFromDate(startDate, 'start');
+            if (endDate) {
+                this.updateTimeSignalsFromDate(endDate, 'end');
+            }
+        }
         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);
+        let startDate;
+        let endDate;
+        if (this.timePicker()) {
+            // When timePicker is enabled, preserve the full date-time or use appropriate defaults
+            if (inputStartDate) {
+                startDate = new Date(inputStartDate);
+                // If the input date doesn't have specific time (is at 00:00:00), keep it as is
+                // Otherwise preserve the provided time
+            }
+            else {
+                startDate = new Date();
+                startDate.setHours(0, 0, 0, 0); // Default start time: 00:00
+            }
+            if (this.singleDatePicker()) {
+                endDate = new Date(startDate);
+            }
+            else if (inputEndDate) {
+                endDate = new Date(inputEndDate);
+                // If the input end date doesn't have specific time (is at 00:00:00), set to end of day
+                if (endDate.getHours() === 0 && endDate.getMinutes() === 0 && endDate.getSeconds() === 0) {
+                    endDate.setHours(23, 59, 0, 0);
+                }
+            }
+            else {
+                endDate = new Date(startDate);
+                endDate.setHours(23, 59, 0, 0); // Default end time: 23:59
+            }
+        }
+        else {
+            // When timePicker is disabled, use start/end of day
+            startDate = inputStartDate ? startOfDay(new Date(inputStartDate)) : startOfDay(new Date());
+            endDate = this.singleDatePicker()
+                ? new Date(startDate)
+                : inputEndDate
+                    ? endOfDay(new Date(inputEndDate))
+                    : endOfDay(startDate);
+        }
         this.currentStartDate = startDate;
         this.currentEndDate = endDate;
         this.initializeCalendars(startDate, endDate);
@@ -3372,7 +3864,7 @@ class NgxDatex {
         }
     }
     setStartDate(startDate) {
-        const newStartDate = this.calendarService.setStartDate(startDate, this.minDate(), this.maxDate(), this.timePicker(), this.timePickerIncrement());
+        const newStartDate = this.calendarService.setStartDate(startDate, this.minDate(), this.maxDate(), this.timePicker(), this.timePickerIncrement(), this.currentStartDate);
         this.currentStartDate = newStartDate;
         this.updateCurrentValue();
         this.updateMonthsInView();
@@ -3381,7 +3873,7 @@ class NgxDatex {
         }
     }
     setEndDate(endDate) {
-        const newEndDate = this.calendarService.setEndDate(endDate, this.currentStartDate, this.maxDate(), this.maxSpan(), this.timePicker(), this.timePickerIncrement());
+        const newEndDate = this.calendarService.setEndDate(endDate, this.currentStartDate, this.maxDate(), this.maxSpan(), this.timePicker(), this.timePickerIncrement(), this.currentEndDate);
         this.previousRightTime = new Date(newEndDate);
         this.currentEndDate = newEndDate;
         this.updateCurrentValue();
@@ -3397,13 +3889,14 @@ class NgxDatex {
         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);
+        const locale = this.locale();
+        const format = locale.format || 'DD/MM/YYYY';
+        const separator = locale.separator || ' - ';
+        // Following vanilla-daterangepicker: ALWAYS use locale.format as-is
+        // User must configure format to include time if timePicker is enabled
+        let newValue = formatDateValue(startDate, format, locale.locale);
         if (!this.singleDatePicker() && endDate) {
-            newValue += separator + formatDateValue(endDate, fullFormat);
+            newValue += separator + formatDateValue(endDate, format, locale.locale);
         }
         this._displayValue.set(newValue);
     }
@@ -3428,6 +3921,9 @@ class NgxDatex {
                 endDate: this.currentEndDate,
             });
         }
+        // Update old values after successful emission to track future changes
+        this.oldStartDate = new Date(this.currentStartDate);
+        this.oldEndDate = this.currentEndDate ? new Date(this.currentEndDate) : null;
     }
     updateView() {
         if (this.timePicker()) {
@@ -3473,12 +3969,13 @@ class NgxDatex {
         }
         this._errorMessage.set('');
         try {
+            // Following vanilla daterangepicker: elementChanged only updates internal state
+            // It does NOT emit change events - those are only emitted via apply()
             this.setStartDate(start);
             this.setEndDate(end);
             this.updateView();
-            if (!this._isOpen()) {
-                this.emitValueChange();
-            }
+            // Do NOT emit dateChange here - following vanilla daterangepicker behavior
+            // dateChange should only be emitted via apply() or autoApply scenarios
         }
         catch {
             this._errorMessage.set('Fecha fuera del rango permitido');
@@ -3487,9 +3984,10 @@ class NgxDatex {
     parseInputDate(dateStr) {
         if (!dateStr)
             return null;
-        const format = this.locale().format || 'DD/MM/YYYY';
+        const locale = this.locale();
+        const format = locale.format || 'DD/MM/YYYY';
         try {
-            const date = parseDateValue(dateStr, format);
+            const date = parseDateValue(dateStr, format, locale.locale);
             if (isValidDate(date)) {
                 return date;
             }
@@ -3504,14 +4002,14 @@ class NgxDatex {
         }
     }
     createOverlay() {
-        this.overlayService.createOverlay(this.inputElement, this.calendarTemplate, this.viewContainerRef, this.locale(), this.opens(), this.drops(), () => this.closeCalendar(), (event) => {
+        this.overlayService.createOverlay(this.inputElement, this.calendarTemplate, this.viewContainerRef, this.locale(), this.opens(), this.drops(), () => this.closeCalendarWithChangeCheck(), (event) => {
             if (event.key === 'Escape' && !this._inputFocused()) {
-                this.closeCalendar();
+                this.closeCalendarWithChangeCheck();
             }
         }, (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: [
+    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 }, checkboxChecked: { classPropertyName: "checkboxChecked", publicName: "checkboxChecked", 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),
@@ -3520,7 +4018,7 @@ class NgxDatex {
             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 });
+        ], 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        (click)=\"$event.stopPropagation()\"\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        (click)=\"$event.stopPropagation()\"\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,
@@ -3540,14 +4038,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         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"] }]
+                    ], 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        (click)=\"$event.stopPropagation()\"\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        (click)=\"$event.stopPropagation()\"\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"] }] } });
+            }], 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 }] }], checkboxChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxChecked", 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
@@ -3558,5 +4056,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * 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 };
+export { DEFAULT_RANGES, ISO_LOCALE, ISO_LOCALE_WITH_TIME, MATERIAL_LIGHT_THEME, NgxDatex, NgxDatexCalendarService, NgxDatexOverlayService, NgxDatexService, NgxDatexTimePickerService, SPANISH_LOCALE, SPANISH_LOCALE_WITH_TIME, SPANISH_LOCALE_WITH_TIME_12H, US_ENGLISH_LOCALE, US_ENGLISH_LOCALE_WITH_TIME, addDays, addMonths, endOfDay, formatDateValue, getStartOfMonth, getStartOfWeek, isBeforeDate, isMobileDevice, isSameDate, isSameDay, isSameMonth, isSameYear, isValidDate, parseDateValue, startOfDay, startOfMonth, startOfWeek };
 //# sourceMappingURL=ngx-datex.mjs.map