sapenlinea-components 0.0.10 → 0.0.12

package/fesm2022/sapenlinea-components.mjs

@@ -1,117 +1,45 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, forwardRef, Component, EventEmitter, Output, Input, HostListener } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { input, output, signal, computed, forwardRef, Component, EventEmitter, Output, Input, HostListener, effect } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 class DateTimeFilter {
     elementRef;
     ngZone;
-    mode = input('date', ...(ngDevMode ? [{ debugName: "mode" }] : []));
-    placeholder = input('Seleccionar fecha', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
-    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
-    filter = input.required(...(ngDevMode ? [{ debugName: "filter" }] : []));
+    // Inputs
+    filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    // Outputs
     dateSelected = output();
-    filters = [
-        { label: 'Fecha inicio', value: 'inicio', type: 'date' },
-        { label: 'Fecha fin', value: 'fin', type: 'date' },
-        { label: 'Fecha Nacimiento', value: 'born', type: 'date' },
-    ];
     dateChange = output();
+    // Internal State
+    activeFilterType = signal(null, ...(ngDevMode ? [{ debugName: "activeFilterType" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     selectedDate = signal(null, ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
-    // Navegación del calendario
+    // Computed Properties based on active filter
+    activeFilter = computed(() => {
+        const type = this.activeFilterType();
+        return this.filters().find(f => f.value === type) || null;
+    }, ...(ngDevMode ? [{ debugName: "activeFilter" }] : []));
+    mode = computed(() => {
+        const filter = this.activeFilter();
+        return filter?.type === 'datetime' ? 'datetime' : 'date';
+    }, ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    placeholder = computed(() => this.activeFilter()?.placeholder || 'Seleccionar fecha', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    minDate = computed(() => this.activeFilter()?.minDate || null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    maxDate = computed(() => this.activeFilter()?.maxDate || null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    filterValue = computed(() => this.activeFilter()?.value || '', ...(ngDevMode ? [{ debugName: "filterValue" }] : []));
+    // Calendar Navigation
     currentMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
     currentYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
-    // Hora en formato 24h (para el backend)
+    // Time State
     selectedHour = signal(0, ...(ngDevMode ? [{ debugName: "selectedHour" }] : []));
     selectedMinute = signal(0, ...(ngDevMode ? [{ debugName: "selectedMinute" }] : []));
-    // Estado AM/PM
     selectedAmPm = signal('AM', ...(ngDevMode ? [{ debugName: "selectedAmPm" }] : []));
     documentClickListener;
-    showFilters = false;
-    showDatePicker = false;
-    activeFilterType = null;
-    selectDate(date) {
-        this.dateSelected.emit({
-            filter: this.filter(),
-            value: date
-        });
-    }
-    getDatePickerMode(type) {
-        switch (type) {
-            case 'date':
-                return 'date';
-            case 'datetime':
-                return 'datetime';
-            default:
-                return 'date';
-        }
-    }
-    displayValue = computed(() => {
-        const date = this.selectedDate();
-        if (!date)
-            return '';
-        const options = {
-            day: '2-digit',
-            month: '2-digit',
-            year: 'numeric',
-        };
-        if (this.mode() === 'datetime') {
-            options.hour = '2-digit';
-            options.minute = '2-digit';
-            options.hour12 = true; // Cambiado a formato 12 horas
-        }
-        return date.toLocaleDateString('es-ES', options);
-    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    monthName = computed(() => {
-        const months = [
-            'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
-            'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
-        ];
-        return months[this.currentMonth()];
-    }, ...(ngDevMode ? [{ debugName: "monthName" }] : []));
-    calendarDays = computed(() => {
-        const year = this.currentYear();
-        const month = this.currentMonth();
-        const firstDay = new Date(year, month, 1);
-        const lastDay = new Date(year, month + 1, 0);
-        const daysInMonth = lastDay.getDate();
-        const startingDayOfWeek = firstDay.getDay();
-        const days = [];
-        // Días vacíos al inicio
-        for (let i = 0; i < startingDayOfWeek; i++) {
-            days.push(null);
-        }
-        // Días del mes
-        for (let day = 1; day <= daysInMonth; day++) {
-            days.push(day);
-        }
-        return days;
-    }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : []));
-    // Horas en formato 12h
-    hours12 = computed(() => {
-        return Array.from({ length: 12 }, (_, i) => {
-            const hour12 = i === 0 ? 12 : i;
-            return {
-                value: hour12,
-                display: hour12.toString().padStart(2, '0')
-            };
-        });
-    }, ...(ngDevMode ? [{ debugName: "hours12" }] : []));
-    // Hora seleccionada en formato 12h
-    selectedHour12 = computed(() => {
-        const hour24 = this.selectedHour();
-        if (hour24 === 0)
-            return 12;
-        if (hour24 > 12)
-            return hour24 - 12;
-        return hour24;
-    }, ...(ngDevMode ? [{ debugName: "selectedHour12" }] : []));
-    minutes = computed(() => Array.from({ length: 60 }, (_, i) => i), ...(ngDevMode ? [{ debugName: "minutes" }] : []));
     onChange = () => { };
     onTouched = () => { };
     constructor(elementRef, ngZone) {
@@ -121,32 +49,23 @@ class DateTimeFilter {
     ngOnDestroy() {
         this.removeDocumentListener();
     }
+    // ControlValueAccessor Implementation
     writeValue(value) {
         let date = null;
         if (value instanceof Date) {
             date = value;
         }
         else if (typeof value === 'string' && value) {
-            // Manejar tanto fechas ISO como otros formatos de string
             const parsedDate = new Date(value);
             if (!isNaN(parsedDate.getTime())) {
                 date = parsedDate;
             }
         }
         if (date) {
-            this.selectedDate.set(date);
-            this.currentMonth.set(date.getMonth());
-            this.currentYear.set(date.getFullYear());
-            this.selectedHour.set(date.getHours());
-            this.selectedMinute.set(date.getMinutes());
-            this.selectedAmPm.set(date.getHours() >= 12 ? 'PM' : 'AM');
+            this.updateInternalState(date);
         }
         else {
-            this.selectedDate.set(null);
-            // Valores por defecto
-            this.selectedHour.set(0);
-            this.selectedMinute.set(0);
-            this.selectedAmPm.set('AM');
+            this.resetInternalState();
         }
     }
     registerOnChange(fn) {
@@ -158,14 +77,15 @@ class DateTimeFilter {
     setDisabledState(isDisabled) {
         this.isDisabled.set(isDisabled);
     }
-    toggle() {
+    // Public Methods
+    toggle(filterValue) {
         if (this.isDisabled())
             return;
-        this.markAsTouched();
-        if (this.isOpen()) {
+        if (this.activeFilterType() === filterValue && this.isOpen()) {
             this.close();
         }
         else {
+            this.activeFilterType.set(filterValue);
             this.open();
         }
     }
@@ -175,7 +95,6 @@ class DateTimeFilter {
         this.markAsTouched();
         this.isOpen.set(true);
         this.addDocumentListener();
-        // Si hay fecha seleccionada, navegar a ese mes/año
         const selected = this.selectedDate();
         if (selected) {
             this.currentMonth.set(selected.getMonth());
@@ -186,7 +105,13 @@ class DateTimeFilter {
         this.isOpen.set(false);
         this.removeDocumentListener();
         this.markAsTouched();
+        // Don't clear activeFilterType here to keep the chip active if needed, 
+        // or clear it if you want the chip to look inactive when closed.
+        // For now, let's keep it active only if a date is selected? 
+        // Or maybe we want to close the dropdown but keep the filter "selected" in UI?
+        // Let's just close the dropdown.
     }
+    // Calendar Logic
     selectDay(day) {
         if (!day || this.isDisabled())
             return;
@@ -197,53 +122,116 @@ class DateTimeFilter {
         this.onChange(newDate.toISOString());
         this.markAsTouched();
         this.dateChange.emit(newDate);
-        // Notificar selección de fecha al padre
         this.dateSelected.emit({
-            filter: this.filter(),
+            filter: this.filterValue(),
             value: newDate,
         });
-        // Solo cerrar automáticamente si es modo 'date'
         if (this.mode() === 'date') {
             this.close();
         }
     }
-    setHour12(hour12) {
-        if (this.isDisabled())
-            return;
-        // Convertir de 12h a 24h
-        let hour24;
-        const amPm = this.selectedAmPm();
-        if (hour12 === 12) {
-            hour24 = amPm === 'AM' ? 0 : 12;
-        }
-        else {
-            hour24 = amPm === 'AM' ? hour12 : hour12 + 12;
+    // ... (Rest of the helper methods like previousMonth, nextMonth, etc. remain largely the same)
+    displayValue = computed(() => {
+        const date = this.selectedDate();
+        if (!date)
+            return '';
+        const options = {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+        };
+        if (this.mode() === 'datetime') {
+            options.hour = '2-digit';
+            options.minute = '2-digit';
+            options.hour12 = true;
         }
-        this.selectedHour.set(hour24);
-        this.updateDateTime();
+        return date.toLocaleDateString('es-ES', options);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    monthName = computed(() => {
+        const months = [
+            'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+            'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+        ];
+        return months[this.currentMonth()];
+    }, ...(ngDevMode ? [{ debugName: "monthName" }] : []));
+    calendarDays = computed(() => {
+        const year = this.currentYear();
+        const month = this.currentMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        const daysInMonth = lastDay.getDate();
+        const startingDayOfWeek = firstDay.getDay();
+        const days = [];
+        for (let i = 0; i < startingDayOfWeek; i++)
+            days.push(null);
+        for (let day = 1; day <= daysInMonth; day++)
+            days.push(day);
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : []));
+    hours12 = computed(() => {
+        return Array.from({ length: 12 }, (_, i) => {
+            const hour12 = i === 0 ? 12 : i;
+            return {
+                value: hour12,
+                display: hour12.toString().padStart(2, '0')
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "hours12" }] : []));
+    selectedHour12 = computed(() => {
+        const hour24 = this.selectedHour();
+        if (hour24 === 0)
+            return 12;
+        if (hour24 > 12)
+            return hour24 - 12;
+        return hour24;
+    }, ...(ngDevMode ? [{ debugName: "selectedHour12" }] : []));
+    minutes = computed(() => Array.from({ length: 60 }, (_, i) => i), ...(ngDevMode ? [{ debugName: "minutes" }] : []));
+    // Helper methods
+    updateInternalState(date) {
+        this.selectedDate.set(date);
+        this.currentMonth.set(date.getMonth());
+        this.currentYear.set(date.getFullYear());
+        this.selectedHour.set(date.getHours());
+        this.selectedMinute.set(date.getMinutes());
+        this.selectedAmPm.set(date.getHours() >= 12 ? 'PM' : 'AM');
     }
-    setMinute(minute) {
-        if (this.isDisabled())
-            return;
-        this.selectedMinute.set(minute);
-        this.updateDateTime();
+    resetInternalState() {
+        this.selectedDate.set(null);
+        this.selectedHour.set(0);
+        this.selectedMinute.set(0);
+        this.selectedAmPm.set('AM');
     }
-    setAmPm(amPm) {
-        if (this.isDisabled())
-            return;
-        const currentHour24 = this.selectedHour();
-        const currentHour12 = this.selectedHour12();
-        let newHour24;
-        if (amPm === 'AM') {
-            newHour24 = currentHour12 === 12 ? 0 : currentHour12;
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
         }
-        else {
-            newHour24 = currentHour12 === 12 ? 12 : currentHour12 + 12;
+    }
+    addDocumentListener() {
+        if (this.documentClickListener)
+            this.removeDocumentListener();
+        this.ngZone.runOutsideAngular(() => {
+            this.documentClickListener = (event) => {
+                const target = event.target;
+                if (!this.elementRef.nativeElement.contains(target)) {
+                    this.ngZone.run(() => {
+                        if (this.isOpen()) {
+                            this.markAsTouched();
+                            this.close();
+                        }
+                    });
+                }
+            };
+            setTimeout(() => document.addEventListener('click', this.documentClickListener, true), 10);
+        });
+    }
+    removeDocumentListener() {
+        if (this.documentClickListener) {
+            document.removeEventListener('click', this.documentClickListener, true);
+            this.documentClickListener = undefined;
         }
-        this.selectedAmPm.set(amPm);
-        this.selectedHour.set(newHour24);
-        this.updateDateTime();
     }
+    // Navigation methods
     previousMonth() {
         const currentMonth = this.currentMonth();
         const currentYear = this.currentYear();
@@ -266,73 +254,78 @@ class DateTimeFilter {
             this.currentMonth.set(currentMonth + 1);
         }
     }
-    previousYear() {
-        this.currentYear.set(this.currentYear() - 1);
-    }
-    nextYear() {
-        this.currentYear.set(this.currentYear() + 1);
-    }
+    previousYear() { this.currentYear.set(this.currentYear() - 1); }
+    nextYear() { this.currentYear.set(this.currentYear() + 1); }
     today() {
         const today = new Date();
-        this.currentMonth.set(today.getMonth());
-        this.currentYear.set(today.getFullYear());
-        this.selectedDate.set(today);
-        this.selectedHour.set(today.getHours());
-        this.selectedMinute.set(today.getMinutes());
-        this.selectedAmPm.set(today.getHours() >= 12 ? 'PM' : 'AM');
+        this.updateInternalState(today);
         this.onChange(today.toISOString());
         this.markAsTouched();
         this.dateChange.emit(today);
-        // Notificar selección de fecha al padre
-        this.dateSelected.emit({
-            filter: this.filter(),
-            value: today,
-        });
-        if (this.mode() === 'date') {
+        this.dateSelected.emit({ filter: this.filterValue(), value: today });
+        if (this.mode() === 'date')
             this.close();
-        }
     }
     clear() {
-        this.selectedDate.set(null);
+        this.resetInternalState();
         this.onChange(null);
         this.markAsTouched();
         this.dateChange.emit(null);
         this.close();
     }
-    onKeyDown(event) {
+    // Time setters
+    setHour12(hour12) {
         if (this.isDisabled())
             return;
-        if (event.key === 'Escape') {
-            this.close();
-        }
-        else if (event.key === 'Tab') {
-            this.markAsTouched();
-            this.close();
-        }
+        const amPm = this.selectedAmPm();
+        const hour24 = hour12 === 12 ? (amPm === 'AM' ? 0 : 12) : (amPm === 'AM' ? hour12 : hour12 + 12);
+        this.selectedHour.set(hour24);
+        this.updateDateTime();
+    }
+    setMinute(minute) {
+        if (this.isDisabled())
+            return;
+        this.selectedMinute.set(minute);
+        this.updateDateTime();
+    }
+    setAmPm(amPm) {
+        if (this.isDisabled())
+            return;
+        const currentHour12 = this.selectedHour12();
+        const newHour24 = amPm === 'AM' ? (currentHour12 === 12 ? 0 : currentHour12) : (currentHour12 === 12 ? 12 : currentHour12 + 12);
+        this.selectedAmPm.set(amPm);
+        this.selectedHour.set(newHour24);
+        this.updateDateTime();
+    }
+    updateDateTime() {
+        const selected = this.selectedDate();
+        if (!selected)
+            return;
+        const newDate = new Date(selected);
+        newDate.setHours(this.selectedHour());
+        newDate.setMinutes(this.selectedMinute());
+        this.selectedDate.set(newDate);
+        this.onChange(newDate.toISOString());
+        this.markAsTouched();
+        this.dateChange.emit(newDate);
     }
+    // Validation helpers
     isDaySelected(day) {
         if (!day)
             return false;
         const selected = this.selectedDate();
-        if (!selected)
-            return false;
-        return (selected.getDate() === day &&
-            selected.getMonth() === this.currentMonth() &&
-            selected.getFullYear() === this.currentYear());
+        return !!selected && selected.getDate() === day && selected.getMonth() === this.currentMonth() && selected.getFullYear() === this.currentYear();
     }
     isToday(day) {
         if (!day)
             return false;
         const today = new Date();
-        return (today.getDate() === day &&
-            today.getMonth() === this.currentMonth() &&
-            today.getFullYear() === this.currentYear());
+        return today.getDate() === day && today.getMonth() === this.currentMonth() && today.getFullYear() === this.currentYear();
     }
     isDayDisabled(day) {
         if (!day)
             return true;
-        const date = new Date(this.currentYear(), this.currentMonth(), day);
-        return this.isDateDisabled(date);
+        return this.isDateDisabled(new Date(this.currentYear(), this.currentMonth(), day));
     }
     isDateDisabled(date) {
         const minDate = this.minDate();
@@ -343,97 +336,25 @@ class DateTimeFilter {
             return true;
         return false;
     }
-    updateDateTime() {
-        const selected = this.selectedDate();
-        if (!selected)
-            return;
-        const newDate = new Date(selected);
-        newDate.setHours(this.selectedHour());
-        newDate.setMinutes(this.selectedMinute());
-        this.selectedDate.set(newDate);
-        this.onChange(newDate.toISOString());
-        this.markAsTouched();
-        this.dateChange.emit(newDate);
-    }
-    markAsTouched() {
-        if (!this.isTouched()) {
-            this.isTouched.set(true);
-            this.onTouched();
-        }
-    }
-    addDocumentListener() {
-        if (this.documentClickListener) {
-            this.removeDocumentListener();
-        }
-        this.ngZone.runOutsideAngular(() => {
-            this.documentClickListener = (event) => {
-                const target = event.target;
-                if (!this.elementRef.nativeElement.contains(target)) {
-                    this.ngZone.run(() => {
-                        if (this.isOpen()) {
-                            this.markAsTouched();
-                            this.close();
-                        }
-                    });
-                }
-            };
-            setTimeout(() => {
-                document.addEventListener('click', this.documentClickListener, true);
-            }, 10);
-        });
-    }
-    removeDocumentListener() {
-        if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener, true);
-            this.documentClickListener = undefined;
-        }
-    }
-    markTouched() {
-        this.markAsTouched();
-    }
-    /**
-     * Obtiene la fecha seleccionada en formato ISO string
-     * @returns string ISO o null si no hay fecha seleccionada
-     */
-    getISOString() {
-        const date = this.selectedDate();
-        return date ? date.toISOString() : null;
-    }
-    /**
-     * Establece la fecha desde un string ISO
-     * @param isoString - Fecha en formato ISO
-     */
-    setFromISOString(isoString) {
-        if (isoString) {
-            const date = new Date(isoString);
-            if (!isNaN(date.getTime())) {
-                this.writeValue(date);
-                this.onChange(isoString);
-            }
-        }
-        else {
-            this.clear();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DateTimeFilter, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DateTimeFilter, isStandalone: true, selector: "app-date-time-filter", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dateSelected: "dateSelected", dateChange: "dateChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DateTimeFilter, isStandalone: true, selector: "app-date-time-filter", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", dateChange: "dateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateTimeFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"datetime-container\">\r\n  \r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <div class=\"datetime-content\">\r\n      <!-- Secci\u00F3n del calendario -->\r\n      <div class=\"calendar-section\">\r\n        <!-- Navegaci\u00F3n -->\r\n        <div class=\"calendar-nav\">\r\n          <div class=\"nav-section\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"previousYear()\"\r\n              title=\"A\u00F1o anterior\"\r\n            >\r\n              \u2039\u2039\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"previousMonth()\"\r\n              title=\"Mes anterior\"\r\n            >\r\n              \u2039\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n          <div class=\"nav-section\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"nextMonth()\"\r\n              title=\"Siguiente mes\"\r\n            >\r\n              \u203A\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"nextYear()\"\r\n              title=\"Siguiente a\u00F1o\"\r\n            >\r\n              \u203A\u203A\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- D\u00EDas de la semana -->\r\n        <div class=\"weekdays\">\r\n          <div class=\"weekday\">Dom</div>\r\n          <div class=\"weekday\">Lun</div>\r\n          <div class=\"weekday\">Mar</div>\r\n          <div class=\"weekday\">Mi\u00E9</div>\r\n          <div class=\"weekday\">Jue</div>\r\n          <div class=\"weekday\">Vie</div>\r\n          <div class=\"weekday\">S\u00E1b</div>\r\n        </div>\r\n\r\n        <!-- D\u00EDas -->\r\n        <div class=\"calendar-grid\">\r\n          @for (day of calendarDays(); track $index) {\r\n          <div\r\n            class=\"calendar-day\"\r\n            [class.selected]=\"isDaySelected(day)\"\r\n            [class.today]=\"isToday(day)\"\r\n            [class.disabled]=\"isDayDisabled(day)\"\r\n            [class.empty]=\"!day\"\r\n            (click)=\"selectDay(day)\"\r\n          >\r\n            {{ day || \"\" }}\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- TIME PICKER -->\r\n        @if (mode() === 'datetime') {\r\n        <div class=\"time-section\">\r\n          <div class=\"time-header\">Horario</div>\r\n\r\n          <div class=\"time-selectors\">\r\n            <div class=\"time-group\">\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">Hora</div>\r\n                <div class=\"time-scroll\">\r\n                  @for (hour of hours12(); track hour.value) {\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"hour.value === selectedHour12()\"\r\n                    (click)=\"setHour12(hour.value)\"\r\n                  >\r\n                    {{ hour.display }}\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"time-separator-vertical\">:</div>\r\n\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">Min</div>\r\n                <div class=\"time-scroll\">\r\n                  @for (minute of minutes(); track minute) {\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"minute === selectedMinute()\"\r\n                    (click)=\"setMinute(minute)\"\r\n                  >\r\n                    {{ minute.toString().padStart(2, \"0\") }}\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">AM/PM</div>\r\n                <div class=\"time-scroll ampm\">\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                    (click)=\"setAmPm('AM')\"\r\n                  >\r\n                    AM\r\n                  </div>\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                    (click)=\"setAmPm('PM')\"\r\n                  >\r\n                    PM\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- botones -->\r\n    <div class=\"action-buttons\">\r\n      <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n        Hoy\r\n      </button>\r\n\r\n      @if (mode() === 'datetime') {\r\n      <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n        Aceptar\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] });
+        ], ngImport: i0, template: "<div class=\"datetime-container\">\r\n  <!-- \uD83D\uDD25 NUEVA SECCI\u00D3N: CHIPS -->\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n\r\n    <div\r\n      class=\"chip\"\r\n      [class.active]=\"activeFilterType() === item.value\"\r\n      (click)=\"toggle(item.value)\"\r\n    >\r\n      <div class=\"content-chip\">\r\n        <div class=\"label-text\">{{ displayValue() || item.placeholder || item.label }}</div>\r\n\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-calendar-event\"\r\n        >\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\r\n          />\r\n          <path d=\"M16 3l0 4\" />\r\n          <path d=\"M8 3l0 4\" />\r\n          <path d=\"M4 11l16 0\" />\r\n          <path d=\"M8 15h2v2h-2z\" />\r\n        </svg>\r\n      </div>\r\n    </div>\r\n\r\n    }\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <div class=\"datetime-content\">\r\n      <!-- Secci\u00F3n del calendario -->\r\n      <div class=\"calendar-section\">\r\n        <!-- Navegaci\u00F3n -->\r\n        <div class=\"calendar-nav\">\r\n          <div class=\"nav-section\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"previousYear()\"\r\n              title=\"A\u00F1o anterior\"\r\n            >\r\n              \u2039\u2039\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"previousMonth()\"\r\n              title=\"Mes anterior\"\r\n            >\r\n              \u2039\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n          <div class=\"nav-section\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"nextMonth()\"\r\n              title=\"Siguiente mes\"\r\n            >\r\n              \u203A\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"nextYear()\"\r\n              title=\"Siguiente a\u00F1o\"\r\n            >\r\n              \u203A\u203A\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- D\u00EDas de la semana -->\r\n        <div class=\"weekdays\">\r\n          <div class=\"weekday\">Dom</div>\r\n          <div class=\"weekday\">Lun</div>\r\n          <div class=\"weekday\">Mar</div>\r\n          <div class=\"weekday\">Mi\u00E9</div>\r\n          <div class=\"weekday\">Jue</div>\r\n          <div class=\"weekday\">Vie</div>\r\n          <div class=\"weekday\">S\u00E1b</div>\r\n        </div>\r\n\r\n        <!-- D\u00EDas -->\r\n        <div class=\"calendar-grid\">\r\n          @for (day of calendarDays(); track $index) {\r\n          <div\r\n            class=\"calendar-day\"\r\n            [class.selected]=\"isDaySelected(day)\"\r\n            [class.today]=\"isToday(day)\"\r\n            [class.disabled]=\"isDayDisabled(day)\"\r\n            [class.empty]=\"!day\"\r\n            (click)=\"selectDay(day)\"\r\n          >\r\n            {{ day || \"\" }}\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- TIME PICKER -->\r\n        @if (mode() === 'datetime') {\r\n        <div class=\"time-section\">\r\n          <div class=\"time-header\">Horario</div>\r\n\r\n          <div class=\"time-selectors\">\r\n            <div class=\"time-group\">\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">Hora</div>\r\n                <div class=\"time-scroll\">\r\n                  @for (hour of hours12(); track hour.value) {\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"hour.value === selectedHour12()\"\r\n                    (click)=\"setHour12(hour.value)\"\r\n                  >\r\n                    {{ hour.display }}\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"time-separator-vertical\">:</div>\r\n\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">Min</div>\r\n                <div class=\"time-scroll\">\r\n                  @for (minute of minutes(); track minute) {\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"minute === selectedMinute()\"\r\n                    (click)=\"setMinute(minute)\"\r\n                  >\r\n                    {{ minute.toString().padStart(2, \"0\") }}\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">AM/PM</div>\r\n                <div class=\"time-scroll ampm\">\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                    (click)=\"setAmPm('AM')\"\r\n                  >\r\n                    AM\r\n                  </div>\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                    (click)=\"setAmPm('PM')\"\r\n                  >\r\n                    PM\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- botones -->\r\n    <div class=\"action-buttons\">\r\n      <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n        Hoy\r\n      </button>\r\n\r\n      @if (mode() === 'datetime') {\r\n      <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n        Aceptar\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.content-chip{padding:6px 8px 6px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);padding-right:16px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DateTimeFilter, decorators: [{
             type: Component,
-            args: [{ selector: 'app-date-time-filter', standalone: true, imports: [], providers: [
+            args: [{ selector: 'app-date-time-filter', standalone: true, imports: [CommonModule, ReactiveFormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DateTimeFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"datetime-container\">\r\n  \r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <div class=\"datetime-content\">\r\n      <!-- Secci\u00F3n del calendario -->\r\n      <div class=\"calendar-section\">\r\n        <!-- Navegaci\u00F3n -->\r\n        <div class=\"calendar-nav\">\r\n          <div class=\"nav-section\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"previousYear()\"\r\n              title=\"A\u00F1o anterior\"\r\n            >\r\n              \u2039\u2039\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"previousMonth()\"\r\n              title=\"Mes anterior\"\r\n            >\r\n              \u2039\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n          <div class=\"nav-section\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"nextMonth()\"\r\n              title=\"Siguiente mes\"\r\n            >\r\n              \u203A\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"nextYear()\"\r\n              title=\"Siguiente a\u00F1o\"\r\n            >\r\n              \u203A\u203A\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- D\u00EDas de la semana -->\r\n        <div class=\"weekdays\">\r\n          <div class=\"weekday\">Dom</div>\r\n          <div class=\"weekday\">Lun</div>\r\n          <div class=\"weekday\">Mar</div>\r\n          <div class=\"weekday\">Mi\u00E9</div>\r\n          <div class=\"weekday\">Jue</div>\r\n          <div class=\"weekday\">Vie</div>\r\n          <div class=\"weekday\">S\u00E1b</div>\r\n        </div>\r\n\r\n        <!-- D\u00EDas -->\r\n        <div class=\"calendar-grid\">\r\n          @for (day of calendarDays(); track $index) {\r\n          <div\r\n            class=\"calendar-day\"\r\n            [class.selected]=\"isDaySelected(day)\"\r\n            [class.today]=\"isToday(day)\"\r\n            [class.disabled]=\"isDayDisabled(day)\"\r\n            [class.empty]=\"!day\"\r\n            (click)=\"selectDay(day)\"\r\n          >\r\n            {{ day || \"\" }}\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- TIME PICKER -->\r\n        @if (mode() === 'datetime') {\r\n        <div class=\"time-section\">\r\n          <div class=\"time-header\">Horario</div>\r\n\r\n          <div class=\"time-selectors\">\r\n            <div class=\"time-group\">\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">Hora</div>\r\n                <div class=\"time-scroll\">\r\n                  @for (hour of hours12(); track hour.value) {\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"hour.value === selectedHour12()\"\r\n                    (click)=\"setHour12(hour.value)\"\r\n                  >\r\n                    {{ hour.display }}\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"time-separator-vertical\">:</div>\r\n\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">Min</div>\r\n                <div class=\"time-scroll\">\r\n                  @for (minute of minutes(); track minute) {\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"minute === selectedMinute()\"\r\n                    (click)=\"setMinute(minute)\"\r\n                  >\r\n                    {{ minute.toString().padStart(2, \"0\") }}\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">AM/PM</div>\r\n                <div class=\"time-scroll ampm\">\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                    (click)=\"setAmPm('AM')\"\r\n                  >\r\n                    AM\r\n                  </div>\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                    (click)=\"setAmPm('PM')\"\r\n                  >\r\n                    PM\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- botones -->\r\n    <div class=\"action-buttons\">\r\n      <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n        Hoy\r\n      </button>\r\n\r\n      @if (mode() === 'datetime') {\r\n      <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n        Aceptar\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+                    ], template: "<div class=\"datetime-container\">\r\n  <!-- \uD83D\uDD25 NUEVA SECCI\u00D3N: CHIPS -->\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n\r\n    <div\r\n      class=\"chip\"\r\n      [class.active]=\"activeFilterType() === item.value\"\r\n      (click)=\"toggle(item.value)\"\r\n    >\r\n      <div class=\"content-chip\">\r\n        <div class=\"label-text\">{{ displayValue() || item.placeholder || item.label }}</div>\r\n\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-calendar-event\"\r\n        >\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\r\n          />\r\n          <path d=\"M16 3l0 4\" />\r\n          <path d=\"M8 3l0 4\" />\r\n          <path d=\"M4 11l16 0\" />\r\n          <path d=\"M8 15h2v2h-2z\" />\r\n        </svg>\r\n      </div>\r\n    </div>\r\n\r\n    }\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <div class=\"datetime-content\">\r\n      <!-- Secci\u00F3n del calendario -->\r\n      <div class=\"calendar-section\">\r\n        <!-- Navegaci\u00F3n -->\r\n        <div class=\"calendar-nav\">\r\n          <div class=\"nav-section\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"previousYear()\"\r\n              title=\"A\u00F1o anterior\"\r\n            >\r\n              \u2039\u2039\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"previousMonth()\"\r\n              title=\"Mes anterior\"\r\n            >\r\n              \u2039\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n          <div class=\"nav-section\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"nextMonth()\"\r\n              title=\"Siguiente mes\"\r\n            >\r\n              \u203A\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"nav-btn\"\r\n              (click)=\"nextYear()\"\r\n              title=\"Siguiente a\u00F1o\"\r\n            >\r\n              \u203A\u203A\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- D\u00EDas de la semana -->\r\n        <div class=\"weekdays\">\r\n          <div class=\"weekday\">Dom</div>\r\n          <div class=\"weekday\">Lun</div>\r\n          <div class=\"weekday\">Mar</div>\r\n          <div class=\"weekday\">Mi\u00E9</div>\r\n          <div class=\"weekday\">Jue</div>\r\n          <div class=\"weekday\">Vie</div>\r\n          <div class=\"weekday\">S\u00E1b</div>\r\n        </div>\r\n\r\n        <!-- D\u00EDas -->\r\n        <div class=\"calendar-grid\">\r\n          @for (day of calendarDays(); track $index) {\r\n          <div\r\n            class=\"calendar-day\"\r\n            [class.selected]=\"isDaySelected(day)\"\r\n            [class.today]=\"isToday(day)\"\r\n            [class.disabled]=\"isDayDisabled(day)\"\r\n            [class.empty]=\"!day\"\r\n            (click)=\"selectDay(day)\"\r\n          >\r\n            {{ day || \"\" }}\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- TIME PICKER -->\r\n        @if (mode() === 'datetime') {\r\n        <div class=\"time-section\">\r\n          <div class=\"time-header\">Horario</div>\r\n\r\n          <div class=\"time-selectors\">\r\n            <div class=\"time-group\">\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">Hora</div>\r\n                <div class=\"time-scroll\">\r\n                  @for (hour of hours12(); track hour.value) {\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"hour.value === selectedHour12()\"\r\n                    (click)=\"setHour12(hour.value)\"\r\n                  >\r\n                    {{ hour.display }}\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"time-separator-vertical\">:</div>\r\n\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">Min</div>\r\n                <div class=\"time-scroll\">\r\n                  @for (minute of minutes(); track minute) {\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"minute === selectedMinute()\"\r\n                    (click)=\"setMinute(minute)\"\r\n                  >\r\n                    {{ minute.toString().padStart(2, \"0\") }}\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"time-column\">\r\n                <div class=\"time-label\">AM/PM</div>\r\n                <div class=\"time-scroll ampm\">\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                    (click)=\"setAmPm('AM')\"\r\n                  >\r\n                    AM\r\n                  </div>\r\n                  <div\r\n                    class=\"time-option\"\r\n                    [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                    (click)=\"setAmPm('PM')\"\r\n                  >\r\n                    PM\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- botones -->\r\n    <div class=\"action-buttons\">\r\n      <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n        Hoy\r\n      </button>\r\n\r\n      @if (mode() === 'datetime') {\r\n      <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n        Aceptar\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.content-chip{padding:6px 8px 6px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);padding-right:16px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
 
 class PaginationComponent {
     page = 1;
@@ -498,8 +419,11 @@ class Table {
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
     actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    showActions = input(true, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
     openedMenu = signal(null, ...(ngDevMode ? [{ debugName: "openedMenu" }] : []));
     selectedRow = signal(null, ...(ngDevMode ? [{ debugName: "selectedRow" }] : []));
+    sortColumn = signal(null, ...(ngDevMode ? [{ debugName: "sortColumn" }] : []));
+    sortDirection = signal('desc', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
     optionSelected = output();
     toggleMenu(index) {
         this.openedMenu.set(this.openedMenu() === index ? null : index);
@@ -523,17 +447,1325 @@ class Table {
             this.selectedRow.set(null);
         }
     }
+    getAlignment(col) {
+        if (col.align && col.align !== 'auto')
+            return col.align;
+        switch (col.type) {
+            case 'number':
+            case 'money':
+            case 'percentage':
+                return 'right';
+            case 'status':
+                return 'center';
+            default:
+                return 'left';
+        }
+    }
+    formatValue(col, value) {
+        if (value === null || value === undefined)
+            return '';
+        switch (col.type) {
+            case 'money':
+                return new Intl.NumberFormat('es-CO', {
+                    style: 'currency',
+                    currency: 'COP',
+                    minimumFractionDigits: 0
+                }).format(value);
+            case 'number':
+                return new Intl.NumberFormat('es-CO').format(value);
+            case 'percentage':
+                return `${value}%`;
+            case 'date':
+                const d = new Date(value);
+                if (isNaN(d.getTime()))
+                    return value;
+                const day = String(d.getDate()).padStart(2, '0');
+                const month = String(d.getMonth() + 1).padStart(2, '0');
+                const year = d.getFullYear();
+                return `${day}/${month}/${year}`;
+            default:
+                return String(value);
+        }
+    }
+    getStatusStyle(value) {
+        const map = {
+            aprobado: { bg: '#E6F4EA', color: '#1E8E3E' }, // verde
+            pendiente: { bg: '#FFF4E5', color: '#E67E22' }, // naranja
+            rechazado: { bg: '#FCE8E6', color: '#D93025' }, // rojo
+            en_proceso: { bg: '#E8F0FE', color: '#1967D2' }, // azul
+        };
+        const key = value?.toString().toLowerCase()?.replace(/\s+/g, '_');
+        return map[key] || { bg: '#F4F4F4', color: '#5F6368' }; // default gris
+    }
+    sortData() {
+        const col = this.sortColumn();
+        if (!col)
+            return this.data();
+        const dir = this.sortDirection();
+        return [...this.data()].sort((a, b) => {
+            const x = a[col] ?? '';
+            const y = b[col] ?? '';
+            // Caso: fechas
+            if (this.isDate(x) && this.isDate(y)) {
+                return dir === 'asc'
+                    ? new Date(x).getTime() - new Date(y).getTime()
+                    : new Date(y).getTime() - new Date(x).getTime();
+            }
+            // Caso: números
+            if (!isNaN(Number(x)) && !isNaN(Number(y))) {
+                return dir === 'asc' ? Number(x) - Number(y) : Number(y) - Number(x);
+            }
+            // Caso: strings
+            return dir === 'asc'
+                ? x.toString().localeCompare(y.toString())
+                : y.toString().localeCompare(x.toString());
+        });
+    }
+    isDate(value) {
+        return (typeof value === 'string' &&
+            value.length > 5 &&
+            !isNaN(Date.parse(value)));
+    }
+    onSort(col) {
+        if (this.sortColumn() === col.key) {
+            // cambiar asc <-> desc
+            this.sortDirection.set(this.sortDirection() === 'asc' ? 'desc' : 'asc');
+        }
+        else {
+            // nueva columna → empieza en desc (más reciente primero)
+            this.sortColumn.set(col.key);
+            this.sortDirection.set('desc');
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <th>{{ col.label }}</th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        <th></th>\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of data(); track $index) {\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <td>{{ row[col.key] }}</td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    class=\"more-vert\"\r\n                    width=\"20\"\r\n                    height=\"20\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  >\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n              \r\n              <div class=\"modal-content\">\r\n                <ul>\r\n                  @for (option of actions(); track $index) {\r\n                  <li\r\n                    class=\"option-item\"\r\n                    [style.color]=\"option.color\"\r\n                    (click)=\"onOptionClick(option, row)\"\r\n                  >\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n              \r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.acciones-cell{text-align:center;padding:6px;position:relative}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item:hover{background-color:#0000001a}.option-item:active{background-color:#dee58f}.icon{margin-right:8px}.option-item .label{font-weight:500;font-size:16px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <th\r\n          (click)=\"col.sortable !== false && onSort(col)\"\r\n          [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\"\r\n        >\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th></th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track $index) {\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n\r\n          <span\r\n            class=\"status-chip\"\r\n            [style.background-color]=\"style.bg\"\r\n            [style.color]=\"style.color\"\r\n          >\r\n            <span\r\n              class=\"status-dot\"\r\n              [style.background-color]=\"style.color\"\r\n            ></span>\r\n\r\n            {{ row[col.key]?.toString().toUpperCase() }}\r\n          </span>\r\n          } @else { {{ formatValue(col, row[col.key]) }} }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    class=\"more-vert\"\r\n                    width=\"20\"\r\n                    height=\"20\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  >\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content\">\r\n                <ul>\r\n                  @for (option of actions(); track $index) {\r\n                  <li\r\n                    class=\"option-item\"\r\n                    [style.color]=\"option.color\"\r\n                    (click)=\"onOptionClick(option, row)\"\r\n                  >\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.acciones-cell{text-align:center;padding:6px;position:relative}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item:hover{background-color:#0000001a}.option-item:active{background-color:#dee58f}.icon{margin-right:8px}.option-item .label{font-weight:500;font-size:16px}.icon-refresh,.icon-trash{width:24px;height:24px;background-color:currentColor;color:currentColor}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-trash{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}td.left{text-align:left}td.right{text-align:right}td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:13px;font-weight:500}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table', imports: [], standalone: true, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <th>{{ col.label }}</th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        <th></th>\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of data(); track $index) {\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <td>{{ row[col.key] }}</td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    class=\"more-vert\"\r\n                    width=\"20\"\r\n                    height=\"20\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  >\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n              \r\n              <div class=\"modal-content\">\r\n                <ul>\r\n                  @for (option of actions(); track $index) {\r\n                  <li\r\n                    class=\"option-item\"\r\n                    [style.color]=\"option.color\"\r\n                    (click)=\"onOptionClick(option, row)\"\r\n                  >\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n              \r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.acciones-cell{text-align:center;padding:6px;position:relative}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item:hover{background-color:#0000001a}.option-item:active{background-color:#dee58f}.icon{margin-right:8px}.option-item .label{font-weight:500;font-size:16px}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], onClickOutside: [{
+            args: [{ selector: 'lib-table', imports: [], standalone: true, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <th\r\n          (click)=\"col.sortable !== false && onSort(col)\"\r\n          [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\"\r\n        >\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th></th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track $index) {\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n\r\n          <span\r\n            class=\"status-chip\"\r\n            [style.background-color]=\"style.bg\"\r\n            [style.color]=\"style.color\"\r\n          >\r\n            <span\r\n              class=\"status-dot\"\r\n              [style.background-color]=\"style.color\"\r\n            ></span>\r\n\r\n            {{ row[col.key]?.toString().toUpperCase() }}\r\n          </span>\r\n          } @else { {{ formatValue(col, row[col.key]) }} }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    class=\"more-vert\"\r\n                    width=\"20\"\r\n                    height=\"20\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  >\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content\">\r\n                <ul>\r\n                  @for (option of actions(); track $index) {\r\n                  <li\r\n                    class=\"option-item\"\r\n                    [style.color]=\"option.color\"\r\n                    (click)=\"onOptionClick(option, row)\"\r\n                  >\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.acciones-cell{text-align:center;padding:6px;position:relative}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item:hover{background-color:#0000001a}.option-item:active{background-color:#dee58f}.icon{margin-right:8px}.option-item .label{font-weight:500;font-size:16px}.icon-refresh,.icon-trash{width:24px;height:24px;background-color:currentColor;color:currentColor}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-trash{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}td.left{text-align:left}td.right{text-align:right}td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:13px;font-weight:500}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
 
+class DateTimePicker {
+    elementRef;
+    ngZone;
+    mode = input('date', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    placeholder = input('Seleccionar fecha', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    dateChange = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    selectedDate = signal(null, ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    // Navegación del calendario
+    currentMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
+    currentYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
+    // Hora en formato 24h (para el backend)
+    selectedHour = signal(0, ...(ngDevMode ? [{ debugName: "selectedHour" }] : []));
+    selectedMinute = signal(0, ...(ngDevMode ? [{ debugName: "selectedMinute" }] : []));
+    // Estado AM/PM
+    selectedAmPm = signal('AM', ...(ngDevMode ? [{ debugName: "selectedAmPm" }] : []));
+    documentClickListener;
+    displayValue = computed(() => {
+        const date = this.selectedDate();
+        if (!date)
+            return '';
+        const options = {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+        };
+        if (this.mode() === 'datetime') {
+            options.hour = '2-digit';
+            options.minute = '2-digit';
+            options.hour12 = true; // Cambiado a formato 12 horas
+        }
+        return date.toLocaleDateString('es-ES', options);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    monthName = computed(() => {
+        const months = [
+            'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+            'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+        ];
+        return months[this.currentMonth()];
+    }, ...(ngDevMode ? [{ debugName: "monthName" }] : []));
+    calendarDays = computed(() => {
+        const year = this.currentYear();
+        const month = this.currentMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        const daysInMonth = lastDay.getDate();
+        const startingDayOfWeek = firstDay.getDay();
+        const days = [];
+        // Días vacíos al inicio
+        for (let i = 0; i < startingDayOfWeek; i++) {
+            days.push(null);
+        }
+        // Días del mes
+        for (let day = 1; day <= daysInMonth; day++) {
+            days.push(day);
+        }
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : []));
+    // Horas en formato 12h
+    hours12 = computed(() => {
+        return Array.from({ length: 12 }, (_, i) => {
+            const hour12 = i === 0 ? 12 : i;
+            return {
+                value: hour12,
+                display: hour12.toString().padStart(2, '0')
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "hours12" }] : []));
+    // Hora seleccionada en formato 12h
+    selectedHour12 = computed(() => {
+        const hour24 = this.selectedHour();
+        if (hour24 === 0)
+            return 12;
+        if (hour24 > 12)
+            return hour24 - 12;
+        return hour24;
+    }, ...(ngDevMode ? [{ debugName: "selectedHour12" }] : []));
+    minutes = computed(() => Array.from({ length: 60 }, (_, i) => i), ...(ngDevMode ? [{ debugName: "minutes" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    constructor(elementRef, ngZone) {
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+    }
+    ngOnDestroy() {
+        this.removeDocumentListener();
+    }
+    writeValue(value) {
+        let date = null;
+        if (value instanceof Date) {
+            date = value;
+        }
+        else if (typeof value === 'string' && value) {
+            // Manejar tanto fechas ISO como otros formatos de string
+            const parsedDate = new Date(value);
+            if (!isNaN(parsedDate.getTime())) {
+                date = parsedDate;
+            }
+        }
+        if (date) {
+            this.selectedDate.set(date);
+            this.currentMonth.set(date.getMonth());
+            this.currentYear.set(date.getFullYear());
+            this.selectedHour.set(date.getHours());
+            this.selectedMinute.set(date.getMinutes());
+            this.selectedAmPm.set(date.getHours() >= 12 ? 'PM' : 'AM');
+        }
+        else {
+            this.selectedDate.set(null);
+            // Valores por defecto
+            this.selectedHour.set(0);
+            this.selectedMinute.set(0);
+            this.selectedAmPm.set('AM');
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.markAsTouched();
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.isDisabled())
+            return;
+        this.markAsTouched();
+        this.isOpen.set(true);
+        this.addDocumentListener();
+        // Si hay fecha seleccionada, navegar a ese mes/año
+        const selected = this.selectedDate();
+        if (selected) {
+            this.currentMonth.set(selected.getMonth());
+            this.currentYear.set(selected.getFullYear());
+        }
+    }
+    close() {
+        this.isOpen.set(false);
+        this.removeDocumentListener();
+        this.markAsTouched();
+    }
+    selectDay(day) {
+        if (!day || this.isDisabled())
+            return;
+        const newDate = new Date(this.currentYear(), this.currentMonth(), day, this.selectedHour(), this.selectedMinute());
+        if (this.isDateDisabled(newDate))
+            return;
+        this.selectedDate.set(newDate);
+        this.onChange(newDate.toISOString());
+        this.markAsTouched();
+        this.dateChange.emit(newDate);
+        // Solo cerrar automáticamente si es modo 'date'
+        if (this.mode() === 'date') {
+            this.close();
+        }
+    }
+    setHour12(hour12) {
+        if (this.isDisabled())
+            return;
+        // Convertir de 12h a 24h
+        let hour24;
+        const amPm = this.selectedAmPm();
+        if (hour12 === 12) {
+            hour24 = amPm === 'AM' ? 0 : 12;
+        }
+        else {
+            hour24 = amPm === 'AM' ? hour12 : hour12 + 12;
+        }
+        this.selectedHour.set(hour24);
+        this.updateDateTime();
+    }
+    setMinute(minute) {
+        if (this.isDisabled())
+            return;
+        this.selectedMinute.set(minute);
+        this.updateDateTime();
+    }
+    setAmPm(amPm) {
+        if (this.isDisabled())
+            return;
+        const currentHour24 = this.selectedHour();
+        const currentHour12 = this.selectedHour12();
+        let newHour24;
+        if (amPm === 'AM') {
+            newHour24 = currentHour12 === 12 ? 0 : currentHour12;
+        }
+        else {
+            newHour24 = currentHour12 === 12 ? 12 : currentHour12 + 12;
+        }
+        this.selectedAmPm.set(amPm);
+        this.selectedHour.set(newHour24);
+        this.updateDateTime();
+    }
+    previousMonth() {
+        const currentMonth = this.currentMonth();
+        const currentYear = this.currentYear();
+        if (currentMonth === 0) {
+            this.currentMonth.set(11);
+            this.currentYear.set(currentYear - 1);
+        }
+        else {
+            this.currentMonth.set(currentMonth - 1);
+        }
+    }
+    nextMonth() {
+        const currentMonth = this.currentMonth();
+        const currentYear = this.currentYear();
+        if (currentMonth === 11) {
+            this.currentMonth.set(0);
+            this.currentYear.set(currentYear + 1);
+        }
+        else {
+            this.currentMonth.set(currentMonth + 1);
+        }
+    }
+    previousYear() {
+        this.currentYear.set(this.currentYear() - 1);
+    }
+    nextYear() {
+        this.currentYear.set(this.currentYear() + 1);
+    }
+    today() {
+        const today = new Date();
+        this.currentMonth.set(today.getMonth());
+        this.currentYear.set(today.getFullYear());
+        this.selectedDate.set(today);
+        this.selectedHour.set(today.getHours());
+        this.selectedMinute.set(today.getMinutes());
+        this.selectedAmPm.set(today.getHours() >= 12 ? 'PM' : 'AM');
+        this.onChange(today.toISOString());
+        this.markAsTouched();
+        this.dateChange.emit(today);
+        if (this.mode() === 'date') {
+            this.close();
+        }
+    }
+    clear() {
+        this.selectedDate.set(null);
+        this.onChange(null);
+        this.markAsTouched();
+        this.dateChange.emit(null);
+        this.close();
+    }
+    onKeyDown(event) {
+        if (this.isDisabled())
+            return;
+        if (event.key === 'Escape') {
+            this.close();
+        }
+        else if (event.key === 'Tab') {
+            this.markAsTouched();
+            this.close();
+        }
+    }
+    isDaySelected(day) {
+        if (!day)
+            return false;
+        const selected = this.selectedDate();
+        if (!selected)
+            return false;
+        return (selected.getDate() === day &&
+            selected.getMonth() === this.currentMonth() &&
+            selected.getFullYear() === this.currentYear());
+    }
+    isToday(day) {
+        if (!day)
+            return false;
+        const today = new Date();
+        return (today.getDate() === day &&
+            today.getMonth() === this.currentMonth() &&
+            today.getFullYear() === this.currentYear());
+    }
+    isDayDisabled(day) {
+        if (!day)
+            return true;
+        const date = new Date(this.currentYear(), this.currentMonth(), day);
+        return this.isDateDisabled(date);
+    }
+    isDateDisabled(date) {
+        const minDate = this.minDate();
+        const maxDate = this.maxDate();
+        if (minDate && date < minDate)
+            return true;
+        if (maxDate && date > maxDate)
+            return true;
+        return false;
+    }
+    updateDateTime() {
+        const selected = this.selectedDate();
+        if (!selected)
+            return;
+        const newDate = new Date(selected);
+        newDate.setHours(this.selectedHour());
+        newDate.setMinutes(this.selectedMinute());
+        this.selectedDate.set(newDate);
+        this.onChange(newDate.toISOString());
+        this.markAsTouched();
+        this.dateChange.emit(newDate);
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    addDocumentListener() {
+        if (this.documentClickListener) {
+            this.removeDocumentListener();
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.documentClickListener = (event) => {
+                const target = event.target;
+                if (!this.elementRef.nativeElement.contains(target)) {
+                    this.ngZone.run(() => {
+                        if (this.isOpen()) {
+                            this.markAsTouched();
+                            this.close();
+                        }
+                    });
+                }
+            };
+            setTimeout(() => {
+                document.addEventListener('click', this.documentClickListener, true);
+            }, 10);
+        });
+    }
+    removeDocumentListener() {
+        if (this.documentClickListener) {
+            document.removeEventListener('click', this.documentClickListener, true);
+            this.documentClickListener = undefined;
+        }
+    }
+    markTouched() {
+        this.markAsTouched();
+    }
+    /**
+     * Obtiene la fecha seleccionada en formato ISO string
+     * @returns string ISO o null si no hay fecha seleccionada
+     */
+    getISOString() {
+        const date = this.selectedDate();
+        return date ? date.toISOString() : null;
+    }
+    /**
+     * Establece la fecha desde un string ISO
+     * @param isoString - Fecha en formato ISO
+     */
+    setFromISOString(isoString) {
+        if (isoString) {
+            const date = new Date(isoString);
+            if (!isNaN(date.getTime())) {
+                this.writeValue(date);
+                this.onChange(isoString);
+            }
+        }
+        else {
+            this.clear();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DateTimePicker, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DateTimePicker, isStandalone: true, selector: "app-date-time-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DateTimePicker),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"datetime-container\">\r\n    <div \r\n      class=\"datetime-header\" \r\n      [class.active]=\"isOpen()\" \r\n      [class.disabled]=\"isDisabled()\"\r\n      (click)=\"toggle()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      tabindex=\"0\"\r\n    >\r\n      <span class=\"selected-text\" [class.placeholder]=\"!selectedDate()\">\r\n        {{ displayValue() || placeholder() }}\r\n      </span>\r\n  \r\n      <div class=\"header-icons\">\r\n        @if (selectedDate()) {\r\n          <span class=\"clear-icon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Limpiar\">\r\n            \u00D7\r\n          </span>\r\n        }\r\n        <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n      </div>\r\n    </div>\r\n  \r\n    @if (isOpen()) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"datetime-content\">\r\n        <!-- Secci\u00F3n del calendario -->\r\n        <div class=\"calendar-section\">\r\n          <!-- Navegaci\u00F3n del calendario -->\r\n          <div class=\"calendar-nav\">\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n                \u2039\u2039\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\r\n                \u2039\r\n              </button>\r\n            </div>\r\n            \r\n            <div class=\"current-date\">\r\n              {{ monthName() }} {{ currentYear() }}\r\n            </div>\r\n            \r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n                \u203A\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\r\n                \u203A\u203A\r\n              </button>\r\n            </div>\r\n          </div>\r\n  \r\n          <!-- D\u00EDas de la semana -->\r\n          <div class=\"weekdays\">\r\n            <div class=\"weekday\">Dom</div>\r\n            <div class=\"weekday\">Lun</div>\r\n            <div class=\"weekday\">Mar</div>\r\n            <div class=\"weekday\">Mi\u00E9</div>\r\n            <div class=\"weekday\">Jue</div>\r\n            <div class=\"weekday\">Vie</div>\r\n            <div class=\"weekday\">S\u00E1b</div>\r\n          </div>\r\n  \r\n          <!-- D\u00EDas del mes -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n              <div \r\n                class=\"calendar-day\" \r\n                [class.selected]=\"isDaySelected(day)\"\r\n                [class.today]=\"isToday(day)\"\r\n                [class.disabled]=\"isDayDisabled(day)\"\r\n                [class.empty]=\"!day\"\r\n                (click)=\"selectDay(day)\"\r\n              >\r\n                {{ day || '' }}\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n  \r\n        <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n        @if (mode() === 'datetime') {\r\n          <div class=\"time-section\">\r\n            <div class=\"time-header\">\r\n              Horario\r\n            </div>\r\n            \r\n            <div class=\"time-selectors\">\r\n              <div class=\"time-group\">\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Hora</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (hour of hours12(); track hour.value) {\r\n                      <div \r\n                        class=\"time-option\"\r\n                        [class.selected]=\"hour.value === selectedHour12()\"\r\n                        (click)=\"setHour12(hour.value)\"\r\n                      >\r\n                        {{ hour.display }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                \r\n                <div class=\"time-separator-vertical\">:</div>\r\n                \r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Min</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (minute of minutes(); track minute) {\r\n                      <div \r\n                        class=\"time-option\"\r\n                        [class.selected]=\"minute === selectedMinute()\"\r\n                        (click)=\"setMinute(minute)\"\r\n                      >\r\n                        {{ minute.toString().padStart(2, '0') }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                \r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">AM/PM</div>\r\n                  <div class=\"time-scroll ampm\">\r\n                    <div \r\n                      class=\"time-option\"\r\n                      [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                      (click)=\"setAmPm('AM')\"\r\n                    >\r\n                      AM\r\n                    </div>\r\n                    <div \r\n                      class=\"time-option\"\r\n                      [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                      (click)=\"setAmPm('PM')\"\r\n                    >\r\n                      PM\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n  \r\n      <!-- Botones de acci\u00F3n -->\r\n      <div class=\"action-buttons\">\r\n        <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n          Hoy\r\n        </button>\r\n        @if (mode() === 'datetime') {\r\n          <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n            Aceptar\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DateTimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-date-time-picker', imports: [], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateTimePicker),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"datetime-container\">\r\n    <div \r\n      class=\"datetime-header\" \r\n      [class.active]=\"isOpen()\" \r\n      [class.disabled]=\"isDisabled()\"\r\n      (click)=\"toggle()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      tabindex=\"0\"\r\n    >\r\n      <span class=\"selected-text\" [class.placeholder]=\"!selectedDate()\">\r\n        {{ displayValue() || placeholder() }}\r\n      </span>\r\n  \r\n      <div class=\"header-icons\">\r\n        @if (selectedDate()) {\r\n          <span class=\"clear-icon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Limpiar\">\r\n            \u00D7\r\n          </span>\r\n        }\r\n        <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n      </div>\r\n    </div>\r\n  \r\n    @if (isOpen()) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"datetime-content\">\r\n        <!-- Secci\u00F3n del calendario -->\r\n        <div class=\"calendar-section\">\r\n          <!-- Navegaci\u00F3n del calendario -->\r\n          <div class=\"calendar-nav\">\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n                \u2039\u2039\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\r\n                \u2039\r\n              </button>\r\n            </div>\r\n            \r\n            <div class=\"current-date\">\r\n              {{ monthName() }} {{ currentYear() }}\r\n            </div>\r\n            \r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n                \u203A\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\r\n                \u203A\u203A\r\n              </button>\r\n            </div>\r\n          </div>\r\n  \r\n          <!-- D\u00EDas de la semana -->\r\n          <div class=\"weekdays\">\r\n            <div class=\"weekday\">Dom</div>\r\n            <div class=\"weekday\">Lun</div>\r\n            <div class=\"weekday\">Mar</div>\r\n            <div class=\"weekday\">Mi\u00E9</div>\r\n            <div class=\"weekday\">Jue</div>\r\n            <div class=\"weekday\">Vie</div>\r\n            <div class=\"weekday\">S\u00E1b</div>\r\n          </div>\r\n  \r\n          <!-- D\u00EDas del mes -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n              <div \r\n                class=\"calendar-day\" \r\n                [class.selected]=\"isDaySelected(day)\"\r\n                [class.today]=\"isToday(day)\"\r\n                [class.disabled]=\"isDayDisabled(day)\"\r\n                [class.empty]=\"!day\"\r\n                (click)=\"selectDay(day)\"\r\n              >\r\n                {{ day || '' }}\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n  \r\n        <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n        @if (mode() === 'datetime') {\r\n          <div class=\"time-section\">\r\n            <div class=\"time-header\">\r\n              Horario\r\n            </div>\r\n            \r\n            <div class=\"time-selectors\">\r\n              <div class=\"time-group\">\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Hora</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (hour of hours12(); track hour.value) {\r\n                      <div \r\n                        class=\"time-option\"\r\n                        [class.selected]=\"hour.value === selectedHour12()\"\r\n                        (click)=\"setHour12(hour.value)\"\r\n                      >\r\n                        {{ hour.display }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                \r\n                <div class=\"time-separator-vertical\">:</div>\r\n                \r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Min</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (minute of minutes(); track minute) {\r\n                      <div \r\n                        class=\"time-option\"\r\n                        [class.selected]=\"minute === selectedMinute()\"\r\n                        (click)=\"setMinute(minute)\"\r\n                      >\r\n                        {{ minute.toString().padStart(2, '0') }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                \r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">AM/PM</div>\r\n                  <div class=\"time-scroll ampm\">\r\n                    <div \r\n                      class=\"time-option\"\r\n                      [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                      (click)=\"setAmPm('AM')\"\r\n                    >\r\n                      AM\r\n                    </div>\r\n                    <div \r\n                      class=\"time-option\"\r\n                      [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                      (click)=\"setAmPm('PM')\"\r\n                    >\r\n                      PM\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n  \r\n      <!-- Botones de acci\u00F3n -->\r\n      <div class=\"action-buttons\">\r\n        <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n          Hoy\r\n        </button>\r\n        @if (mode() === 'datetime') {\r\n          <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n            Aceptar\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+
+class InputNumberFilter {
+    elementRef;
+    ngZone;
+    // Inputs
+    filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    clearTrigger = input(0, ...(ngDevMode ? [{ debugName: "clearTrigger" }] : [])); // Increment this to trigger a clear
+    // Outputs
+    filterSelected = output();
+    valueChange = output();
+    // Internal State
+    activeFilterType = signal(null, ...(ngDevMode ? [{ debugName: "activeFilterType" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    filterValues = signal({}, ...(ngDevMode ? [{ debugName: "filterValues" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    // Computed Properties based on active filter
+    activeFilter = computed(() => {
+        const type = this.activeFilterType();
+        return this.filters().find(f => f.value === type) || null;
+    }, ...(ngDevMode ? [{ debugName: "activeFilter" }] : []));
+    placeholder = computed(() => this.activeFilter()?.placeholder || 'Escribir...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    filterValueKey = computed(() => this.activeFilter()?.value || '', ...(ngDevMode ? [{ debugName: "filterValueKey" }] : []));
+    documentClickListener;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(elementRef, ngZone) {
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        // Watch for clear trigger changes
+        effect(() => {
+            const trigger = this.clearTrigger();
+            if (trigger > 0) {
+                this.resetAllFilters();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.removeDocumentListener();
+    }
+    resetAllFilters() {
+        this.filterValues.set({});
+        this.inputValue.set('');
+        this.activeFilterType.set(null);
+        this.isOpen.set(false);
+    }
+    // ControlValueAccessor Implementation
+    writeValue(value) {
+        this.inputValue.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    // Public Methods
+    toggle(filterValue) {
+        if (this.isDisabled())
+            return;
+        if (this.activeFilterType() === filterValue && this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.activeFilterType.set(filterValue);
+            const currentValues = this.filterValues();
+            this.inputValue.set(currentValues[filterValue] || '');
+            this.open();
+        }
+    }
+    open() {
+        if (this.isDisabled())
+            return;
+        this.markAsTouched();
+        this.isOpen.set(true);
+        this.addDocumentListener();
+        // Focus input after a short delay to allow rendering
+        setTimeout(() => {
+            const inputEl = this.elementRef.nativeElement.querySelector('input');
+            if (inputEl)
+                inputEl.focus();
+        }, 50);
+    }
+    close() {
+        this.isOpen.set(false);
+        this.removeDocumentListener();
+        this.markAsTouched();
+    }
+    onInputChange(event) {
+        const value = event.target.value;
+        this.inputValue.set(value);
+        const type = this.activeFilterType();
+        if (type) {
+            this.filterValues.update(current => ({
+                ...current,
+                [type]: value
+            }));
+        }
+    }
+    applyFilter() {
+        const value = this.inputValue();
+        this.onChange(value);
+        this.valueChange.emit(value);
+        this.filterSelected.emit({
+            filter: this.filterValueKey(),
+            value: value,
+        });
+        this.close();
+    }
+    clear() {
+        this.inputValue.set('');
+        const type = this.activeFilterType();
+        if (type) {
+            this.filterValues.update(current => ({
+                ...current,
+                [type]: ''
+            }));
+        }
+        this.onChange(null);
+        this.valueChange.emit(null);
+        this.close();
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    addDocumentListener() {
+        if (this.documentClickListener)
+            this.removeDocumentListener();
+        this.ngZone.runOutsideAngular(() => {
+            this.documentClickListener = (event) => {
+                const target = event.target;
+                if (!this.elementRef.nativeElement.contains(target)) {
+                    this.ngZone.run(() => {
+                        if (this.isOpen()) {
+                            this.markAsTouched();
+                            this.close();
+                        }
+                    });
+                }
+            };
+            setTimeout(() => document.addEventListener('click', this.documentClickListener, true), 10);
+        });
+    }
+    removeDocumentListener() {
+        if (this.documentClickListener) {
+            document.removeEventListener('click', this.documentClickListener, true);
+            this.documentClickListener = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputNumberFilter, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: InputNumberFilter, isStandalone: true, selector: "app-input-number-filter", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, clearTrigger: { classPropertyName: "clearTrigger", publicName: "clearTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterSelected: "filterSelected", valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputNumberFilter),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"input-filter-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n    <div\r\n      class=\"chip\"\r\n      [class.active]=\"activeFilterType() === item.value\"\r\n      (click)=\"toggle(item.value)\"\r\n    >\r\n      <div class=\"content-chip\">\r\n        <div class=\"label-text\">\r\n          {{ filterValues()[item.value] || item.placeholder || item.label }}\r\n        </div>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-number-123\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 10l2 -2v8\" /><path d=\"M9 8h3a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h3\" /><path d=\"M17 8h2.5a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1 -1.5 1.5h-1.5h1.5a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1 -1.5 1.5h-2.5\" /></svg>\r\n      </div>\r\n\r\n      @if (isOpen() && activeFilterType() === item.value) {\r\n      <div class=\"dropdown\">\r\n        <div class=\"input-content\">\r\n          <input\r\n            type=\"number\"\r\n            [value]=\"inputValue()\"\r\n            (input)=\"onInputChange($event)\"\r\n            [placeholder]=\"placeholder()\"\r\n            (keydown.enter)=\"applyFilter()\"\r\n            class=\"filter-input\"\r\n          />\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".input-filter-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.content-chip{padding:6px 8px 6px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);padding-right:16px}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:300px;padding:15px;margin-top:10px}.input-content{display:flex;flex-direction:column;gap:15px}.filter-input{width:100%;padding:10px;border:1px solid #787861;border-radius:5px;background-color:#fdfdf5;color:#454733;font-size:1rem}.filter-input:focus{outline:none;border-color:#454733;box-shadow:0 0 0 2px #45473333}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputNumberFilter, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-input-number-filter', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputNumberFilter),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"input-filter-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n    <div\r\n      class=\"chip\"\r\n      [class.active]=\"activeFilterType() === item.value\"\r\n      (click)=\"toggle(item.value)\"\r\n    >\r\n      <div class=\"content-chip\">\r\n        <div class=\"label-text\">\r\n          {{ filterValues()[item.value] || item.placeholder || item.label }}\r\n        </div>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-number-123\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 10l2 -2v8\" /><path d=\"M9 8h3a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h3\" /><path d=\"M17 8h2.5a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1 -1.5 1.5h-1.5h1.5a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1 -1.5 1.5h-2.5\" /></svg>\r\n      </div>\r\n\r\n      @if (isOpen() && activeFilterType() === item.value) {\r\n      <div class=\"dropdown\">\r\n        <div class=\"input-content\">\r\n          <input\r\n            type=\"number\"\r\n            [value]=\"inputValue()\"\r\n            (input)=\"onInputChange($event)\"\r\n            [placeholder]=\"placeholder()\"\r\n            (keydown.enter)=\"applyFilter()\"\r\n            class=\"filter-input\"\r\n          />\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".input-filter-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.content-chip{padding:6px 8px 6px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);padding-right:16px}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:300px;padding:15px;margin-top:10px}.input-content{display:flex;flex-direction:column;gap:15px}.filter-input{width:100%;padding:10px;border:1px solid #787861;border-radius:5px;background-color:#fdfdf5;color:#454733;font-size:1rem}.filter-input:focus{outline:none;border-color:#454733;box-shadow:0 0 0 2px #45473333}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class InputSelectFilter {
+    elementRef;
+    ngZone;
+    // Inputs
+    filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    clearTrigger = input(0, ...(ngDevMode ? [{ debugName: "clearTrigger" }] : [])); // Increment this to trigger a clear
+    // Outputs
+    filterSelected = output();
+    valueChange = output();
+    // Internal State
+    activeFilterType = signal(null, ...(ngDevMode ? [{ debugName: "activeFilterType" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    selectedLabel = signal('', ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
+    filterValues = signal({}, ...(ngDevMode ? [{ debugName: "filterValues" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    // Computed Properties based on active filter
+    activeFilter = computed(() => {
+        const type = this.activeFilterType();
+        return this.filters().find(f => f.value === type) || null;
+    }, ...(ngDevMode ? [{ debugName: "activeFilter" }] : []));
+    placeholder = computed(() => this.activeFilter()?.placeholder || 'Seleccionar...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    filterValueKey = computed(() => this.activeFilter()?.value || '', ...(ngDevMode ? [{ debugName: "filterValueKey" }] : []));
+    options = computed(() => this.activeFilter()?.options || [], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    documentClickListener;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(elementRef, ngZone) {
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        // Watch for clear trigger changes
+        effect(() => {
+            const trigger = this.clearTrigger();
+            if (trigger > 0) {
+                this.resetAllFilters();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.removeDocumentListener();
+    }
+    resetAllFilters() {
+        this.filterValues.set({});
+        this.selectedLabel.set('');
+        this.activeFilterType.set(null);
+        this.isOpen.set(false);
+    }
+    // ControlValueAccessor Implementation
+    writeValue(value) {
+        // If we had a way to map value back to label without activeFilter, we would do it here.
+        // For now, we might need to rely on the consumer or just show the value if label not found.
+        // But since we only know options when activeFilter is set, this is tricky.
+        // However, usually writeValue is for the form control value.
+        // Let's just store it.
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    // Public Methods
+    toggle(filterValue) {
+        if (this.isDisabled())
+            return;
+        if (this.activeFilterType() === filterValue && this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.activeFilterType.set(filterValue);
+            this.open();
+        }
+    }
+    open() {
+        if (this.isDisabled())
+            return;
+        this.markAsTouched();
+        this.isOpen.set(true);
+        this.addDocumentListener();
+    }
+    close() {
+        this.isOpen.set(false);
+        this.removeDocumentListener();
+        this.markAsTouched();
+    }
+    selectOption(option) {
+        this.selectedLabel.set(option.label);
+        const type = this.activeFilterType();
+        if (type) {
+            this.filterValues.update(current => ({
+                ...current,
+                [type]: option.label // Show label in chip
+            }));
+        }
+        this.onChange(option.value);
+        this.valueChange.emit(option.value);
+        this.filterSelected.emit({
+            filter: this.filterValueKey(),
+            value: option.value,
+        });
+        this.close();
+    }
+    clear() {
+        this.selectedLabel.set('');
+        const type = this.activeFilterType();
+        if (type) {
+            this.filterValues.update(current => ({
+                ...current,
+                [type]: ''
+            }));
+        }
+        this.onChange(null);
+        this.valueChange.emit(null);
+        this.close();
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    addDocumentListener() {
+        if (this.documentClickListener)
+            this.removeDocumentListener();
+        this.ngZone.runOutsideAngular(() => {
+            this.documentClickListener = (event) => {
+                const target = event.target;
+                if (!this.elementRef.nativeElement.contains(target)) {
+                    this.ngZone.run(() => {
+                        if (this.isOpen()) {
+                            this.markAsTouched();
+                            this.close();
+                        }
+                    });
+                }
+            };
+            setTimeout(() => document.addEventListener('click', this.documentClickListener, true), 10);
+        });
+    }
+    removeDocumentListener() {
+        if (this.documentClickListener) {
+            document.removeEventListener('click', this.documentClickListener, true);
+            this.documentClickListener = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputSelectFilter, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: InputSelectFilter, isStandalone: true, selector: "app-input-select-filter", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, clearTrigger: { classPropertyName: "clearTrigger", publicName: "clearTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterSelected: "filterSelected", valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputSelectFilter),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"input-filter-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n    <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" (click)=\"toggle(item.value)\">\r\n      <div class=\"content-chip\">\r\n        <div class=\"label-text\">\r\n          {{ filterValues()[item.value] || item.placeholder || item.label }}\r\n        </div>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-list\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M9 6l11 0\" />\r\n          <path d=\"M9 12l11 0\" />\r\n          <path d=\"M9 18l11 0\" />\r\n          <path d=\"M5 6l0 .01\" />\r\n          <path d=\"M5 12l0 .01\" />\r\n          <path d=\"M5 18l0 .01\" />\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    @if (isOpen()) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"options-list\">\r\n        @for (option of options(); track option.value) {\r\n        <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n          {{ option.label }}\r\n        </div>\r\n        }\r\n        @if (options().length === 0) {\r\n        <div class=\"no-options\">No hay opciones</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n</div>", styles: [".input-filter-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.content-chip{padding:6px 8px 6px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);padding-right:16px}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputSelectFilter, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-input-select-filter', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputSelectFilter),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"input-filter-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n    <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" (click)=\"toggle(item.value)\">\r\n      <div class=\"content-chip\">\r\n        <div class=\"label-text\">\r\n          {{ filterValues()[item.value] || item.placeholder || item.label }}\r\n        </div>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-list\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M9 6l11 0\" />\r\n          <path d=\"M9 12l11 0\" />\r\n          <path d=\"M9 18l11 0\" />\r\n          <path d=\"M5 6l0 .01\" />\r\n          <path d=\"M5 12l0 .01\" />\r\n          <path d=\"M5 18l0 .01\" />\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    @if (isOpen()) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"options-list\">\r\n        @for (option of options(); track option.value) {\r\n        <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n          {{ option.label }}\r\n        </div>\r\n        }\r\n        @if (options().length === 0) {\r\n        <div class=\"no-options\">No hay opciones</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n</div>", styles: [".input-filter-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.content-chip{padding:6px 8px 6px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);padding-right:16px}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class InputTextFilter {
+    elementRef;
+    ngZone;
+    // Inputs
+    filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    clearTrigger = input(0, ...(ngDevMode ? [{ debugName: "clearTrigger" }] : [])); // Increment this to trigger a clear
+    // Outputs
+    filterSelected = output();
+    valueChange = output();
+    // Internal State
+    activeFilterType = signal(null, ...(ngDevMode ? [{ debugName: "activeFilterType" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    filterValues = signal({}, ...(ngDevMode ? [{ debugName: "filterValues" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    // Computed Properties based on active filter
+    activeFilter = computed(() => {
+        const type = this.activeFilterType();
+        return this.filters().find(f => f.value === type) || null;
+    }, ...(ngDevMode ? [{ debugName: "activeFilter" }] : []));
+    placeholder = computed(() => this.activeFilter()?.placeholder || 'Escribir...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    filterValueKey = computed(() => this.activeFilter()?.value || '', ...(ngDevMode ? [{ debugName: "filterValueKey" }] : []));
+    documentClickListener;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(elementRef, ngZone) {
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        // Watch for clear trigger changes
+        effect(() => {
+            const trigger = this.clearTrigger();
+            if (trigger > 0) {
+                this.resetAllFilters();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.removeDocumentListener();
+    }
+    resetAllFilters() {
+        this.filterValues.set({});
+        this.inputValue.set('');
+        this.activeFilterType.set(null);
+        this.isOpen.set(false);
+    }
+    // ControlValueAccessor Implementation
+    writeValue(value) {
+        this.inputValue.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    // Public Methods
+    toggle(filterValue) {
+        if (this.isDisabled())
+            return;
+        if (this.activeFilterType() === filterValue && this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.activeFilterType.set(filterValue);
+            const currentValues = this.filterValues();
+            this.inputValue.set(currentValues[filterValue] || '');
+            this.open();
+        }
+    }
+    open() {
+        if (this.isDisabled())
+            return;
+        this.markAsTouched();
+        this.isOpen.set(true);
+        this.addDocumentListener();
+        // Focus input after a short delay to allow rendering
+        setTimeout(() => {
+            const inputEl = this.elementRef.nativeElement.querySelector('input');
+            if (inputEl)
+                inputEl.focus();
+        }, 50);
+    }
+    close() {
+        this.isOpen.set(false);
+        this.removeDocumentListener();
+        this.markAsTouched();
+    }
+    onInputChange(event) {
+        const value = event.target.value;
+        this.inputValue.set(value);
+        const type = this.activeFilterType();
+        if (type) {
+            this.filterValues.update(current => ({
+                ...current,
+                [type]: value
+            }));
+        }
+    }
+    applyFilter() {
+        const value = this.inputValue();
+        this.onChange(value);
+        this.valueChange.emit(value);
+        this.filterSelected.emit({
+            filter: this.filterValueKey(),
+            value: value,
+        });
+        this.close();
+    }
+    clear() {
+        this.inputValue.set('');
+        const type = this.activeFilterType();
+        if (type) {
+            this.filterValues.update(current => ({
+                ...current,
+                [type]: ''
+            }));
+        }
+        this.onChange(null);
+        this.valueChange.emit(null);
+        this.close();
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    addDocumentListener() {
+        if (this.documentClickListener)
+            this.removeDocumentListener();
+        this.ngZone.runOutsideAngular(() => {
+            this.documentClickListener = (event) => {
+                const target = event.target;
+                if (!this.elementRef.nativeElement.contains(target)) {
+                    this.ngZone.run(() => {
+                        if (this.isOpen()) {
+                            this.markAsTouched();
+                            this.close();
+                        }
+                    });
+                }
+            };
+            setTimeout(() => document.addEventListener('click', this.documentClickListener, true), 10);
+        });
+    }
+    removeDocumentListener() {
+        if (this.documentClickListener) {
+            document.removeEventListener('click', this.documentClickListener, true);
+            this.documentClickListener = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputTextFilter, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: InputTextFilter, isStandalone: true, selector: "app-input-text-filter", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, clearTrigger: { classPropertyName: "clearTrigger", publicName: "clearTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterSelected: "filterSelected", valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputTextFilter),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"input-filter-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n    <div\r\n      class=\"chip\"\r\n      [class.active]=\"activeFilterType() === item.value\"\r\n      (click)=\"toggle(item.value)\"\r\n    >\r\n      <div class=\"content-chip\">\r\n        <div class=\"label-text\">\r\n          {{ filterValues()[item.value] || item.placeholder || item.label }}\r\n        </div>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-abc\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 16v-6a2 2 0 1 1 4 0v6\" /><path d=\"M3 13h4\" /><path d=\"M10 8v6a2 2 0 1 0 4 0v-1a2 2 0 1 0 -4 0v1\" /><path d=\"M20.732 12a2 2 0 0 0 -3.732 1v1a2 2 0 0 0 3.726 1.01\" /></svg>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <div class=\"input-content\">\r\n      <input\r\n        type=\"text\"\r\n        [value]=\"inputValue()\"\r\n        (input)=\"onInputChange($event)\"\r\n        [placeholder]=\"placeholder()\"\r\n        (keydown.enter)=\"applyFilter()\"\r\n        class=\"filter-input\"\r\n      />\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".input-filter-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.content-chip{padding:6px 8px 6px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);padding-right:16px}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:300px;padding:15px}.input-content{display:flex;flex-direction:column;gap:15px}.filter-input{width:100%;padding:10px;border:1px solid #787861;border-radius:5px;background-color:#fdfdf5;color:#454733;font-size:1rem}.filter-input:focus{outline:none;border-color:#454733;box-shadow:0 0 0 2px #45473333}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputTextFilter, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-input-text-filter', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputTextFilter),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"input-filter-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n    <div\r\n      class=\"chip\"\r\n      [class.active]=\"activeFilterType() === item.value\"\r\n      (click)=\"toggle(item.value)\"\r\n    >\r\n      <div class=\"content-chip\">\r\n        <div class=\"label-text\">\r\n          {{ filterValues()[item.value] || item.placeholder || item.label }}\r\n        </div>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-abc\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 16v-6a2 2 0 1 1 4 0v6\" /><path d=\"M3 13h4\" /><path d=\"M10 8v6a2 2 0 1 0 4 0v-1a2 2 0 1 0 -4 0v1\" /><path d=\"M20.732 12a2 2 0 0 0 -3.732 1v1a2 2 0 0 0 3.726 1.01\" /></svg>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <div class=\"input-content\">\r\n      <input\r\n        type=\"text\"\r\n        [value]=\"inputValue()\"\r\n        (input)=\"onInputChange($event)\"\r\n        [placeholder]=\"placeholder()\"\r\n        (keydown.enter)=\"applyFilter()\"\r\n        class=\"filter-input\"\r\n      />\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".input-filter-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.content-chip{padding:6px 8px 6px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);padding-right:16px}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:300px;padding:15px}.input-content{display:flex;flex-direction:column;gap:15px}.filter-input{width:100%;padding:10px;border:1px solid #787861;border-radius:5px;background-color:#fdfdf5;color:#454733;font-size:1rem}.filter-input:focus{outline:none;border-color:#454733;box-shadow:0 0 0 2px #45473333}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class SelectCustomSearch {
+    elementRef;
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    placeholder = input('Seleccionar opción', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    selectionChange = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    selectedOption = computed(() => {
+        const value = this.selectedValue();
+        return this.options().find((option) => option.value === value) || null;
+    }, ...(ngDevMode ? [{ debugName: "selectedOption" }] : []));
+    filteredOptions = computed(() => {
+        const term = this.searchTerm().toLowerCase().trim();
+        const opts = this.options();
+        if (!term)
+            return opts;
+        return opts.filter((option) => option.label.toLowerCase().includes(term) ||
+            option.value.toString().toLowerCase().includes(term));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    writeValue(value) {
+        this.selectedValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.isDisabled())
+            return;
+        this.isOpen.set(true);
+        this.searchTerm.set('');
+        setTimeout(() => {
+            const input = this.elementRef.nativeElement.querySelector('.search-input');
+            if (input)
+                input.focus();
+        });
+    }
+    close() {
+        this.isOpen.set(false);
+        this.searchTerm.set('');
+    }
+    selectOption(option) {
+        if (this.isDisabled())
+            return;
+        this.selectedValue.set(option.value);
+        this.onChange(option.value);
+        this.onTouched();
+        this.selectionChange.emit(option);
+        this.close();
+    }
+    onSearch(event) {
+        if (this.isDisabled())
+            return;
+        const target = event.target;
+        this.searchTerm.set(target.value);
+    }
+    onKeyDown(event) {
+        if (this.isDisabled())
+            return;
+        if (event.key === 'Escape') {
+            this.close();
+        }
+        else if (event.key === 'Enter') {
+            const filtered = this.filteredOptions();
+            if (filtered.length > 0) {
+                this.selectOption(filtered[0]);
+            }
+        }
+    }
+    onDocumentClick(event) {
+        if (!this.isDisabled() && !this.elementRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectCustomSearch, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SelectCustomSearch, isStandalone: true, selector: "app-select-custom-search", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectCustomSearch),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"select-container\">\r\n  <div class=\"select-header\" [class.active]=\"isOpen()\" (click)=\"toggle()\">\r\n    <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"search-input\"\r\n      [value]=\"searchTerm()\"\r\n      placeholder=\"Buscar...\"\r\n      (input)=\"onSearch($event)\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n    />\r\n\r\n    @if (filteredOptions().length > 0) {\r\n    <div class=\"options\">\r\n      @for (option of filteredOptions(); track option.value) {\r\n      <div\r\n        class=\"option\"\r\n        [class.selected]=\"option.value === selectedValue()\"\r\n        (click)=\"selectOption(option)\"\r\n        [attr.disabled]=\"isDisabled()\"\r\n      >\r\n        {{ option.label }}\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"no-results\">No se encontraron resultados</div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.selected-text{color:#454733;font-size:1.3rem}.selected-text.placeholder{color:#787861}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:1000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectCustomSearch, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-select-custom-search', imports: [], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectCustomSearch),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"select-container\">\r\n  <div class=\"select-header\" [class.active]=\"isOpen()\" (click)=\"toggle()\">\r\n    <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"search-input\"\r\n      [value]=\"searchTerm()\"\r\n      placeholder=\"Buscar...\"\r\n      (input)=\"onSearch($event)\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n    />\r\n\r\n    @if (filteredOptions().length > 0) {\r\n    <div class=\"options\">\r\n      @for (option of filteredOptions(); track option.value) {\r\n      <div\r\n        class=\"option\"\r\n        [class.selected]=\"option.value === selectedValue()\"\r\n        (click)=\"selectOption(option)\"\r\n        [attr.disabled]=\"isDisabled()\"\r\n      >\r\n        {{ option.label }}\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"no-results\">No se encontraron resultados</div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.selected-text{color:#454733;font-size:1.3rem}.selected-text.placeholder{color:#787861}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:1000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class DynamicFormFields {
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : []));
+    copyFromSubscriptions = [];
+    realTimeCopySubscriptions = [];
+    ngOnInit() {
+        setTimeout(() => {
+            this.setupCopyFromLogic();
+        }, 100);
+    }
+    getDatePickerMode(fieldType) {
+        return fieldType === 'datetime-local' ? 'datetime' : 'date';
+    }
+    setupCopyFromLogic() {
+        this.sections().forEach((section) => {
+            section.fields.forEach((field) => {
+                if (field.copyFrom) {
+                    this.setupFieldCopy(field);
+                }
+            });
+        });
+    }
+    setupFieldCopy(field) {
+        const targetControl = this.form().get(field.key);
+        if (!targetControl)
+            return;
+        const sourceControl = this.form().get(field.copyFrom);
+        if (!sourceControl)
+            return;
+        const triggerFieldKey = this.findTriggerField();
+        if (!triggerFieldKey) {
+            this.setupSimpleCopy(sourceControl, targetControl);
+            return;
+        }
+        const triggerControl = this.form().get(triggerFieldKey);
+        if (!triggerControl) {
+            this.setupSimpleCopy(sourceControl, targetControl);
+            return;
+        }
+        const subscription = triggerControl.valueChanges.subscribe((shouldCopy) => {
+            if (shouldCopy) {
+                targetControl.setValue(sourceControl.value);
+                targetControl.disable();
+                this.setupRealTimeCopy(sourceControl, targetControl, field.key);
+            }
+            else {
+                targetControl.enable();
+                targetControl.setValue('');
+                this.removeRealTimeCopy(field.key);
+            }
+        });
+        this.copyFromSubscriptions.push(subscription);
+        if (triggerControl.value === true) {
+            targetControl.setValue(sourceControl.value);
+            targetControl.disable();
+            this.setupRealTimeCopy(sourceControl, targetControl, field.key);
+        }
+    }
+    findTriggerField() {
+        for (const section of this.sections()) {
+            const triggerField = section.fields.find((f) => f.type === 'radio' &&
+                (f.key.includes('is_owner') || f.key.includes('infractor-owner')));
+            if (triggerField)
+                return triggerField.key;
+        }
+        return '';
+    }
+    setupSimpleCopy(sourceControl, targetControl) {
+        const subscription = sourceControl.valueChanges.subscribe((value) => {
+            targetControl.setValue(value);
+        });
+        this.copyFromSubscriptions.push(subscription);
+    }
+    setupRealTimeCopy(sourceControl, targetControl, fieldKey) {
+        this.removeRealTimeCopy(fieldKey);
+        const subscription = sourceControl.valueChanges.subscribe((value) => {
+            targetControl.setValue(value);
+        });
+        this.realTimeCopySubscriptions.push({
+            fieldKey,
+            subscription,
+        });
+    }
+    removeRealTimeCopy(fieldKey) {
+        const index = this.realTimeCopySubscriptions.findIndex((item) => item.fieldKey === fieldKey);
+        if (index >= 0) {
+            this.realTimeCopySubscriptions[index].subscription.unsubscribe();
+            this.realTimeCopySubscriptions.splice(index, 1);
+        }
+    }
+    ctrl = (key) => this.form().get(key);
+    getCheckboxArray(key) {
+        return this.form().get(key);
+    }
+    onCheckboxChange(event, fieldKey, optionIndex) {
+        const checkbox = event.target;
+        const checkboxArray = this.getCheckboxArray(fieldKey);
+        checkboxArray.at(optionIndex).setValue(checkbox.checked);
+    }
+    ngOnDestroy() {
+        this.copyFromSubscriptions.forEach((sub) => sub.unsubscribe());
+        this.realTimeCopySubscriptions.forEach((item) => item.subscription.unsubscribe());
+    }
+    onCancel() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DynamicFormFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DynamicFormFields, isStandalone: true, selector: "app-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <app-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <app-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\"\r\n            />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:25px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #ebe8d6);padding:0 4px;font-weight:500;z-index:1}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "app-select-custom-search", inputs: ["options", "placeholder"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "app-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate"], outputs: ["dateChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DynamicFormFields, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <app-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <app-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\"\r\n            />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:25px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #ebe8d6);padding:0 4px;font-weight:500;z-index:1}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }] } });
+
+class WizardForm {
+    form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
+    currentStep = input(1, ...(ngDevMode ? [{ debugName: "currentStep" }] : []));
+    steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : []));
+    canContinue = output();
+    // Devuelve la key del paso
+    currentStepKey = computed(() => {
+        const index = this.currentStep() - 1;
+        return this.steps()[index]?.key ?? null;
+    }, ...(ngDevMode ? [{ debugName: "currentStepKey" }] : []));
+    // Devuelve el subform correspondiente
+    currentGroup = computed(() => {
+        const key = this.currentStepKey();
+        return key ? this.form()?.get(key) : null;
+    }, ...(ngDevMode ? [{ debugName: "currentGroup" }] : []));
+    constructor() {
+        effect(() => {
+            const group = this.currentGroup();
+            if (!group) {
+                this.canContinue.emit(false);
+                return;
+            }
+            this.canContinue.emit(group.valid);
+            group.statusChanges.subscribe(() => {
+                this.canContinue.emit(group.valid);
+            });
+            group.valueChanges.subscribe(() => {
+                this.canContinue.emit(group.valid);
+            });
+        });
+    }
+    currentGroupComponent = computed(() => {
+        const index = this.currentStep() - 1;
+        return this.steps()[index].component;
+    }, ...(ngDevMode ? [{ debugName: "currentGroupComponent" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: WizardForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: WizardForm, isStandalone: true, selector: "lib-wizard-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { canContinue: "canContinue" }, ngImport: i0, template: "<ng-container>\r\n\r\n  @if (currentGroup()) {\r\n    <ng-container *ngComponentOutlet=\"currentGroupComponent()\"></ng-container>\r\n  }\r\n\r\n</ng-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: WizardForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-wizard-form', standalone: true, imports: [CommonModule], template: "<ng-container>\r\n\r\n  @if (currentGroup()) {\r\n    <ng-container *ngComponentOutlet=\"currentGroupComponent()\"></ng-container>\r\n  }\r\n\r\n</ng-container>" }]
+        }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], canContinue: [{ type: i0.Output, args: ["canContinue"] }] } });
+
+class ModalForm {
+    title = input('Formulario', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    submitLabel = input('Guardar', ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
+    form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
+    steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : []));
+    currentStep = signal(1, ...(ngDevMode ? [{ debugName: "currentStep" }] : []));
+    canContinue = signal(false, ...(ngDevMode ? [{ debugName: "canContinue" }] : []));
+    onSubmit = output();
+    onCancel = output();
+    nextStep() {
+        if (this.currentStep() < this.steps().length) {
+            this.currentStep.update(v => v + 1);
+        }
+    }
+    prevStep() {
+        if (this.currentStep() > 1) {
+            this.currentStep.update(v => v - 1);
+        }
+    }
+    submitForm() {
+        this.onSubmit.emit(this.form()?.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ModalForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ModalForm, isStandalone: true, selector: "lib-modal-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, ngImport: i0, template: "<div class=\"modal-form-container\">\r\n\r\n  <div class=\"header-content\">\r\n    <h1>{{ title() }}</h1>\r\n  </div>\r\n\r\n  <div class=\"steps\">\r\n    @for (step of steps(); track $index) {\r\n      <div\r\n        class=\"step\"\r\n        [class.step-active]=\"currentStep() === $index + 1\"\r\n        [class.step-completed]=\"currentStep() > $index + 1\"\r\n      >\r\n        @if (currentStep() > $index + 1) {\r\n          <span class=\"check-icon\">\u2714</span>\r\n        }\r\n        <span>Paso {{ $index + 1 }}: {{ step.label }}</span>\r\n      </div>\r\n\r\n      @if ($index < steps().length - 1) {\r\n        <span class=\"separator\">\u203A</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"divider\"></div>\r\n\r\n  <!-- Render din\u00E1mico del paso actual -->\r\n  <lib-wizard-form\r\n    [form]=\"form()\"\r\n    [currentStep]=\"currentStep()\"\r\n    [steps]=\"steps()\"\r\n    (canContinue)=\"canContinue.set($event)\"\r\n  ></lib-wizard-form>\r\n\r\n  <div class=\"actions\">\r\n    @if (currentStep() === 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">Cancelar</button>\r\n    } @else {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"prevStep()\">Volver</button>\r\n    }\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn\"\r\n      (click)=\"currentStep() === steps().length ? submitForm() : nextStep()\"\r\n      [disabled]=\"!canContinue()\"\r\n    >\r\n      {{ currentStep() === steps().length ? submitLabel() : 'Continuar' }}\r\n    </button>\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WizardForm, selector: "lib-wizard-form", inputs: ["form", "currentStep", "steps"], outputs: ["canContinue"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ModalForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-modal-form', standalone: true, imports: [CommonModule, WizardForm], template: "<div class=\"modal-form-container\">\r\n\r\n  <div class=\"header-content\">\r\n    <h1>{{ title() }}</h1>\r\n  </div>\r\n\r\n  <div class=\"steps\">\r\n    @for (step of steps(); track $index) {\r\n      <div\r\n        class=\"step\"\r\n        [class.step-active]=\"currentStep() === $index + 1\"\r\n        [class.step-completed]=\"currentStep() > $index + 1\"\r\n      >\r\n        @if (currentStep() > $index + 1) {\r\n          <span class=\"check-icon\">\u2714</span>\r\n        }\r\n        <span>Paso {{ $index + 1 }}: {{ step.label }}</span>\r\n      </div>\r\n\r\n      @if ($index < steps().length - 1) {\r\n        <span class=\"separator\">\u203A</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"divider\"></div>\r\n\r\n  <!-- Render din\u00E1mico del paso actual -->\r\n  <lib-wizard-form\r\n    [form]=\"form()\"\r\n    [currentStep]=\"currentStep()\"\r\n    [steps]=\"steps()\"\r\n    (canContinue)=\"canContinue.set($event)\"\r\n  ></lib-wizard-form>\r\n\r\n  <div class=\"actions\">\r\n    @if (currentStep() === 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">Cancelar</button>\r\n    } @else {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"prevStep()\">Volver</button>\r\n    }\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn\"\r\n      (click)=\"currentStep() === steps().length ? submitForm() : nextStep()\"\r\n      [disabled]=\"!canContinue()\"\r\n    >\r\n      {{ currentStep() === steps().length ? submitLabel() : 'Continuar' }}\r\n    </button>\r\n  </div>\r\n</div>" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }] } });
+
 // src/app/components/public-api.ts
 // Exportar el componente
 
@@ -541,5 +1773,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DateTimeFilter, PaginationComponent, Table };
+export { DateTimeFilter, DateTimePicker, DynamicFormFields, InputNumberFilter, InputSelectFilter, InputTextFilter, ModalForm, PaginationComponent, SelectCustomSearch, Table, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map