sapenlinea-components 0.0.23 → 0.0.24

package/fesm2022/sapenlinea-components.mjs

@@ -17,8 +17,41 @@ class DateTimeFilter {
     activeFilterType = signal(null, ...(ngDevMode ? [{ debugName: "activeFilterType" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     selectedDate = signal(null, ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
+    inputTextValue = signal('', ...(ngDevMode ? [{ debugName: "inputTextValue" }] : []));
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    // Máscara visual dinámica para la guía de fecha __/__/____
+    // Devuelve un arreglo de caracteres con flag "filled" para poder dar color distinto
+    inputMask = computed(() => {
+        const raw = this.inputTextValue() || '';
+        const numbersOnly = raw.replace(/\D/g, '');
+        const template = [
+            { char: 'd', filled: false },
+            { char: 'd', filled: false },
+            { char: '/', filled: false },
+            { char: 'm', filled: false },
+            { char: 'm', filled: false },
+            { char: '/', filled: false },
+            { char: 'y', filled: false },
+            { char: 'y', filled: false },
+            { char: 'y', filled: false },
+            { char: 'y', filled: false },
+        ];
+        let index = 0;
+        for (let i = 0; i < template.length && index < numbersOnly.length; i++) {
+            if (template[i].char === '/')
+                continue;
+            template[i] = { char: numbersOnly[index++], filled: true };
+        }
+        // Cuando se completa el segmento, el slash correspondiente pasa a "filled"
+        if (numbersOnly.length >= 2) {
+            template[2] = { char: '/', filled: true }; // después de DD
+        }
+        if (numbersOnly.length >= 4) {
+            template[5] = { char: '/', filled: true }; // después de MM
+        }
+        return template; // para usar en el template y colorear por carácter
+    }, ...(ngDevMode ? [{ debugName: "inputMask" }] : []));
     clearTrigger = input(0, ...(ngDevMode ? [{ debugName: "clearTrigger" }] : []));
     // Computed Properties based on active filter
     activeFilter = computed(() => {
@@ -125,7 +158,7 @@ class DateTimeFilter {
         const newDate = new Date(this.currentYear(), this.currentMonth(), day, this.selectedHour(), this.selectedMinute());
         if (this.isDateDisabled(newDate))
             return;
-        this.selectedDate.set(newDate);
+        this.updateInternalState(newDate);
         this.onChange(newDate.toISOString());
         this.markAsTouched();
         this.dateChange.emit(newDate);
@@ -154,6 +187,81 @@ class DateTimeFilter {
         }
         return date.toLocaleDateString('es-ES', options);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    // Input text handling
+    onInputChange(event, filterValue) {
+        if (this.isDisabled())
+            return;
+        const input = event.target;
+        let value = input.value;
+        // Remove all non-numeric characters
+        const numbersOnly = value.replace(/\D/g, '');
+        // Limit to 8 digits (DD/MM/YYYY)
+        const limitedNumbers = numbersOnly.slice(0, 8);
+        // Format with slashes: DD/MM/YYYY
+        let formatted = '';
+        if (limitedNumbers.length > 0) {
+            formatted = limitedNumbers.slice(0, 2);
+            if (limitedNumbers.length > 2) {
+                formatted += '/' + limitedNumbers.slice(2, 4);
+            }
+            if (limitedNumbers.length > 4) {
+                formatted += '/' + limitedNumbers.slice(4, 8);
+            }
+        }
+        // Update the input value
+        this.inputTextValue.set(formatted);
+        input.value = formatted;
+        this.markAsTouched();
+        // Only parse when we have a complete date (DD/MM/YYYY = 10 characters)
+        if (formatted.length === 10) {
+            const parsedDate = this.parseDateInput(formatted);
+            if (parsedDate) {
+                if (this.isDateDisabled(parsedDate)) {
+                    // Invalid date (out of range), but keep the text
+                    return;
+                }
+                this.updateInternalState(parsedDate);
+                this.onChange(parsedDate.toISOString());
+                this.dateChange.emit(parsedDate);
+                this.dateSelected.emit({
+                    filter: filterValue,
+                    value: parsedDate,
+                });
+            }
+        }
+        else if (formatted.trim() === '') {
+            // Clear if input is empty
+            this.resetInternalState();
+            this.onChange(null);
+            this.dateChange.emit(null);
+        }
+    }
+    onInputFocus(filterValue) {
+        if (this.isDisabled())
+            return;
+        this.activeFilterType.set(filterValue);
+        this.open();
+    }
+    parseDateInput(input) {
+        if (!input || input.trim() === '')
+            return null;
+        // Only accept DD/MM/YYYY format
+        const match = input.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+        if (match) {
+            const day = parseInt(match[1], 10);
+            const month = parseInt(match[2], 10) - 1;
+            const year = parseInt(match[3], 10);
+            // Validate date
+            if (day >= 1 && day <= 31 && month >= 0 && month <= 11 && year >= 1900 && year <= 2100) {
+                const date = new Date(year, month, day);
+                // Check if date is valid (handles invalid dates like 31/02/2024)
+                if (date.getDate() === day && date.getMonth() === month && date.getFullYear() === year) {
+                    return date;
+                }
+            }
+        }
+        return null;
+    }
     monthName = computed(() => {
         const months = [
             'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
@@ -201,13 +309,23 @@ class DateTimeFilter {
         this.selectedHour.set(date.getHours());
         this.selectedMinute.set(date.getMinutes());
         this.selectedAmPm.set(date.getHours() >= 12 ? 'PM' : 'AM');
+        // Update input text value to match the formatted date
+        const formatted = this.formatDateForInput(date);
+        this.inputTextValue.set(formatted);
     }
     resetInternalState() {
         this.selectedDate.set(null);
+        this.inputTextValue.set('');
         this.selectedHour.set(0);
         this.selectedMinute.set(0);
         this.selectedAmPm.set('AM');
     }
+    formatDateForInput(date) {
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
     markAsTouched() {
         if (!this.isTouched()) {
             this.isTouched.set(true);
@@ -312,6 +430,9 @@ class DateTimeFilter {
         newDate.setHours(this.selectedHour());
         newDate.setMinutes(this.selectedMinute());
         this.selectedDate.set(newDate);
+        // Update input text value
+        const formatted = this.formatDateForInput(newDate);
+        this.inputTextValue.set(formatted);
         this.onChange(newDate.toISOString());
         this.markAsTouched();
         this.dateChange.emit(newDate);
@@ -354,7 +475,7 @@ class DateTimeFilter {
                 useExisting: forwardRef(() => DateTimeFilter),
                 multi: true,
             },
-        ], 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 }] });
+        ], ngImport: i0, template: "<div class=\"datetime-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n      <div\r\n        class=\"chip-input-wrapper\"\r\n        [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n        [class.active]=\"activeFilterType() === item.value\"\r\n      >\r\n        <!-- Etiqueta flotante -->\r\n        <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n        <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n        <div class=\"chip-input-mask\">\r\n          @for (part of inputMask(); track $index) {\r\n            <span\r\n              class=\"mask-char\"\r\n              [class.mask-char-filled]=\"part.filled\"\r\n              [class.mask-char-placeholder]=\"!part.filled\"\r\n            >\r\n              {{ part.char }}\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <input\r\n          type=\"text\"\r\n          [value]=\"inputTextValue()\"\r\n          (input)=\"onInputChange($event, item.value)\"\r\n          (focus)=\"onInputFocus(item.value)\"\r\n          [placeholder]=\"''\"\r\n          class=\"chip-input\"\r\n          [disabled]=\"isDisabled()\"\r\n        />\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"calendar-icon-button\"\r\n          (click)=\"toggle(item.value)\"\r\n          title=\"Abrir calendario\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\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        </button>\r\n\r\n        @if (isOpen() && activeFilterType() === item.value) {\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\">\r\n                    {{ monthName() }} {{ currentYear() }}\r\n                  </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    }\r\n  </div>\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-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip-input-wrapper.has-value .floating-label{opacity:.6}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 16px;height:100%;width:100%;color:transparent;caret-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);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input-mask{position:absolute;left:16px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;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);z-index:1;display:flex}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.calendar-icon-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.calendar-icon-button:active{background-color:#78786133}.calendar-icon-button svg{width:18px;height:18px}.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.15", ngImport: i0, type: DateTimeFilter, decorators: [{
             type: Component,
@@ -364,7 +485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => DateTimeFilter),
                             multi: true,
                         },
-                    ], 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"] }]
+                    ], template: "<div class=\"datetime-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n      <div\r\n        class=\"chip-input-wrapper\"\r\n        [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n        [class.active]=\"activeFilterType() === item.value\"\r\n      >\r\n        <!-- Etiqueta flotante -->\r\n        <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n        <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n        <div class=\"chip-input-mask\">\r\n          @for (part of inputMask(); track $index) {\r\n            <span\r\n              class=\"mask-char\"\r\n              [class.mask-char-filled]=\"part.filled\"\r\n              [class.mask-char-placeholder]=\"!part.filled\"\r\n            >\r\n              {{ part.char }}\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <input\r\n          type=\"text\"\r\n          [value]=\"inputTextValue()\"\r\n          (input)=\"onInputChange($event, item.value)\"\r\n          (focus)=\"onInputFocus(item.value)\"\r\n          [placeholder]=\"''\"\r\n          class=\"chip-input\"\r\n          [disabled]=\"isDisabled()\"\r\n        />\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"calendar-icon-button\"\r\n          (click)=\"toggle(item.value)\"\r\n          title=\"Abrir calendario\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\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        </button>\r\n\r\n        @if (isOpen() && activeFilterType() === item.value) {\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\">\r\n                    {{ monthName() }} {{ currentYear() }}\r\n                  </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    }\r\n  </div>\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-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip-input-wrapper.has-value .floating-label{opacity:.6}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 16px;height:100%;width:100%;color:transparent;caret-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);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input-mask{position:absolute;left:16px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;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);z-index:1;display:flex}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.calendar-icon-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.calendar-icon-button:active{background-color:#78786133}.calendar-icon-button svg{width:18px;height:18px}.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"] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }] } });
 
 class PaginationComponent {
@@ -575,11 +696,11 @@ class Table {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", 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 (click)=\"col.sortable !== false && onSort(col)\" \r\n        [class.sortable]=\"col.sortable !== false\"\r\n        [class]=\"getAlignment(col)\">\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 class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            <span class=\"status-dot\" [style.background-color]=\"style.color\"></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 xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\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 getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item\" [style.color]=\"option.color\" (click)=\"onOptionClick(option, row)\">\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>", 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,.icon-edit,.icon-activate,.icon-deactivate{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.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>')}.icon-edit{-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=\"M12 20h9\"/><path d=\"M16.5 3.5l4 4L8 20l-4 1 1-4L16.5 3.5z\"/></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=\"M12 20h9\"/><path d=\"M16.5 3.5l4 4L8 20l-4 1 1-4L16.5 3.5z\"/></svg>')}.icon-activate{-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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9 12l2 2 4-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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9 12l2 2 4-4\"/></svg>')}.icon-deactivate{-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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", 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 (click)=\"col.sortable !== false && onSort(col)\" \r\n        [class.sortable]=\"col.sortable !== false\"\r\n        [class]=\"getAlignment(col)\">\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 class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            <span class=\"status-dot\" [style.background-color]=\"style.color\"></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 xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\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 getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item\" [style.color]=\"option.color\" (click)=\"onOptionClick(option, row)\">\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>", 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-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.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-delete{-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>')}.icon-edit{-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=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 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=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-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=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></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=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-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=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></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=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-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=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></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=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,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.15", 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 (click)=\"col.sortable !== false && onSort(col)\" \r\n        [class.sortable]=\"col.sortable !== false\"\r\n        [class]=\"getAlignment(col)\">\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 class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            <span class=\"status-dot\" [style.background-color]=\"style.color\"></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 xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\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 getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item\" [style.color]=\"option.color\" (click)=\"onOptionClick(option, row)\">\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>", 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,.icon-edit,.icon-activate,.icon-deactivate{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.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>')}.icon-edit{-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=\"M12 20h9\"/><path d=\"M16.5 3.5l4 4L8 20l-4 1 1-4L16.5 3.5z\"/></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=\"M12 20h9\"/><path d=\"M16.5 3.5l4 4L8 20l-4 1 1-4L16.5 3.5z\"/></svg>')}.icon-activate{-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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9 12l2 2 4-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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9 12l2 2 4-4\"/></svg>')}.icon-deactivate{-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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,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"] }]
+            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 (click)=\"col.sortable !== false && onSort(col)\" \r\n        [class.sortable]=\"col.sortable !== false\"\r\n        [class]=\"getAlignment(col)\">\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 class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            <span class=\"status-dot\" [style.background-color]=\"style.color\"></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 xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\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 getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item\" [style.color]=\"option.color\" (click)=\"onOptionClick(option, row)\">\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>", 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-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.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-delete{-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>')}.icon-edit{-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=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 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=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-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=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></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=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></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\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-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=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></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=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-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=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></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=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,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"] }], statusToneMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToneMap", required: false }] }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -597,6 +718,8 @@ class DateTimePicker {
     selectedDate = signal(null, ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    // Texto que escribe el usuario (DD/MM/YYYY)
+    inputTextValue = signal('', ...(ngDevMode ? [{ debugName: "inputTextValue" }] : []));
     // Navegación del calendario
     currentMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
     currentYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
@@ -606,21 +729,22 @@ class DateTimePicker {
     // Estado AM/PM
     selectedAmPm = signal('AM', ...(ngDevMode ? [{ debugName: "selectedAmPm" }] : []));
     documentClickListener;
+    /**
+     * Valor que se muestra en el campo de texto.
+     * Siempre muestra la fecha en formato DD/MM/YYYY.
+     */
     displayValue = computed(() => {
+        const text = this.inputTextValue().trim();
+        if (text) {
+            return text;
+        }
         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);
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
     monthName = computed(() => {
         const months = [
@@ -689,19 +813,10 @@ class DateTimePicker {
             }
         }
         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) {
@@ -748,7 +863,7 @@ class DateTimePicker {
         const newDate = new Date(this.currentYear(), this.currentMonth(), day, this.selectedHour(), this.selectedMinute());
         if (this.isDateDisabled(newDate))
             return;
-        this.selectedDate.set(newDate);
+        this.updateInternalState(newDate);
         this.onChange(newDate.toISOString());
         this.markAsTouched();
         this.dateChange.emit(newDate);
@@ -824,12 +939,7 @@ class DateTimePicker {
     }
     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);
@@ -838,7 +948,7 @@ class DateTimePicker {
         }
     }
     clear() {
-        this.selectedDate.set(null);
+        this.resetInternalState();
         this.onChange(null);
         this.markAsTouched();
         this.dateChange.emit(null);
@@ -895,11 +1005,100 @@ class DateTimePicker {
         const newDate = new Date(selected);
         newDate.setHours(this.selectedHour());
         newDate.setMinutes(this.selectedMinute());
-        this.selectedDate.set(newDate);
+        this.updateInternalState(newDate);
         this.onChange(newDate.toISOString());
         this.markAsTouched();
         this.dateChange.emit(newDate);
     }
+    // Manejo de input de texto (DD/MM/YYYY)
+    onInputChange(event) {
+        if (this.isDisabled())
+            return;
+        const input = event.target;
+        let value = input.value;
+        // Eliminar todo lo que no sea número
+        const numbersOnly = value.replace(/\D/g, '');
+        // Limitar a 8 dígitos (DDMMYYYY)
+        const limitedNumbers = numbersOnly.slice(0, 8);
+        // Formatear con barras: DD/MM/YYYY
+        let formatted = '';
+        if (limitedNumbers.length > 0) {
+            formatted = limitedNumbers.slice(0, 2);
+            if (limitedNumbers.length > 2) {
+                formatted += '/' + limitedNumbers.slice(2, 4);
+            }
+            if (limitedNumbers.length > 4) {
+                formatted += '/' + limitedNumbers.slice(4, 8);
+            }
+        }
+        this.inputTextValue.set(formatted);
+        input.value = formatted;
+        this.markAsTouched();
+        // Solo intentamos parsear cuando tenemos DD/MM/YYYY completo (10 caracteres)
+        if (formatted.length === 10) {
+            const parsedDate = this.parseDateInput(formatted);
+            if (parsedDate) {
+                if (this.isDateDisabled(parsedDate)) {
+                    // Está fuera de rango, dejamos el texto pero no cambiamos el valor
+                    return;
+                }
+                this.updateInternalState(parsedDate);
+                this.onChange(parsedDate.toISOString());
+                this.dateChange.emit(parsedDate);
+            }
+        }
+        else if (formatted.trim() === '') {
+            // Si el campo queda vacío, limpiamos el valor
+            this.resetInternalState();
+            this.onChange(null);
+            this.dateChange.emit(null);
+        }
+    }
+    onInputFocus() {
+        if (this.isDisabled())
+            return;
+        this.open();
+    }
+    parseDateInput(input) {
+        if (!input || input.trim() === '')
+            return null;
+        const match = input.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+        if (match) {
+            const day = parseInt(match[1], 10);
+            const month = parseInt(match[2], 10) - 1;
+            const year = parseInt(match[3], 10);
+            if (day >= 1 && day <= 31 && month >= 0 && month <= 11 && year >= 1900 && year <= 2100) {
+                const date = new Date(year, month, day);
+                if (date.getDate() === day && date.getMonth() === month && date.getFullYear() === year) {
+                    return date;
+                }
+            }
+        }
+        return null;
+    }
+    formatDateForInput(date) {
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
+    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');
+        const formatted = this.formatDateForInput(date);
+        this.inputTextValue.set(formatted);
+    }
+    resetInternalState() {
+        this.selectedDate.set(null);
+        this.inputTextValue.set('');
+        this.selectedHour.set(0);
+        this.selectedMinute.set(0);
+        this.selectedAmPm.set('AM');
+    }
     markAsTouched() {
         if (!this.isTouched()) {
             this.isTouched.set(true);
@@ -967,7 +1166,7 @@ class DateTimePicker {
                 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"] });
+        ], 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    <input\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [disabled]=\"isDisabled()\"\r\n    />\r\n\r\n    <div class=\"header-icons\">\r\n      @if (selectedDate()) {\r\n      <span\r\n        class=\"clear-icon\"\r\n        (click)=\"clear(); $event.stopPropagation()\"\r\n        title=\"Limpiar\"\r\n      >\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</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\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 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\">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\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", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861}.datetime-input:disabled{cursor:not-allowed}.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:10px 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.15", ngImport: i0, type: DateTimePicker, decorators: [{
             type: Component,
@@ -977,12 +1176,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             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"] }]
+                    ], 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    <input\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [disabled]=\"isDisabled()\"\r\n    />\r\n\r\n    <div class=\"header-icons\">\r\n      @if (selectedDate()) {\r\n      <span\r\n        class=\"clear-icon\"\r\n        (click)=\"clear(); $event.stopPropagation()\"\r\n        title=\"Limpiar\"\r\n      >\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</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\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 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\">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\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", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861}.datetime-input:disabled{cursor:not-allowed}.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:10px 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
@@ -990,25 +1187,12 @@ class InputNumberFilter {
     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;
+    constructor() {
         // Watch for clear trigger changes
         effect(() => {
             const trigger = this.clearTrigger();
@@ -1018,17 +1202,16 @@ class InputNumberFilter {
         });
     }
     ngOnDestroy() {
-        this.removeDocumentListener();
+        // No cleanup needed
     }
     resetAllFilters() {
         this.filterValues.set({});
-        this.inputValue.set('');
-        this.activeFilterType.set(null);
-        this.isOpen.set(false);
+        this.onChange(null);
+        this.valueChange.emit(null);
     }
     // ControlValueAccessor Implementation
     writeValue(value) {
-        this.inputValue.set(value || '');
+        // Not used for multiple inputs
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1040,78 +1223,23 @@ class InputNumberFilter {
         this.isDisabled.set(isDisabled);
     }
     // Public Methods
-    toggle(filterValue) {
+    onInputChange(event, 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();
-        const type = this.activeFilterType();
-        // Actualizar filterValues antes de emitir
-        if (type) {
-            this.filterValues.update(current => ({
-                ...current,
-                [type]: value
-            }));
-        }
-        this.onChange(value);
-        this.valueChange.emit(value);
+        this.markAsTouched();
+        // Actualizar el valor del filtro específico
+        this.filterValues.update(current => ({
+            ...current,
+            [filterValue]: value
+        }));
+        // Emitir eventos
+        this.onChange(value || null);
+        this.valueChange.emit(value || null);
         this.filterSelected.emit({
-            filter: this.filterValueKey(),
+            filter: filterValue,
             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()) {
@@ -1119,38 +1247,14 @@ class InputNumberFilter {
             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.15", ngImport: i0, type: InputNumberFilter, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputNumberFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InputNumberFilter, isStandalone: true, selector: "lib-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          <div class=\"input-wrapper\">\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            @if (inputValue()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"clear-button\"\r\n              (click)=\"clear()\"\r\n              title=\"Limpiar\"\r\n            >\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n                <path d=\"M18 6l-12 12\" />\r\n                <path d=\"M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n            }\r\n          </div>\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}.input-wrapper{position:relative;width:100%}.filter-input{width:100%;padding:10px 35px 10px 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}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#787861;border-radius:4px;transition:all .2s}.clear-button:hover{background-color:#7878611a;color:#454733}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.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 }] });
+        ], 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-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n      <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir N\u00FAmero' }}</label>\r\n      <input\r\n        type=\"number\"\r\n        [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n        class=\"chip-input\"\r\n        [disabled]=\"isDisabled()\"\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-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip-input-wrapper.has-value .floating-label{opacity:.6}.chip-input{border:none;outline:none;background:transparent;padding:6px 30px 6px 16px;height:100%;width:100%;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);border-radius:8px;-moz-appearance:textfield;appearance:textfield}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{opacity:1;cursor:pointer;background-color:transparent;height:100%;width:20px;margin:0;padding:0;position:absolute;right:0;top:0}.chip-input::-webkit-outer-spin-button{opacity:1;cursor:pointer;height:100%;width:20px;margin:0;padding:0;position:absolute;right:0;top:0}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.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.15", ngImport: i0, type: InputNumberFilter, decorators: [{
             type: Component,
@@ -1160,8 +1264,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             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          <div class=\"input-wrapper\">\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            @if (inputValue()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"clear-button\"\r\n              (click)=\"clear()\"\r\n              title=\"Limpiar\"\r\n            >\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n                <path d=\"M18 6l-12 12\" />\r\n                <path d=\"M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n            }\r\n          </div>\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}.input-wrapper{position:relative;width:100%}.filter-input{width:100%;padding:10px 35px 10px 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}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#787861;border-radius:4px;transition:all .2s}.clear-button:hover{background-color:#7878611a;color:#454733}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.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"] }] } });
+                    ], 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-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n      <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir N\u00FAmero' }}</label>\r\n      <input\r\n        type=\"number\"\r\n        [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n        class=\"chip-input\"\r\n        [disabled]=\"isDisabled()\"\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-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip-input-wrapper.has-value .floating-label{opacity:.6}.chip-input{border:none;outline:none;background:transparent;padding:6px 30px 6px 16px;height:100%;width:100%;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);border-radius:8px;-moz-appearance:textfield;appearance:textfield}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{opacity:1;cursor:pointer;background-color:transparent;height:100%;width:20px;margin:0;padding:0;position:absolute;right:0;top:0}.chip-input::-webkit-outer-spin-button{opacity:1;cursor:pointer;height:100%;width:20px;margin:0;padding:0;position:absolute;right:0;top:0}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.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: () => [], 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;
@@ -1179,6 +1283,7 @@ class InputSelectFilter {
     filterValues = signal({}, ...(ngDevMode ? [{ debugName: "filterValues" }] : []));
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     // Computed Properties based on active filter
     activeFilter = computed(() => {
         const type = this.activeFilterType();
@@ -1187,6 +1292,14 @@ class InputSelectFilter {
     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" }] : []));
+    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" }] : []));
     documentClickListener;
     onChange = () => { };
     onTouched = () => { };
@@ -1279,6 +1392,7 @@ class InputSelectFilter {
         }
         this.onChange(null);
         this.valueChange.emit(null);
+        this.searchTerm.set('');
         this.close();
     }
     markAsTouched() {
@@ -1287,6 +1401,42 @@ class InputSelectFilter {
             this.onTouched();
         }
     }
+    onInputChange(event, filterType) {
+        if (this.isDisabled())
+            return;
+        const target = event.target;
+        const value = target.value;
+        this.filterValues.update(current => ({
+            ...current,
+            [filterType]: value,
+        }));
+        this.searchTerm.set(value);
+        this.activeFilterType.set(filterType);
+        if (!this.isOpen()) {
+            this.open();
+        }
+    }
+    onFocusFilter(filterType) {
+        if (this.isDisabled())
+            return;
+        this.activeFilterType.set(filterType);
+        const currentValue = this.filterValues()[filterType] || '';
+        this.searchTerm.set(currentValue);
+        if (!this.isOpen()) {
+            this.open();
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.close();
+        }
+        else if (event.key === 'Enter') {
+            const filtered = this.filteredOptions();
+            if (filtered.length > 0) {
+                this.selectOption(filtered[0]);
+            }
+        }
+    }
     addDocumentListener() {
         if (this.documentClickListener)
             this.removeDocumentListener();
@@ -1318,7 +1468,7 @@ class InputSelectFilter {
                 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 }] });
+        ], 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\" [class.has-value]=\"filterValues()[item.value]\">\r\n      <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n      <div class=\"content-chip\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"chip-input\"\r\n          [value]=\"filterValues()[item.value] || ''\"\r\n          (input)=\"onInputChange($event, item.value)\"\r\n          (focus)=\"onFocusFilter(item.value)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n          [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n          [disabled]=\"isDisabled()\"\r\n        />\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\r\n      @if (isOpen() && activeFilterType() === item.value) {\r\n      <div class=\"dropdown\">\r\n        <div class=\"options-list\">\r\n          @for (option of filteredOptions(); track option.value) {\r\n          <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n            {{ option.label }}\r\n          </div>\r\n          }\r\n          @if (filteredOptions().length === 0) {\r\n          <div class=\"no-options\">No hay opciones</div>\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}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip.has-value .floating-label{opacity:.6}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;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)}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.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: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.15", ngImport: i0, type: InputSelectFilter, decorators: [{
             type: Component,
@@ -1328,12 +1478,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             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"] }]
+                    ], 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\" [class.has-value]=\"filterValues()[item.value]\">\r\n      <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n      <div class=\"content-chip\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"chip-input\"\r\n          [value]=\"filterValues()[item.value] || ''\"\r\n          (input)=\"onInputChange($event, item.value)\"\r\n          (focus)=\"onFocusFilter(item.value)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n          [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n          [disabled]=\"isDisabled()\"\r\n        />\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\r\n      @if (isOpen() && activeFilterType() === item.value) {\r\n      <div class=\"dropdown\">\r\n        <div class=\"options-list\">\r\n          @for (option of filteredOptions(); track option.value) {\r\n          <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n            {{ option.label }}\r\n          </div>\r\n          }\r\n          @if (filteredOptions().length === 0) {\r\n          <div class=\"no-options\">No hay opciones</div>\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}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip.has-value .floating-label{opacity:.6}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;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)}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.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: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
@@ -1341,25 +1489,12 @@ class InputTextFilter {
     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;
+    constructor() {
         // Watch for clear trigger changes
         effect(() => {
             const trigger = this.clearTrigger();
@@ -1369,17 +1504,16 @@ class InputTextFilter {
         });
     }
     ngOnDestroy() {
-        this.removeDocumentListener();
+        // No cleanup needed
     }
     resetAllFilters() {
         this.filterValues.set({});
-        this.inputValue.set('');
-        this.activeFilterType.set(null);
-        this.isOpen.set(false);
+        this.onChange(null);
+        this.valueChange.emit(null);
     }
     // ControlValueAccessor Implementation
     writeValue(value) {
-        this.inputValue.set(value || '');
+        // Not used for multiple inputs
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1391,78 +1525,41 @@ class InputTextFilter {
         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() {
+    onInputChange(event, filterValue) {
         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();
-        const type = this.activeFilterType();
-        // Actualizar filterValues antes de emitir
-        if (type) {
-            this.filterValues.update(current => ({
-                ...current,
-                [type]: value
-            }));
-        }
-        this.onChange(value);
-        this.valueChange.emit(value);
+        this.markAsTouched();
+        // Actualizar el valor del filtro específico
+        this.filterValues.update(current => ({
+            ...current,
+            [filterValue]: value
+        }));
+        // Emitir eventos
+        this.onChange(value || null);
+        this.valueChange.emit(value || null);
         this.filterSelected.emit({
-            filter: this.filterValueKey(),
+            filter: filterValue,
             value: value,
         });
-        this.close();
     }
-    clear() {
-        this.inputValue.set('');
-        const type = this.activeFilterType();
-        if (type) {
-            this.filterValues.update(current => ({
-                ...current,
-                [type]: ''
-            }));
-        }
+    clearFilter(filterValue) {
+        if (this.isDisabled())
+            return;
+        this.markAsTouched();
+        // Limpiar el valor del filtro específico
+        this.filterValues.update(current => {
+            const updated = { ...current };
+            delete updated[filterValue];
+            return updated;
+        });
+        // Emitir eventos
         this.onChange(null);
         this.valueChange.emit(null);
-        this.close();
+        this.filterSelected.emit({
+            filter: filterValue,
+            value: '',
+        });
     }
     markAsTouched() {
         if (!this.isTouched()) {
@@ -1470,38 +1567,14 @@ class InputTextFilter {
             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.15", ngImport: i0, type: InputTextFilter, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputTextFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InputTextFilter, isStandalone: true, selector: "lib-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      <div class=\"input-wrapper\">\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        @if (inputValue()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"clear-button\"\r\n          (click)=\"clear()\"\r\n          title=\"Limpiar\"\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n            <path d=\"M18 6l-12 12\" />\r\n            <path d=\"M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n        }\r\n      </div>\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}.input-wrapper{position:relative;width:100%}.filter-input{width:100%;padding:10px 35px 10px 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}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#787861;border-radius:4px;transition:all .2s}.clear-button:hover{background-color:#7878611a;color:#454733}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.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 }] });
+        ], 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-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n      <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir' }}</label>\r\n      <input\r\n        type=\"text\"\r\n        [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n        class=\"chip-input\"\r\n        [disabled]=\"isDisabled()\"\r\n      />\r\n      @if (filterValues()[item.value]) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"clear-button\"\r\n        (click)=\"clearFilter(item.value)\"\r\n        title=\"Limpiar\"\r\n      >\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\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-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip-input-wrapper.has-value .floating-label{opacity:.6}.chip-input{border:none;outline:none;background:transparent;padding:6px 35px 6px 16px;height:100%;width:100%;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);border-radius:8px}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.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.15", ngImport: i0, type: InputTextFilter, decorators: [{
             type: Component,
@@ -1511,8 +1584,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             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      <div class=\"input-wrapper\">\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        @if (inputValue()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"clear-button\"\r\n          (click)=\"clear()\"\r\n          title=\"Limpiar\"\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n            <path d=\"M18 6l-12 12\" />\r\n            <path d=\"M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n        }\r\n      </div>\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}.input-wrapper{position:relative;width:100%}.filter-input{width:100%;padding:10px 35px 10px 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}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#787861;border-radius:4px;transition:all .2s}.clear-button:hover{background-color:#7878611a;color:#454733}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.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"] }] } });
+                    ], 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-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n      <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir' }}</label>\r\n      <input\r\n        type=\"text\"\r\n        [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n        class=\"chip-input\"\r\n        [disabled]=\"isDisabled()\"\r\n      />\r\n      @if (filterValues()[item.value]) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"clear-button\"\r\n        (click)=\"clearFilter(item.value)\"\r\n        title=\"Limpiar\"\r\n      >\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\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-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip-input-wrapper.has-value .floating-label{opacity:.6}.chip-input{border:none;outline:none;background:transparent;padding:6px 35px 6px 16px;height:100%;width:100%;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);border-radius:8px}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.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: () => [], 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;