@lesterarte/sefin-ui 0.0.9 → 0.0.10

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -3099,6 +3099,461 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+class DatepickerComponent {
+    cdr;
+    ngZone;
+    containerRef;
+    calendarRef;
+    textfieldRef;
+    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
+    valueChange = new EventEmitter();
+    dateSelected = new EventEmitter();
+    isOpen = false;
+    currentMonth = new Date();
+    selectedDate = null;
+    rangeStart = null;
+    rangeEnd = null;
+    displayValue = '';
+    hoveredDate = null;
+    monthsES = [
+        'Enero',
+        'Febrero',
+        'Marzo',
+        'Abril',
+        'Mayo',
+        'Junio',
+        'Julio',
+        'Agosto',
+        'Septiembre',
+        'Octubre',
+        'Noviembre',
+        'Diciembre',
+    ];
+    daysES = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];
+    daysESFull = [
+        'Domingo',
+        'Lunes',
+        'Martes',
+        'Miércoles',
+        'Jueves',
+        'Viernes',
+        'Sábado',
+    ];
+    constructor(cdr, ngZone) {
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+    }
+    ngOnInit() {
+        this.initializeDates();
+        this.updateDisplayValue();
+    }
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            this.initializeDates();
+            this.updateDisplayValue();
+        }
+        if (changes['mode']) {
+            this.initializeDates();
+            this.updateDisplayValue();
+        }
+    }
+    ngOnDestroy() { }
+    onClickOutside(event) {
+        if (this.containerRef?.nativeElement && this.isOpen) {
+            const clickedInside = this.containerRef.nativeElement.contains(event.target);
+            if (!clickedInside) {
+                this.closeCalendar();
+            }
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape' && this.isOpen) {
+            this.closeCalendar();
+        }
+    }
+    initializeDates() {
+        if (this.mode === 'single') {
+            this.selectedDate = this.value instanceof Date ? new Date(this.value) : null;
+            this.rangeStart = null;
+            this.rangeEnd = null;
+            if (this.selectedDate) {
+                this.currentMonth = new Date(this.selectedDate);
+            }
+        }
+        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 (this.rangeStart) {
+                this.currentMonth = new Date(this.rangeStart);
+            }
+            else if (this.rangeEnd) {
+                this.currentMonth = new Date(this.rangeEnd);
+            }
+        }
+    }
+    toggleCalendar() {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (this.isOpen && !this.currentMonth) {
+            this.currentMonth = new Date();
+        }
+    }
+    closeCalendar() {
+        this.isOpen = false;
+        this.hoveredDate = null;
+    }
+    onInputClick() {
+        if (!this.disabled) {
+            this.toggleCalendar();
+        }
+    }
+    onInputFocus() {
+        if (!this.disabled) {
+            this.toggleCalendar();
+        }
+    }
+    getDaysInMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+    }
+    getFirstDayOfMonth(date) {
+        const firstDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+        return this.firstDayOfWeek === 1 ? (firstDay === 0 ? 6 : firstDay - 1) : firstDay;
+    }
+    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++) {
+            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));
+        }
+        return days;
+    }
+    isToday(date) {
+        const today = new Date();
+        return (date.getDate() === today.getDate() &&
+            date.getMonth() === today.getMonth() &&
+            date.getFullYear() === today.getFullYear());
+    }
+    isSelected(date) {
+        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());
+        }
+        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));
+            }
+            if (this.rangeStart) {
+                return (date.getDate() === this.rangeStart.getDate() &&
+                    date.getMonth() === this.rangeStart.getMonth() &&
+                    date.getFullYear() === this.rangeStart.getFullYear());
+            }
+            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;
+            }
+            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;
+    }
+    isDisabled(date) {
+        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);
+            if (dateCompare > max)
+                return true;
+        }
+        return false;
+    }
+    onDayClick(date, event) {
+        if (!date)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.isDisabled(date)) {
+            this.selectDate(date);
+        }
+    }
+    selectDate(date) {
+        if (this.isDisabled(date))
+            return;
+        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)
+            if (this.textfieldRef) {
+                this.textfieldRef.writeValue(formattedDate);
+            }
+            // Force change detection
+            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
+            this.valueChange.emit(this.value);
+            this.dateSelected.emit(this.value);
+            // Close calendar after a delay to ensure value is updated and visible
+            setTimeout(() => {
+                this.closeCalendar();
+            }, 100);
+        }
+        else {
+            if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
+                // Start new range
+                this.rangeStart = new Date(date);
+                this.rangeEnd = null;
+                this.hoveredDate = null;
+                const formattedDate = this.formatDate(this.rangeStart);
+                const displayText = `${formattedDate} - ...`;
+                this.displayValue = displayText;
+                this.updateTextField(displayText);
+            }
+            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);
+            }
+        }
+    }
+    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);
+        }
+        // Force change detection
+        this.cdr.detectChanges();
+    }
+    onDateHover(date) {
+        if (this.mode === 'range' && this.rangeStart && !this.rangeEnd) {
+            this.hoveredDate = new Date(date);
+        }
+    }
+    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);
+    }
+    goToToday() {
+        const today = new Date();
+        if (!this.isDisabled(today)) {
+            this.selectDate(today);
+        }
+    }
+    clearValue() {
+        if (this.mode === 'single') {
+            this.selectedDate = null;
+            this.value = null;
+        }
+        else {
+            this.rangeStart = null;
+            this.rangeEnd = null;
+            this.value = null;
+        }
+        this.updateDisplayValue();
+        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();
+        switch (this.format) {
+            case 'DD/MM/YYYY':
+                return `${day}/${month}/${year}`;
+            case 'MM/DD/YYYY':
+                return `${month}/${day}/${year}`;
+            case 'YYYY-MM-DD':
+                return `${year}-${month}-${day}`;
+            case 'DD-MM-YYYY':
+                return `${day}-${month}-${year}`;
+            default:
+                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);
+            }
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    getMonthName() {
+        return this.monthsES[this.currentMonth.getMonth()];
+    }
+    getYear() {
+        return this.currentMonth.getFullYear();
+    }
+    getDayNames() {
+        const days = [...this.daysES];
+        if (this.firstDayOfWeek === 1) {
+            // Move Sunday to the end
+            const sunday = days.shift();
+            if (sunday)
+                days.push(sunday);
+        }
+        return days;
+    }
+    get containerClasses() {
+        return [
+            'sefin-datepicker',
+            this.isOpen ? 'sefin-datepicker--open' : '',
+            this.class,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get todayDate() {
+        return new Date();
+    }
+    isTodayDisabled() {
+        return this.isDisabled(this.todayDate);
+    }
+    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 });
+}
+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"] }]
+        }], 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 }]
+            }], value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], showTodayButton: [{
+                type: Input
+            }], showClearButton: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], dateSelected: [{
+                type: Output
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
 /**
  * Molecules index
  */
@@ -3114,5 +3569,5 @@ const STYLES_PATH = './styles/index.scss';
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
+export { AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
 //# sourceMappingURL=lesterarte-sefin-ui.mjs.map