ngx-datex 1.0.1 → 1.0.2

package/fesm2022/ngx-datex.mjs

@@ -1996,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.
      *
@@ -3043,6 +3055,9 @@ 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();
             }
@@ -3086,7 +3101,6 @@ class NgxDatex {
      * ```
      */
     toggle() {
-        console.log('se ejecuta toggle');
         if (this.disabled() || this.readonly())
             return;
         if (this._isOpen()) {
@@ -3136,19 +3150,25 @@ class NgxDatex {
      * ```
      */
     closeCalendar() {
-        console.log('ouscerrando');
         this._isOpen.set(false);
         this._hoverDate.set(null);
-        console.log(!this.currentEndDate && this.oldStartDate && this.oldEndDate);
-        console.log(this.currentEndDate, this.oldStartDate, this.oldEndDate);
         // Handle incomplete selection (following vanilla daterangepicker logic)
         if (!this.currentEndDate && this.oldStartDate && this.oldEndDate) {
             this.currentStartDate = this.oldStartDate;
             this.currentEndDate = this.oldEndDate;
             this.updateCurrentValue();
-            return;
         }
-        console.log('segunda vez se ejecuta');
+        // 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 precision = this.timePicker() ? 'minute' : 'day';
@@ -3158,9 +3178,7 @@ class NgxDatex {
                 this.emitValueChange();
             }
         }
-        this.updateElement();
-        this.overlayService.closeOverlay();
-        this.closeEvent.emit();
+        this.closeCalendar();
     }
     /**
      * Applies the current selection and closes the calendar.
@@ -3203,7 +3221,8 @@ class NgxDatex {
             }
             this.updateCurrentValue();
         }
-        console.log('apply');
+        // Emit value change when applying (following vanilla daterangepicker behavior)
+        this.emitValueChange();
         this.updateElement();
         this.closeCalendar();
     }
@@ -3218,7 +3237,6 @@ class NgxDatex {
      * ```
      */
     cancel() {
-        console.log('calcelll');
         if (this.oldStartDate && this.oldEndDate) {
             this.currentStartDate = this.oldStartDate;
             this.currentEndDate = this.oldEndDate;
@@ -3322,6 +3340,12 @@ 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;
         if (this.timePicker()) {
             // When timePicker is enabled, preserve the exact time from the range
@@ -3332,17 +3356,46 @@ class NgxDatex {
             this.updateTimeSignalsFromDate(this.currentEndDate, 'end');
         }
         else {
-            // When timePicker is disabled, use start/end of day
+            // 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())
@@ -3360,21 +3413,32 @@ 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) {
-        console.log('aquuiii');
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             this.toggle();
         }
         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();
             }
         }
     }
@@ -3394,8 +3458,7 @@ class NgxDatex {
     }
     onCalendarKeydown(event) {
         if (event.key === 'Escape' && !this._inputFocused()) {
-            console.log('close outside');
-            this.closeCalendar();
+            this.closeCalendarWithChangeCheck();
         }
     }
     onCheckboxChange(checked) {
@@ -3675,6 +3738,11 @@ 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();
@@ -3837,7 +3905,6 @@ class NgxDatex {
             startDate: this.currentStartDate,
             endDate: this.currentEndDate,
         };
-        console.log(value, 'updateCurrentValue ');
         this._currentValue.set(value);
     }
     emitValueChange() {
@@ -3854,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()) {
@@ -3885,9 +3955,7 @@ class NgxDatex {
         const dateString = inputValue.split(separator);
         let start = null;
         let end = null;
-        console.log(dateString);
         if (dateString.length === 2) {
-            console.log(this.parseInputDate(dateString[1].trim()));
             start = this.parseInputDate(dateString[0].trim());
             end = this.parseInputDate(dateString[1].trim());
         }
@@ -3901,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');
@@ -3916,7 +3985,6 @@ class NgxDatex {
         if (!dateStr)
             return null;
         const locale = this.locale();
-        console.log(locale);
         const format = locale.format || 'DD/MM/YYYY';
         try {
             const date = parseDateValue(dateStr, format, locale.locale);
@@ -3934,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),
@@ -3950,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,
@@ -3970,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