@lesterarte/sefin-ui 0.0.10 → 0.0.12-dev.0

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -3103,21 +3103,19 @@ class DatepickerComponent {
     cdr;
     ngZone;
     containerRef;
-    calendarRef;
     textfieldRef;
+    calendarRef;
     value = null;
     placeholder = 'Selecciona una fecha';
     disabled = false;
     size = 'md';
-    class = '';
     format = 'DD/MM/YYYY';
     mode = 'single';
     minDate;
     maxDate;
     showTodayButton = true;
     showClearButton = true;
-    locale = 'es-ES';
-    firstDayOfWeek = 1; // 0 = Sunday, 1 = Monday
+    firstDayOfWeek = 1;
     valueChange = new EventEmitter();
     dateSelected = new EventEmitter();
     isOpen = false;
@@ -3126,8 +3124,8 @@ class DatepickerComponent {
     rangeStart = null;
     rangeEnd = null;
     displayValue = '';
-    hoveredDate = null;
-    monthsES = [
+    viewMode = 'month';
+    months = [
         'Enero',
         'Febrero',
         'Marzo',
@@ -3141,42 +3139,49 @@ class DatepickerComponent {
         'Noviembre',
         'Diciembre',
     ];
-    daysES = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];
-    daysESFull = [
-        'Domingo',
-        'Lunes',
-        'Martes',
-        'Miércoles',
-        'Jueves',
-        'Viernes',
-        'Sábado',
-    ];
+    days = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];
     constructor(cdr, ngZone) {
         this.cdr = cdr;
         this.ngZone = ngZone;
+        this.currentMonth.setDate(1);
     }
     ngOnInit() {
         this.initializeDates();
-        this.updateDisplayValue();
+    }
+    ngAfterViewInit() {
+        // Asegurar que el textfield esté disponible antes de actualizar el display
+        this.updateDisplay();
+        this.cdr.detectChanges();
     }
     ngOnChanges(changes) {
-        if (changes['value']) {
-            this.initializeDates();
-            this.updateDisplayValue();
-        }
-        if (changes['mode']) {
+        if (changes['value'] || changes['mode']) {
             this.initializeDates();
-            this.updateDisplayValue();
+            // Usar setTimeout para asegurar que el textfield esté disponible
+            setTimeout(() => {
+                this.updateDisplay();
+            }, 0);
         }
     }
-    ngOnDestroy() { }
+    justOpened = false;
+    isSelectingDate = false;
     onClickOutside(event) {
-        if (this.containerRef?.nativeElement && this.isOpen) {
-            const clickedInside = this.containerRef.nativeElement.contains(event.target);
-            if (!clickedInside) {
+        // No procesar si el calendario está cerrado, se está seleccionando una fecha, o se acaba de abrir
+        if (!this.isOpen || this.isSelectingDate || this.justOpened) {
+            return;
+        }
+        const target = event.target;
+        // Verificar si el click es dentro del calendario o del contenedor - si es así, no cerrar
+        if (this.calendarRef?.nativeElement?.contains(target) ||
+            this.containerRef?.nativeElement?.contains(target)) {
+            return;
+        }
+        // Click está fuera - cerrar el calendario con un pequeño delay
+        setTimeout(() => {
+            // Verificar nuevamente antes de cerrar
+            if (this.isOpen && !this.isSelectingDate && !this.justOpened) {
                 this.closeCalendar();
             }
-        }
+        }, 150);
     }
     onKeyDown(event) {
         if (event.key === 'Escape' && this.isOpen) {
@@ -3185,23 +3190,53 @@ class DatepickerComponent {
     }
     initializeDates() {
         if (this.mode === 'single') {
-            this.selectedDate = this.value instanceof Date ? new Date(this.value) : null;
+            // Manejar diferentes tipos de valor
+            if (this.value instanceof Date) {
+                this.selectedDate = new Date(this.value);
+                // Normalizar la fecha para evitar problemas de comparación
+                this.selectedDate.setHours(0, 0, 0, 0);
+            }
+            else if (this.value && typeof this.value === 'object' && 'getTime' in this.value) {
+                // Caso especial: objeto Date que no es instancia de Date
+                this.selectedDate = new Date(this.value);
+                this.selectedDate.setHours(0, 0, 0, 0);
+            }
+            else {
+                this.selectedDate = null;
+            }
             this.rangeStart = null;
             this.rangeEnd = null;
             if (this.selectedDate) {
-                this.currentMonth = new Date(this.selectedDate);
+                this.currentMonth = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), 1);
+            }
+            else {
+                this.currentMonth = new Date();
+                this.currentMonth.setDate(1);
             }
         }
         else {
             const range = this.value;
             this.selectedDate = null;
-            this.rangeStart = range?.start ? new Date(range.start) : null;
-            this.rangeEnd = range?.end ? new Date(range.end) : null;
+            if (range?.start) {
+                this.rangeStart = new Date(range.start);
+                this.rangeStart.setHours(0, 0, 0, 0);
+            }
+            else {
+                this.rangeStart = null;
+            }
+            if (range?.end) {
+                this.rangeEnd = new Date(range.end);
+                this.rangeEnd.setHours(0, 0, 0, 0);
+            }
+            else {
+                this.rangeEnd = null;
+            }
             if (this.rangeStart) {
-                this.currentMonth = new Date(this.rangeStart);
+                this.currentMonth = new Date(this.rangeStart.getFullYear(), this.rangeStart.getMonth(), 1);
             }
-            else if (this.rangeEnd) {
-                this.currentMonth = new Date(this.rangeEnd);
+            else {
+                this.currentMonth = new Date();
+                this.currentMonth.setDate(1);
             }
         }
     }
@@ -3209,200 +3244,313 @@ class DatepickerComponent {
         if (this.disabled)
             return;
         this.isOpen = !this.isOpen;
-        if (this.isOpen && !this.currentMonth) {
-            this.currentMonth = new Date();
-        }
+        this.cdr.detectChanges();
     }
     closeCalendar() {
-        this.isOpen = false;
-        this.hoveredDate = null;
+        if (this.isOpen) {
+            this.isOpen = false;
+            this.viewMode = 'month';
+            this.cdr.detectChanges();
+        }
     }
-    onInputClick() {
-        if (!this.disabled) {
-            this.toggleCalendar();
+    toggleViewMode(event) {
+        if (event) {
+            event.stopPropagation();
         }
+        this.viewMode = this.viewMode === 'month' ? 'year' : 'month';
+        this.cdr.detectChanges();
     }
-    onInputFocus() {
+    getYears() {
+        const currentYear = this.currentMonth.getFullYear();
+        const years = [];
+        const startYear = currentYear - 12;
+        const endYear = currentYear + 12;
+        for (let year = startYear; year <= endYear; year++) {
+            years.push(year);
+        }
+        return years;
+    }
+    selectYear(year, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.currentMonth = new Date(year, this.currentMonth.getMonth(), 1);
+        this.viewMode = 'month';
+        this.cdr.detectChanges();
+    }
+    getMonths() {
+        return this.months.map((name, index) => ({ index, name }));
+    }
+    selectMonth(monthIndex) {
+        this.currentMonth = new Date(this.currentMonth.getFullYear(), monthIndex, 1);
+        this.viewMode = 'month';
+        this.cdr.detectChanges();
+    }
+    onTextFieldClick(event) {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
         if (!this.disabled) {
+            // Establecer justOpened ANTES de abrir para prevenir que onClickOutside lo cierre
+            this.justOpened = true;
+            // Toggle calendar inmediatamente
             this.toggleCalendar();
+            // Reset flag after a delay
+            setTimeout(() => {
+                this.justOpened = false;
+            }, 300);
         }
     }
-    getDaysInMonth(date) {
-        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+    onTextFieldFocus(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (!this.disabled && !this.isOpen) {
+            // Establecer justOpened ANTES de abrir para prevenir que onClickOutside lo cierre
+            this.justOpened = true;
+            // Toggle calendar inmediatamente
+            this.toggleCalendar();
+            // Reset flag after a delay
+            setTimeout(() => {
+                this.justOpened = false;
+            }, 300);
+        }
     }
-    getFirstDayOfMonth(date) {
-        const firstDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
-        return this.firstDayOfWeek === 1 ? (firstDay === 0 ? 6 : firstDay - 1) : firstDay;
+    onTrailingIconClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.displayValue && this.showClearButton && !this.disabled) {
+            this.clearValue();
+        }
+        else if (!this.disabled) {
+            // Establecer justOpened ANTES de abrir para prevenir que onClickOutside lo cierre
+            this.justOpened = true;
+            this.toggleCalendar();
+            // Reset flag after a delay
+            setTimeout(() => {
+                this.justOpened = false;
+            }, 300);
+        }
     }
     getCalendarDays() {
         const days = [];
-        const daysInMonth = this.getDaysInMonth(this.currentMonth);
-        const firstDay = this.getFirstDayOfMonth(this.currentMonth);
-        // Add empty cells for days before the first day of the month
-        for (let i = 0; i < firstDay; i++) {
+        const year = this.currentMonth.getFullYear();
+        const month = this.currentMonth.getMonth();
+        const firstDay = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const offset = this.firstDayOfWeek === 1
+            ? firstDay === 0
+                ? 6
+                : firstDay - 1
+            : firstDay;
+        for (let i = 0; i < offset; i++) {
             days.push(null);
         }
-        // Add days of the month
         for (let day = 1; day <= daysInMonth; day++) {
-            days.push(new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth(), day));
+            days.push(new Date(year, month, day));
         }
         return days;
     }
     isToday(date) {
         const today = new Date();
-        return (date.getDate() === today.getDate() &&
-            date.getMonth() === today.getMonth() &&
-            date.getFullYear() === today.getFullYear());
+        today.setHours(0, 0, 0, 0);
+        const dateCompare = new Date(date);
+        dateCompare.setHours(0, 0, 0, 0);
+        return dateCompare.getTime() === today.getTime();
     }
     isSelected(date) {
+        if (!date)
+            return false;
+        const dateCompare = new Date(date);
+        dateCompare.setHours(0, 0, 0, 0);
         if (this.mode === 'single') {
             if (!this.selectedDate)
                 return false;
-            return (date.getDate() === this.selectedDate.getDate() &&
-                date.getMonth() === this.selectedDate.getMonth() &&
-                date.getFullYear() === this.selectedDate.getFullYear());
+            const selected = new Date(this.selectedDate);
+            selected.setHours(0, 0, 0, 0);
+            return dateCompare.getTime() === selected.getTime();
         }
         else {
-            if (!this.rangeStart && !this.rangeEnd)
-                return false;
             if (this.rangeStart && this.rangeEnd) {
-                return ((date >= this.rangeStart && date <= this.rangeEnd) ||
-                    (date >= this.rangeEnd && date <= this.rangeStart));
+                const start = new Date(this.rangeStart);
+                start.setHours(0, 0, 0, 0);
+                const end = new Date(this.rangeEnd);
+                end.setHours(0, 0, 0, 0);
+                return (dateCompare.getTime() === start.getTime() ||
+                    dateCompare.getTime() === end.getTime());
             }
             if (this.rangeStart) {
-                return (date.getDate() === this.rangeStart.getDate() &&
-                    date.getMonth() === this.rangeStart.getMonth() &&
-                    date.getFullYear() === this.rangeStart.getFullYear());
+                const start = new Date(this.rangeStart);
+                start.setHours(0, 0, 0, 0);
+                return dateCompare.getTime() === start.getTime();
             }
             return false;
         }
     }
     isInRange(date) {
-        if (this.mode !== 'range')
-            return false;
-        if (!this.rangeStart || !this.rangeEnd) {
-            if (this.rangeStart && this.hoveredDate) {
-                const start = this.rangeStart < this.hoveredDate ? this.rangeStart : this.hoveredDate;
-                const end = this.rangeStart < this.hoveredDate ? this.hoveredDate : this.rangeStart;
-                return date >= start && date <= end;
-            }
+        if (this.mode !== 'range' || !this.rangeStart || !this.rangeEnd)
             return false;
-        }
-        const start = this.rangeStart < this.rangeEnd ? this.rangeStart : this.rangeEnd;
-        const end = this.rangeStart < this.rangeEnd ? this.rangeEnd : this.rangeStart;
-        return date >= start && date <= end;
+        const dateCompare = new Date(date);
+        dateCompare.setHours(0, 0, 0, 0);
+        const start = new Date(this.rangeStart);
+        start.setHours(0, 0, 0, 0);
+        const end = new Date(this.rangeEnd);
+        end.setHours(0, 0, 0, 0);
+        const startTime = start.getTime();
+        const endTime = end.getTime();
+        const dateTime = dateCompare.getTime();
+        return ((dateTime >= startTime && dateTime <= endTime) ||
+            (dateTime >= endTime && dateTime <= startTime));
     }
     isDisabled(date) {
+        const dateCompare = new Date(date);
+        dateCompare.setHours(0, 0, 0, 0);
         if (this.minDate) {
             const min = new Date(this.minDate);
             min.setHours(0, 0, 0, 0);
-            const dateCompare = new Date(date);
-            dateCompare.setHours(0, 0, 0, 0);
             if (dateCompare < min)
                 return true;
         }
         if (this.maxDate) {
             const max = new Date(this.maxDate);
-            max.setHours(23, 59, 59, 999);
-            const dateCompare = new Date(date);
-            dateCompare.setHours(23, 59, 59, 999);
+            max.setHours(0, 0, 0, 0);
             if (dateCompare > max)
                 return true;
         }
         return false;
     }
-    onDayClick(date, event) {
-        if (!date)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        if (!this.isDisabled(date)) {
-            this.selectDate(date);
+    onDayMouseDown(day, event) {
+        if (event) {
+            // Stop propagation to prevent onClickOutside from firing
+            event.stopPropagation();
+            // Set flag IMMEDIATELY to prevent onClickOutside from closing calendar
+            this.isSelectingDate = true;
         }
     }
-    selectDate(date) {
-        if (this.isDisabled(date))
+    selectDate(date, event) {
+        if (event) {
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            event.preventDefault();
+        }
+        if (this.isDisabled(date)) {
+            this.isSelectingDate = false;
             return;
+        }
+        // Flag should already be set from mousedown, but ensure it's set
+        this.isSelectingDate = true;
+        // Normalize date to avoid time comparison issues
+        const normalizedDate = new Date(date);
+        normalizedDate.setHours(0, 0, 0, 0);
         if (this.mode === 'single') {
-            this.selectedDate = new Date(date);
-            this.value = new Date(date);
-            // Calculate and set display value
-            const formattedDate = this.formatDate(this.selectedDate);
-            // Update displayValue
-            this.displayValue = formattedDate;
-            // Update textfield using writeValue (ControlValueAccessor method)
+            // Check if clicking the same date - if so, just close calendar
+            if (this.selectedDate) {
+                const selected = new Date(this.selectedDate);
+                selected.setHours(0, 0, 0, 0);
+                if (normalizedDate.getTime() === selected.getTime()) {
+                    // Same date clicked, just close calendar
+                    this.isSelectingDate = false;
+                    this.closeCalendar();
+                    return;
+                }
+            }
+            // Update state immediately - do this synchronously
+            this.selectedDate = new Date(normalizedDate);
+            this.value = new Date(normalizedDate);
+            // Calculate display value immediately
+            const newDisplayValue = this.formatDate(this.selectedDate);
+            this.displayValue = newDisplayValue;
+            // Update textfield - usar setTimeout para asegurar que el DOM esté listo
             if (this.textfieldRef) {
-                this.textfieldRef.writeValue(formattedDate);
+                setTimeout(() => {
+                    if (this.textfieldRef) {
+                        this.textfieldRef.writeValue(newDisplayValue);
+                    }
+                }, 0);
             }
-            // Force change detection
+            // Force change detection immediately
             this.cdr.detectChanges();
-            // One more update after Angular processes the change
-            setTimeout(() => {
-                if (this.textfieldRef) {
-                    this.textfieldRef.writeValue(formattedDate);
-                }
-                this.cdr.detectChanges();
-            }, 10);
-            // Emit events
+            // Emit events synchronously to ensure they're processed
             this.valueChange.emit(this.value);
             this.dateSelected.emit(this.value);
-            // Close calendar after a delay to ensure value is updated and visible
+            // Close calendar after a delay to ensure everything is updated
+            // Keep flag set during this time to prevent onClickOutside from interfering
             setTimeout(() => {
-                this.closeCalendar();
-            }, 100);
+                if (this.isOpen) {
+                    this.closeCalendar();
+                }
+                // Reset flag after closing
+                this.isSelectingDate = false;
+            }, 250);
         }
         else {
             if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
-                // Start new range
-                this.rangeStart = new Date(date);
+                this.rangeStart = new Date(normalizedDate);
                 this.rangeEnd = null;
-                this.hoveredDate = null;
-                const formattedDate = this.formatDate(this.rangeStart);
-                const displayText = `${formattedDate} - ...`;
-                this.displayValue = displayText;
-                this.updateTextField(displayText);
+                this.value = { start: this.rangeStart, end: null };
+                this.updateDisplay();
+                this.cdr.detectChanges();
+                this.ngZone.run(() => {
+                    this.valueChange.emit(this.value);
+                });
+                this.isSelectingDate = false;
             }
             else {
-                // Complete range
-                this.rangeEnd = new Date(date);
-                const range = {
-                    start: this.rangeStart,
-                    end: this.rangeEnd,
-                };
-                this.value = range;
-                const formattedValue = `${this.formatDate(range.start)} - ${this.formatDate(range.end)}`;
-                this.displayValue = formattedValue;
-                this.updateTextField(formattedValue);
-                this.valueChange.emit(this.value);
-                this.dateSelected.emit(this.value);
-                // Close calendar after a delay to ensure value is updated
-                setTimeout(() => {
-                    this.closeCalendar();
-                }, 100);
+                this.rangeEnd = new Date(normalizedDate);
+                if (this.rangeStart.getTime() > this.rangeEnd.getTime()) {
+                    [this.rangeStart, this.rangeEnd] = [this.rangeEnd, this.rangeStart];
+                }
+                this.value = { start: this.rangeStart, end: this.rangeEnd };
+                this.updateDisplay();
+                this.cdr.detectChanges();
+                this.ngZone.run(() => {
+                    this.valueChange.emit(this.value);
+                    this.dateSelected.emit(this.value);
+                });
+                this.ngZone.runOutsideAngular(() => {
+                    setTimeout(() => {
+                        this.ngZone.run(() => {
+                            if (this.isOpen) {
+                                this.closeCalendar();
+                            }
+                            this.isSelectingDate = false;
+                        });
+                    }, 150);
+                });
             }
         }
     }
-    updateTextField(value) {
-        // This method is kept for compatibility but the main update is done in selectDate
-        // Update displayValue
-        this.displayValue = value;
-        // Update via writeValue
-        if (this.textfieldRef) {
-            this.textfieldRef.writeValue(value);
+    trackByDate(index, day) {
+        if (!day)
+            return `empty-${index}`;
+        return `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`;
+    }
+    previousMonth(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.viewMode === 'year') {
+            const currentYear = this.currentMonth.getFullYear();
+            this.currentMonth = new Date(currentYear - 25, this.currentMonth.getMonth(), 1);
+        }
+        else {
+            this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1, 1);
         }
-        // Force change detection
         this.cdr.detectChanges();
     }
-    onDateHover(date) {
-        if (this.mode === 'range' && this.rangeStart && !this.rangeEnd) {
-            this.hoveredDate = new Date(date);
+    nextMonth(event) {
+        if (event) {
+            event.stopPropagation();
         }
-    }
-    previousMonth() {
-        this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1, 1);
-    }
-    nextMonth() {
-        this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1, 1);
+        if (this.viewMode === 'year') {
+            const currentYear = this.currentMonth.getFullYear();
+            this.currentMonth = new Date(currentYear + 25, this.currentMonth.getMonth(), 1);
+        }
+        else {
+            this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1, 1);
+        }
+        this.cdr.detectChanges();
     }
     goToToday() {
         const today = new Date();
@@ -3420,14 +3568,12 @@ class DatepickerComponent {
             this.rangeEnd = null;
             this.value = null;
         }
-        this.updateDisplayValue();
+        this.updateDisplay();
         this.valueChange.emit(null);
         this.dateSelected.emit(null);
         this.closeCalendar();
     }
     formatDate(date) {
-        if (!date)
-            return '';
         const day = String(date.getDate()).padStart(2, '0');
         const month = String(date.getMonth() + 1).padStart(2, '0');
         const year = date.getFullYear();
@@ -3444,42 +3590,46 @@ class DatepickerComponent {
                 return `${day}/${month}/${year}`;
         }
     }
-    updateDisplayValue() {
-        const newValue = this.mode === 'single'
-            ? (this.selectedDate ? this.formatDate(this.selectedDate) : '')
-            : (() => {
-                const range = this.value;
-                if (range?.start && range?.end) {
-                    return `${this.formatDate(range.start)} - ${this.formatDate(range.end)}`;
-                }
-                else if (range?.start) {
-                    return `${this.formatDate(range.start)} - ...`;
-                }
-                else {
-                    return '';
-                }
-            })();
-        // Update displayValue (for internal use)
-        this.displayValue = newValue;
-        // Update textfield using writeValue (ControlValueAccessor method)
-        // Use setTimeout to ensure ViewChild is available
-        setTimeout(() => {
-            if (this.textfieldRef) {
-                this.textfieldRef.writeValue(newValue);
+    updateDisplay() {
+        let newValue = '';
+        if (this.mode === 'single') {
+            newValue = this.selectedDate
+                ? this.formatDate(this.selectedDate)
+                : '';
+        }
+        else {
+            const range = this.value;
+            if (range?.start && range?.end) {
+                newValue = `${this.formatDate(range.start)} - ${this.formatDate(range.end)}`;
             }
-            this.cdr.detectChanges();
-        }, 0);
+            else if (range?.start) {
+                newValue = `${this.formatDate(range.start)} - ...`;
+            }
+            else {
+                newValue = '';
+            }
+        }
+        this.displayValue = newValue;
+        // Update textfield value using writeValue
+        // Asegurar que el textfield esté disponible antes de actualizar
+        if (this.textfieldRef) {
+            // Usar setTimeout para asegurar que el DOM esté listo
+            setTimeout(() => {
+                if (this.textfieldRef) {
+                    this.textfieldRef.writeValue(this.displayValue);
+                }
+            }, 0);
+        }
     }
     getMonthName() {
-        return this.monthsES[this.currentMonth.getMonth()];
+        return this.months[this.currentMonth.getMonth()];
     }
     getYear() {
         return this.currentMonth.getFullYear();
     }
     getDayNames() {
-        const days = [...this.daysES];
+        const days = [...this.days];
         if (this.firstDayOfWeek === 1) {
-            // Move Sunday to the end
             const sunday = days.shift();
             if (sunday)
                 days.push(sunday);
@@ -3487,35 +3637,29 @@ class DatepickerComponent {
         return days;
     }
     get containerClasses() {
-        return [
-            'sefin-datepicker',
-            this.isOpen ? 'sefin-datepicker--open' : '',
-            this.class,
-        ]
-            .filter(Boolean)
-            .join(' ');
+        return `sefin-datepicker sefin-datepicker--${this.size} ${this.isOpen ? 'sefin-datepicker--open' : ''}`.trim();
     }
-    get todayDate() {
-        return new Date();
+    getCurrentYear() {
+        return new Date().getFullYear();
     }
-    isTodayDisabled() {
-        return this.isDisabled(this.todayDate);
+    isCurrentYear(year) {
+        return year === this.getCurrentYear();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DatepickerComponent, isStandalone: true, selector: "sefin-datepicker", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", class: "class", format: "format", mode: "mode", minDate: "minDate", maxDate: "maxDate", showTodayButton: "showTodayButton", showClearButton: "showClearButton", locale: "locale", firstDayOfWeek: "firstDayOfWeek" }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }, { propertyName: "textfieldRef", first: true, predicate: ["textfieldRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n  <div class=\"sefin-datepicker__wrapper\">\n    <sefin-textfield\n      #textfieldRef\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [readonly]=\"true\"\n      [trailingIcon]=\"'calendar'\"\n      (click)=\"onInputClick()\"\n      (focus)=\"onInputFocus()\"\n      class=\"sefin-datepicker__input\"\n    ></sefin-textfield>\n    <div class=\"sefin-datepicker__actions\">\n      <button\n        *ngIf=\"displayValue && showClearButton && !disabled\"\n        type=\"button\"\n        class=\"sefin-datepicker__clear\"\n        (click)=\"clearValue()\"\n        aria-label=\"Limpiar fecha\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 4L4 12M4 4L12 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"isOpen\"\n    #calendarRef\n    class=\"sefin-datepicker__calendar\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"sefin-datepicker__calendar-header\">\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__nav-button\"\n        (click)=\"previousMonth()\"\n        aria-label=\"Mes anterior\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M10 12L6 8L10 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n      <div class=\"sefin-datepicker__month-year\">\n        <span class=\"sefin-datepicker__month\">{{ getMonthName() }}</span>\n        <span class=\"sefin-datepicker__year\">{{ getYear() }}</span>\n      </div>\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__nav-button\"\n        (click)=\"nextMonth()\"\n        aria-label=\"Mes siguiente\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4L10 8L6 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n\n    <div class=\"sefin-datepicker__calendar-body\">\n      <div class=\"sefin-datepicker__weekdays\">\n        <div\n          *ngFor=\"let dayName of getDayNames()\"\n          class=\"sefin-datepicker__weekday\"\n        >\n          {{ dayName }}\n        </div>\n      </div>\n      <div class=\"sefin-datepicker__days\">\n        <button\n          *ngFor=\"let day of getCalendarDays(); let i = index\"\n          type=\"button\"\n          class=\"sefin-datepicker__day\"\n          [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n          [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n          [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n          [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n          [class.sefin-datepicker__day--empty]=\"!day\"\n          [disabled]=\"!day || (day && isDisabled(day))\"\n          (click)=\"day && !isDisabled(day) && selectDate(day); $event.stopPropagation(); $event.preventDefault()\"\n          (mouseenter)=\"day && onDateHover(day)\"\n          [attr.aria-label]=\"day ? formatDate(day) : ''\"\n        >\n          <span *ngIf=\"day\">{{ day.getDate() }}</span>\n        </button>\n      </div>\n    </div>\n\n    <div *ngIf=\"showTodayButton\" class=\"sefin-datepicker__calendar-footer\">\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__today-button\"\n        (click)=\"goToToday()\"\n        [disabled]=\"isTodayDisabled()\"\n      >\n        Hoy\n      </button>\n    </div>\n  </div>\n</div>\n\n", styles: [".sefin-datepicker{position:relative;width:100%}.sefin-datepicker__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer}.sefin-datepicker__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs);z-index:1;pointer-events:none}.sefin-datepicker__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out;pointer-events:all}.sefin-datepicker__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-datepicker__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__clear svg{width:16px;height:16px}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px}.sefin-datepicker__calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md)}.sefin-datepicker__nav-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__nav-button:hover{background-color:var(--sefin-color-surface-hover)}.sefin-datepicker__nav-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav-button svg{width:16px;height:16px}.sefin-datepicker__month-year{display:flex;align-items:center;gap:var(--sefin-spacing-xs);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text)}.sefin-datepicker__month{text-transform:capitalize}.sefin-datepicker__year{color:var(--sefin-color-text-secondary)}.sefin-datepicker__calendar-body{margin-bottom:var(--sefin-spacing-sm)}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background-color:var(--sefin-color-surface-hover)}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--selected{background-color:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold)}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--in-range{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary)}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__calendar-footer{display:flex;align-items:center;justify-content:center;padding-top:var(--sefin-spacing-sm);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today-button{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus)}.sefin-datepicker__today-button:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield__input{border-color:var(--sefin-color-border-focus)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextFieldComponent, selector: "sefin-textfield", inputs: ["variant", "size", "type", "placeholder", "hint", "errorMessage", "required", "disabled", "readonly", "maxLength", "minLength", "pattern", "leadingIcon", "trailingIcon", "showCounter", "autocomplete", "name", "id", "class", "customValidator"], outputs: ["valueChange", "focused", "blurred", "trailingIconClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DatepickerComponent, isStandalone: true, selector: "sefin-datepicker", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", format: "format", mode: "mode", minDate: "minDate", maxDate: "maxDate", showTodayButton: "showTodayButton", showClearButton: "showClearButton", firstDayOfWeek: "firstDayOfWeek" }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "textfieldRef", first: true, predicate: ["textfieldRef"], descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n  <div class=\"sefin-datepicker__wrapper\">\n    <div\n      (click)=\"onTextFieldClick($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (mouseup)=\"$event.stopPropagation()\"\n      class=\"sefin-datepicker__input-wrapper\"\n    >\n      <sefin-textfield\n        #textfieldRef\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [size]=\"size\"\n        [readonly]=\"true\"\n        [trailingIcon]=\"\n          displayValue && showClearButton && !disabled ? 'x' : 'calendar'\n        \"\n        (focused)=\"onTextFieldFocus($event)\"\n        (trailingIconClick)=\"onTrailingIconClick($event)\"\n        class=\"sefin-datepicker__input\"\n      ></sefin-textfield>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"isOpen\"\n    #calendarRef\n    class=\"sefin-datepicker__calendar\"\n    (click)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.stopPropagation()\"\n  >\n    <div class=\"sefin-datepicker__header\">\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__nav\"\n        (click)=\"previousMonth($event)\"\n      >\n        <sefin-icon name=\"chevron-left\" size=\"sm\"></sefin-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__month-year-btn\"\n        (click)=\"toggleViewMode($event)\"\n      >\n        <span *ngIf=\"viewMode === 'month'\"\n          >{{ getMonthName() }} {{ getYear() }}</span\n        >\n        <span *ngIf=\"viewMode === 'year'\">{{ getYear() }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__nav\"\n        (click)=\"nextMonth($event)\"\n      >\n        <sefin-icon name=\"chevron-right\" size=\"sm\"></sefin-icon>\n      </button>\n    </div>\n\n    <!-- Vista de Meses -->\n    <div *ngIf=\"viewMode === 'month'\" class=\"sefin-datepicker__month-view\">\n      <div class=\"sefin-datepicker__weekdays\">\n        <div\n          *ngFor=\"let day of getDayNames()\"\n          class=\"sefin-datepicker__weekday\"\n        >\n          {{ day }}\n        </div>\n      </div>\n\n      <div class=\"sefin-datepicker__days\">\n        <button\n          *ngFor=\"let day of getCalendarDays(); trackBy: trackByDate\"\n          type=\"button\"\n          class=\"sefin-datepicker__day\"\n          [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n          [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n          [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n          [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n          [class.sefin-datepicker__day--empty]=\"!day\"\n          [disabled]=\"!day || (day && isDisabled(day))\"\n          (mousedown)=\"day && !isDisabled(day) && onDayMouseDown(day, $event)\"\n          (click)=\"day && !isDisabled(day) && selectDate(day, $event)\"\n        >\n          {{ day ? day.getDate() : \"\" }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Vista de A\u00F1os -->\n    <div *ngIf=\"viewMode === 'year'\" class=\"sefin-datepicker__year-view\">\n      <div class=\"sefin-datepicker__years-grid\">\n        <button\n          *ngFor=\"let year of getYears()\"\n          type=\"button\"\n          class=\"sefin-datepicker__year\"\n          [class.sefin-datepicker__year--current]=\"isCurrentYear(year)\"\n          [class.sefin-datepicker__year--selected]=\"\n            year === currentMonth.getFullYear()\n          \"\n          (click)=\"selectYear(year, $event)\"\n        >\n          {{ year }}\n        </button>\n      </div>\n    </div>\n\n    <div\n      *ngIf=\"showTodayButton && viewMode === 'month'\"\n      class=\"sefin-datepicker__footer\"\n    >\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__today\"\n        (click)=\"goToToday()\"\n      >\n        Hoy\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sefin-datepicker{position:relative;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.sefin-datepicker *{font-family:inherit}.sefin-datepicker__wrapper{position:relative;width:100%}.sefin-datepicker__input-wrapper{width:100%;cursor:pointer;position:relative}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield{font-family:inherit;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer!important;font-family:inherit}.sefin-datepicker__input ::ng-deep .sefin-textfield__trailing-icon{cursor:pointer!important;pointer-events:auto}.sefin-datepicker__input ::ng-deep .sefin-textfield__wrapper{cursor:pointer}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:1000;background:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md);padding-bottom:var(--sefin-spacing-sm);border-bottom:1px solid var(--sefin-color-border)}.sefin-datepicker__nav{width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text);transition:all .2s ease-in-out}.sefin-datepicker__nav:hover:not(:disabled){background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__nav:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav:disabled{opacity:.4;cursor:not-allowed}.sefin-datepicker__month-year-btn{padding:var(--sefin-spacing-xs) var(--sefin-spacing-sm);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-transform:capitalize;cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__month-year-btn:hover{background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__month-year-btn:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-sm);padding-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background:var(--sefin-color-surface-hover);cursor:pointer}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);z-index:1;cursor:pointer}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--selected:hover{background:var(--sefin-color-primary-dark);cursor:pointer}.sefin-datepicker__day--in-range{background:var(--sefin-color-primary-light);color:var(--sefin-color-primary);border-radius:0;cursor:pointer}.sefin-datepicker__day--in-range:first-child{border-top-left-radius:var(--sefin-radius-sm);border-bottom-left-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--in-range:last-child{border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__footer{display:flex;align-items:center;justify-content:center;margin-top:var(--sefin-spacing-md);padding-top:var(--sefin-spacing-md);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today:hover:not(:disabled){background:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus);color:var(--sefin-color-primary)}.sefin-datepicker__today:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__year-view{padding:var(--sefin-spacing-sm) 0}.sefin-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sefin-spacing-xs);max-height:300px;overflow-y:auto}.sefin-datepicker__year{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;text-align:center}.sefin-datepicker__year:hover{background:var(--sefin-color-surface-hover)}.sefin-datepicker__year--current{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary);cursor:pointer}.sefin-datepicker__year--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);cursor:pointer}.sefin-datepicker__year--selected:hover{cursor:pointer}.sefin-datepicker__year:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield .sefin-textfield__border{border-color:var(--sefin-color-border-focus)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }, { kind: "component", type: TextFieldComponent, selector: "sefin-textfield", inputs: ["variant", "size", "type", "placeholder", "hint", "errorMessage", "required", "disabled", "readonly", "maxLength", "minLength", "pattern", "leadingIcon", "trailingIcon", "showCounter", "autocomplete", "name", "id", "class", "customValidator"], outputs: ["valueChange", "focused", "blurred", "trailingIconClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sefin-datepicker', standalone: true, imports: [CommonModule, FormsModule, TextFieldComponent, IconComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n  <div class=\"sefin-datepicker__wrapper\">\n    <sefin-textfield\n      #textfieldRef\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [readonly]=\"true\"\n      [trailingIcon]=\"'calendar'\"\n      (click)=\"onInputClick()\"\n      (focus)=\"onInputFocus()\"\n      class=\"sefin-datepicker__input\"\n    ></sefin-textfield>\n    <div class=\"sefin-datepicker__actions\">\n      <button\n        *ngIf=\"displayValue && showClearButton && !disabled\"\n        type=\"button\"\n        class=\"sefin-datepicker__clear\"\n        (click)=\"clearValue()\"\n        aria-label=\"Limpiar fecha\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 4L4 12M4 4L12 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"isOpen\"\n    #calendarRef\n    class=\"sefin-datepicker__calendar\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"sefin-datepicker__calendar-header\">\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__nav-button\"\n        (click)=\"previousMonth()\"\n        aria-label=\"Mes anterior\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M10 12L6 8L10 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n      <div class=\"sefin-datepicker__month-year\">\n        <span class=\"sefin-datepicker__month\">{{ getMonthName() }}</span>\n        <span class=\"sefin-datepicker__year\">{{ getYear() }}</span>\n      </div>\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__nav-button\"\n        (click)=\"nextMonth()\"\n        aria-label=\"Mes siguiente\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4L10 8L6 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n\n    <div class=\"sefin-datepicker__calendar-body\">\n      <div class=\"sefin-datepicker__weekdays\">\n        <div\n          *ngFor=\"let dayName of getDayNames()\"\n          class=\"sefin-datepicker__weekday\"\n        >\n          {{ dayName }}\n        </div>\n      </div>\n      <div class=\"sefin-datepicker__days\">\n        <button\n          *ngFor=\"let day of getCalendarDays(); let i = index\"\n          type=\"button\"\n          class=\"sefin-datepicker__day\"\n          [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n          [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n          [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n          [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n          [class.sefin-datepicker__day--empty]=\"!day\"\n          [disabled]=\"!day || (day && isDisabled(day))\"\n          (click)=\"day && !isDisabled(day) && selectDate(day); $event.stopPropagation(); $event.preventDefault()\"\n          (mouseenter)=\"day && onDateHover(day)\"\n          [attr.aria-label]=\"day ? formatDate(day) : ''\"\n        >\n          <span *ngIf=\"day\">{{ day.getDate() }}</span>\n        </button>\n      </div>\n    </div>\n\n    <div *ngIf=\"showTodayButton\" class=\"sefin-datepicker__calendar-footer\">\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__today-button\"\n        (click)=\"goToToday()\"\n        [disabled]=\"isTodayDisabled()\"\n      >\n        Hoy\n      </button>\n    </div>\n  </div>\n</div>\n\n", styles: [".sefin-datepicker{position:relative;width:100%}.sefin-datepicker__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer}.sefin-datepicker__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs);z-index:1;pointer-events:none}.sefin-datepicker__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out;pointer-events:all}.sefin-datepicker__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-datepicker__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__clear svg{width:16px;height:16px}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px}.sefin-datepicker__calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md)}.sefin-datepicker__nav-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__nav-button:hover{background-color:var(--sefin-color-surface-hover)}.sefin-datepicker__nav-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav-button svg{width:16px;height:16px}.sefin-datepicker__month-year{display:flex;align-items:center;gap:var(--sefin-spacing-xs);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text)}.sefin-datepicker__month{text-transform:capitalize}.sefin-datepicker__year{color:var(--sefin-color-text-secondary)}.sefin-datepicker__calendar-body{margin-bottom:var(--sefin-spacing-sm)}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background-color:var(--sefin-color-surface-hover)}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--selected{background-color:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold)}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--in-range{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary)}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__calendar-footer{display:flex;align-items:center;justify-content:center;padding-top:var(--sefin-spacing-sm);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today-button{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus)}.sefin-datepicker__today-button:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield__input{border-color:var(--sefin-color-border-focus)}\n"] }]
+            args: [{ selector: 'sefin-datepicker', standalone: true, imports: [CommonModule, IconComponent, TextFieldComponent], template: "<div [class]=\"containerClasses\" #containerRef>\n  <div class=\"sefin-datepicker__wrapper\">\n    <div\n      (click)=\"onTextFieldClick($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (mouseup)=\"$event.stopPropagation()\"\n      class=\"sefin-datepicker__input-wrapper\"\n    >\n      <sefin-textfield\n        #textfieldRef\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [size]=\"size\"\n        [readonly]=\"true\"\n        [trailingIcon]=\"\n          displayValue && showClearButton && !disabled ? 'x' : 'calendar'\n        \"\n        (focused)=\"onTextFieldFocus($event)\"\n        (trailingIconClick)=\"onTrailingIconClick($event)\"\n        class=\"sefin-datepicker__input\"\n      ></sefin-textfield>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"isOpen\"\n    #calendarRef\n    class=\"sefin-datepicker__calendar\"\n    (click)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.stopPropagation()\"\n  >\n    <div class=\"sefin-datepicker__header\">\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__nav\"\n        (click)=\"previousMonth($event)\"\n      >\n        <sefin-icon name=\"chevron-left\" size=\"sm\"></sefin-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__month-year-btn\"\n        (click)=\"toggleViewMode($event)\"\n      >\n        <span *ngIf=\"viewMode === 'month'\"\n          >{{ getMonthName() }} {{ getYear() }}</span\n        >\n        <span *ngIf=\"viewMode === 'year'\">{{ getYear() }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__nav\"\n        (click)=\"nextMonth($event)\"\n      >\n        <sefin-icon name=\"chevron-right\" size=\"sm\"></sefin-icon>\n      </button>\n    </div>\n\n    <!-- Vista de Meses -->\n    <div *ngIf=\"viewMode === 'month'\" class=\"sefin-datepicker__month-view\">\n      <div class=\"sefin-datepicker__weekdays\">\n        <div\n          *ngFor=\"let day of getDayNames()\"\n          class=\"sefin-datepicker__weekday\"\n        >\n          {{ day }}\n        </div>\n      </div>\n\n      <div class=\"sefin-datepicker__days\">\n        <button\n          *ngFor=\"let day of getCalendarDays(); trackBy: trackByDate\"\n          type=\"button\"\n          class=\"sefin-datepicker__day\"\n          [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n          [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n          [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n          [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n          [class.sefin-datepicker__day--empty]=\"!day\"\n          [disabled]=\"!day || (day && isDisabled(day))\"\n          (mousedown)=\"day && !isDisabled(day) && onDayMouseDown(day, $event)\"\n          (click)=\"day && !isDisabled(day) && selectDate(day, $event)\"\n        >\n          {{ day ? day.getDate() : \"\" }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Vista de A\u00F1os -->\n    <div *ngIf=\"viewMode === 'year'\" class=\"sefin-datepicker__year-view\">\n      <div class=\"sefin-datepicker__years-grid\">\n        <button\n          *ngFor=\"let year of getYears()\"\n          type=\"button\"\n          class=\"sefin-datepicker__year\"\n          [class.sefin-datepicker__year--current]=\"isCurrentYear(year)\"\n          [class.sefin-datepicker__year--selected]=\"\n            year === currentMonth.getFullYear()\n          \"\n          (click)=\"selectYear(year, $event)\"\n        >\n          {{ year }}\n        </button>\n      </div>\n    </div>\n\n    <div\n      *ngIf=\"showTodayButton && viewMode === 'month'\"\n      class=\"sefin-datepicker__footer\"\n    >\n      <button\n        type=\"button\"\n        class=\"sefin-datepicker__today\"\n        (click)=\"goToToday()\"\n      >\n        Hoy\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sefin-datepicker{position:relative;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.sefin-datepicker *{font-family:inherit}.sefin-datepicker__wrapper{position:relative;width:100%}.sefin-datepicker__input-wrapper{width:100%;cursor:pointer;position:relative}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield{font-family:inherit;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer!important;font-family:inherit}.sefin-datepicker__input ::ng-deep .sefin-textfield__trailing-icon{cursor:pointer!important;pointer-events:auto}.sefin-datepicker__input ::ng-deep .sefin-textfield__wrapper{cursor:pointer}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:1000;background:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md);padding-bottom:var(--sefin-spacing-sm);border-bottom:1px solid var(--sefin-color-border)}.sefin-datepicker__nav{width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text);transition:all .2s ease-in-out}.sefin-datepicker__nav:hover:not(:disabled){background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__nav:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav:disabled{opacity:.4;cursor:not-allowed}.sefin-datepicker__month-year-btn{padding:var(--sefin-spacing-xs) var(--sefin-spacing-sm);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-transform:capitalize;cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__month-year-btn:hover{background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__month-year-btn:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-sm);padding-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background:var(--sefin-color-surface-hover);cursor:pointer}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);z-index:1;cursor:pointer}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--selected:hover{background:var(--sefin-color-primary-dark);cursor:pointer}.sefin-datepicker__day--in-range{background:var(--sefin-color-primary-light);color:var(--sefin-color-primary);border-radius:0;cursor:pointer}.sefin-datepicker__day--in-range:first-child{border-top-left-radius:var(--sefin-radius-sm);border-bottom-left-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--in-range:last-child{border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__footer{display:flex;align-items:center;justify-content:center;margin-top:var(--sefin-spacing-md);padding-top:var(--sefin-spacing-md);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today:hover:not(:disabled){background:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus);color:var(--sefin-color-primary)}.sefin-datepicker__today:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__year-view{padding:var(--sefin-spacing-sm) 0}.sefin-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sefin-spacing-xs);max-height:300px;overflow-y:auto}.sefin-datepicker__year{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;text-align:center}.sefin-datepicker__year:hover{background:var(--sefin-color-surface-hover)}.sefin-datepicker__year--current{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary);cursor:pointer}.sefin-datepicker__year--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);cursor:pointer}.sefin-datepicker__year--selected:hover{cursor:pointer}.sefin-datepicker__year:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield .sefin-textfield__border{border-color:var(--sefin-color-border-focus)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { containerRef: [{
                 type: ViewChild,
                 args: ['containerRef', { static: false }]
-            }], calendarRef: [{
-                type: ViewChild,
-                args: ['calendarRef', { static: false }]
             }], textfieldRef: [{
                 type: ViewChild,
                 args: ['textfieldRef', { static: false }]
+            }], calendarRef: [{
+                type: ViewChild,
+                args: ['calendarRef', { static: false }]
             }], value: [{
                 type: Input
             }], placeholder: [{
@@ -3524,8 +3668,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], size: [{
                 type: Input
-            }], class: [{
-                type: Input
             }], format: [{
                 type: Input
             }], mode: [{
@@ -3538,8 +3680,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], showClearButton: [{
                 type: Input
-            }], locale: [{
-                type: Input
             }], firstDayOfWeek: [{
                 type: Input
             }], valueChange: [{