sapenlinea-components 0.9.79 → 0.9.80

package/fesm2022/sapenlinea-components.mjs

@@ -545,11 +545,11 @@ class Table {
         this.pdfViewerService.open({ name, urls });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", isSignal: true, isRequired: false, transformFunction: null }, columnGroups: { classPropertyName: "columnGroups", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction", columnGroupChange: "columnGroupChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\"\n            [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n            (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\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:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{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-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{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;cursor:pointer}.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>')}.icon-file{-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=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></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=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-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 5l0 14\"/><path d=\"M5 12l14 0\"/></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 5l0 14\"/><path d=\"M5 12l14 0\"/></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;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.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}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}.cell-curr-changed{border-bottom-right-radius:20px}\n"], dependencies: [{ kind: "pipe", type: UpperCasePipe, name: "uppercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", isSignal: true, isRequired: false, transformFunction: null }, columnGroups: { classPropertyName: "columnGroups", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction", columnGroupChange: "columnGroupChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\"\n            [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n            (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\n</div>", styles: [".table-wrapper{width:100%;max-width:100%;min-width:0;overflow-x:auto;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;max-width:100%;table-layout:fixed;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:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad;overflow-wrap:anywhere;word-break:break-word}.inner-table thead th:not(.checkbox-header):not(.actions-header):not(.column-group-header):not(.column-group-sub-header),.inner-table tbody td:not(.checkbox-cell):not(.acciones-cell):not(.child-cell-full):not(.legend-cell){max-width:0}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{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-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{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;cursor:pointer}.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>')}.icon-file{-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=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></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=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-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 5l0 14\"/><path d=\"M5 12l14 0\"/></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 5l0 14\"/><path d=\"M5 12l14 0\"/></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;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.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}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}\n"], dependencies: [{ kind: "pipe", type: UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table', imports: [UpperCasePipe], standalone: true, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\"\n            [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n            (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\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:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{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-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{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;cursor:pointer}.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>')}.icon-file{-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=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></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=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-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 5l0 14\"/><path d=\"M5 12l14 0\"/></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 5l0 14\"/><path d=\"M5 12l14 0\"/></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;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.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}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}.cell-curr-changed{border-bottom-right-radius:20px}\n"] }]
+            args: [{ selector: 'lib-table', imports: [UpperCasePipe], standalone: true, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\"\n            [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n            (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\n</div>", styles: [".table-wrapper{width:100%;max-width:100%;min-width:0;overflow-x:auto;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;max-width:100%;table-layout:fixed;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:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad;overflow-wrap:anywhere;word-break:break-word}.inner-table thead th:not(.checkbox-header):not(.actions-header):not(.column-group-header):not(.column-group-sub-header),.inner-table tbody td:not(.checkbox-cell):not(.acciones-cell):not(.child-cell-full):not(.legend-cell){max-width:0}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{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-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{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;cursor:pointer}.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>')}.icon-file{-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=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></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=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-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 5l0 14\"/><path d=\"M5 12l14 0\"/></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 5l0 14\"/><path d=\"M5 12l14 0\"/></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;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.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}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}\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"] }], iconAction: [{ type: i0.Output, args: ["iconAction"] }], statusToneMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToneMap", required: false }] }], statusEnumMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusEnumMap", required: false }] }], subColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "subColumns", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], expandedChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedChildren", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], showSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelection", required: false }] }], showTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotals", required: false }] }], columnGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnGroups", required: false }] }], columnGroupChange: [{ type: i0.Output, args: ["columnGroupChange"] }], chips: [{
                 type: ViewChildren,
                 args: ['statusChip']
@@ -1925,7 +1925,7 @@ class DateTimeFilter {
                 useExisting: forwardRef(() => DateTimeFilter),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "chipRef", first: true, predicate: ["chip"], descendants: true }], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" #chip [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || (item.type === 'datetime' ? 'dd/mm/aaaa, hh:mm AM/PM' : '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 class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (click)=\"onInputClick($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" (keydown)=\"onInputKeyDown($event, item.value)\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path 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        <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\" [class.open-left]=\"dropdownDirection() === 'left'\">\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 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 -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\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 class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\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 class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\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 class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\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>", styles: [".datetime-container{position:relative;width:100%;overflow-x:clip}.filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:260px;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.chip-input-mask{position:absolute;left:8px;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);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.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:3}.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;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}.dropdown.open-left{left:auto;right:0}.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 }] });
+        ], viewQueries: [{ propertyName: "chipRef", first: true, predicate: ["chip"], descendants: true }], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" #chip [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || (item.type === 'datetime' ? 'dd/mm/aaaa, hh:mm AM/PM' : '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 class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (click)=\"onInputClick($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\"\r\n      [attr.title]=\"item.placeholder || item.label || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" (keydown)=\"onInputKeyDown($event, item.value)\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path 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        <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\" [class.open-left]=\"dropdownDirection() === 'left'\">\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 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 -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\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 class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\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 class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\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 class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\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>", styles: [".filter-chips{--filter-chip-min-width: 80px;--filter-chip-max-width: min(280px, 100%);--filter-chip-padding-start: 8px;--filter-chip-padding-end: 12px;--filter-chip-padding-end-actions: 34px}.filter-chips .chip-input-wrapper,.filter-chips .chip{flex:0 1 auto;min-width:var(--filter-chip-min-width);max-width:var(--filter-chip-max-width)}.filter-chips .chip-input{box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px var(--filter-chip-padding-end) 6px var(--filter-chip-padding-start)}.filter-chips .chip-input-wrapper:has(.clear-button) .chip-input,.filter-chips .chip-input-wrapper:has(.calendar-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.time-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.right-controls) .chip-input{padding-right:var(--filter-chip-padding-end-actions)}.filter-chips .chip .content-chip{min-width:0;flex:1;width:100%;padding:0 var(--filter-chip-padding-start);box-sizing:border-box}.filter-chips .content-chip .chip-input{flex:1 1 auto;min-width:0;width:auto;padding-right:4px}.filter-chips .content-chip .icon{flex-shrink:0}.datetime-container{position:relative;width:100%;overflow-x:clip}.filter-chips{display:flex;gap:10px;border-radius:12px;position:relative;--filter-chip-max-width: min(300px, 100%)}.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;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.chip-input-mask{position:absolute;left:var(--filter-chip-padding-start, 8px);right:var(--filter-chip-padding-end-actions, 34px);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);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.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:3}.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;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}.dropdown.open-left{left:auto;right:0}.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.16", ngImport: i0, type: DateTimeFilter, decorators: [{
             type: Component,
@@ -1935,7 +1935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => DateTimeFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" #chip [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || (item.type === 'datetime' ? 'dd/mm/aaaa, hh:mm AM/PM' : '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 class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (click)=\"onInputClick($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" (keydown)=\"onInputKeyDown($event, item.value)\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path 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        <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\" [class.open-left]=\"dropdownDirection() === 'left'\">\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 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 -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\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 class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\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 class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\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 class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\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>", styles: [".datetime-container{position:relative;width:100%;overflow-x:clip}.filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:260px;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.chip-input-mask{position:absolute;left:8px;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);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.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:3}.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;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}.dropdown.open-left{left:auto;right:0}.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=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" #chip [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || (item.type === 'datetime' ? 'dd/mm/aaaa, hh:mm AM/PM' : '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 class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (click)=\"onInputClick($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\"\r\n      [attr.title]=\"item.placeholder || item.label || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" (keydown)=\"onInputKeyDown($event, item.value)\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path 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        <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\" [class.open-left]=\"dropdownDirection() === 'left'\">\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 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 -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\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 class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\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 class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\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 class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\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>", styles: [".filter-chips{--filter-chip-min-width: 80px;--filter-chip-max-width: min(280px, 100%);--filter-chip-padding-start: 8px;--filter-chip-padding-end: 12px;--filter-chip-padding-end-actions: 34px}.filter-chips .chip-input-wrapper,.filter-chips .chip{flex:0 1 auto;min-width:var(--filter-chip-min-width);max-width:var(--filter-chip-max-width)}.filter-chips .chip-input{box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px var(--filter-chip-padding-end) 6px var(--filter-chip-padding-start)}.filter-chips .chip-input-wrapper:has(.clear-button) .chip-input,.filter-chips .chip-input-wrapper:has(.calendar-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.time-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.right-controls) .chip-input{padding-right:var(--filter-chip-padding-end-actions)}.filter-chips .chip .content-chip{min-width:0;flex:1;width:100%;padding:0 var(--filter-chip-padding-start);box-sizing:border-box}.filter-chips .content-chip .chip-input{flex:1 1 auto;min-width:0;width:auto;padding-right:4px}.filter-chips .content-chip .icon{flex-shrink:0}.datetime-container{position:relative;width:100%;overflow-x:clip}.filter-chips{display:flex;gap:10px;border-radius:12px;position:relative;--filter-chip-max-width: min(300px, 100%)}.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;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.chip-input-mask{position:absolute;left:var(--filter-chip-padding-start, 8px);right:var(--filter-chip-padding-end-actions, 34px);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);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.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:3}.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;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}.dropdown.open-left{left:auto;right:0}.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: { chipRef: [{
                 type: ViewChild,
                 args: ['chip']
@@ -2063,7 +2063,7 @@ class InputNumberFilter {
                 useExisting: forwardRef(() => InputNumberFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<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      (keydown)=\"onEnter($event)\"\r\n    />\r\n    <div class=\"right-controls\">\r\n      @if (filterValues()[item.value]) {\r\n      <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"16\"\r\n          height=\"16\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <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 class=\"spinner-buttons\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"spinner-button spinner-button-up\"\r\n          (click)=\"increment(item.value)\"\r\n          title=\"Aumentar\"\r\n        >\r\n          \u25B2\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"spinner-button spinner-button-down\"\r\n          (click)=\"decrement(item.value)\"\r\n          title=\"Disminuir\"\r\n        >\r\n          \u25BC\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 70px 6px 8px;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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.chip-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{background:transparent;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}.right-controls{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;background:transparent}.spinner-buttons{display:flex;flex-direction:column;gap:2px}.spinner-button{width:18px;height:12px;border:none;background:transparent;color:var(--schemes-on-surface-variant, #454733);font-size:10px;line-height:1;padding:0;cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,color .2s ease}.spinner-button:hover{background-color:#7878611a}.spinner-button:active{background-color:#78786133}.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=\"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      [attr.title]=\"!filterValues()[item.value] ? (item.placeholder || item.label || 'Escribir N\u00FAmero') : null\"\r\n      class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\"\r\n      (keydown)=\"onEnter($event)\"\r\n    />\r\n    <div class=\"right-controls\">\r\n      @if (filterValues()[item.value]) {\r\n      <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"16\"\r\n          height=\"16\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <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 class=\"spinner-buttons\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"spinner-button spinner-button-up\"\r\n          (click)=\"increment(item.value)\"\r\n          title=\"Aumentar\"\r\n        >\r\n          \u25B2\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"spinner-button spinner-button-down\"\r\n          (click)=\"decrement(item.value)\"\r\n          title=\"Disminuir\"\r\n        >\r\n          \u25BC\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{--filter-chip-min-width: 80px;--filter-chip-max-width: min(280px, 100%);--filter-chip-padding-start: 8px;--filter-chip-padding-end: 12px;--filter-chip-padding-end-actions: 34px}.filter-chips .chip-input-wrapper,.filter-chips .chip{flex:0 1 auto;min-width:var(--filter-chip-min-width);max-width:var(--filter-chip-max-width)}.filter-chips .chip-input{box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px var(--filter-chip-padding-end) 6px var(--filter-chip-padding-start)}.filter-chips .chip-input-wrapper:has(.clear-button) .chip-input,.filter-chips .chip-input-wrapper:has(.calendar-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.time-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.right-controls) .chip-input{padding-right:var(--filter-chip-padding-end-actions)}.filter-chips .chip .content-chip{min-width:0;flex:1;width:100%;padding:0 var(--filter-chip-padding-start);box-sizing:border-box}.filter-chips .content-chip .chip-input{flex:1 1 auto;min-width:0;width:auto;padding-right:4px}.filter-chips .content-chip .icon{flex-shrink:0}.filter-chips{display:flex;gap:10px;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;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.chip-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{background:transparent;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}.right-controls{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;background:transparent}.spinner-buttons{display:flex;flex-direction:column;gap:2px}.spinner-button{width:18px;height:12px;border:none;background:transparent;color:var(--schemes-on-surface-variant, #454733);font-size:10px;line-height:1;padding:0;cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,color .2s ease}.spinner-button:hover{background-color:#7878611a}.spinner-button:active{background-color:#78786133}.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.16", ngImport: i0, type: InputNumberFilter, decorators: [{
             type: Component,
@@ -2073,7 +2073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => InputNumberFilter),
                             multi: true,
                         },
-                    ], template: "<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      (keydown)=\"onEnter($event)\"\r\n    />\r\n    <div class=\"right-controls\">\r\n      @if (filterValues()[item.value]) {\r\n      <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"16\"\r\n          height=\"16\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <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 class=\"spinner-buttons\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"spinner-button spinner-button-up\"\r\n          (click)=\"increment(item.value)\"\r\n          title=\"Aumentar\"\r\n        >\r\n          \u25B2\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"spinner-button spinner-button-down\"\r\n          (click)=\"decrement(item.value)\"\r\n          title=\"Disminuir\"\r\n        >\r\n          \u25BC\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 70px 6px 8px;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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.chip-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{background:transparent;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}.right-controls{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;background:transparent}.spinner-buttons{display:flex;flex-direction:column;gap:2px}.spinner-button{width:18px;height:12px;border:none;background:transparent;color:var(--schemes-on-surface-variant, #454733);font-size:10px;line-height:1;padding:0;cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,color .2s ease}.spinner-button:hover{background-color:#7878611a}.spinner-button:active{background-color:#78786133}.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"] }]
+                    ], template: "<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      [attr.title]=\"!filterValues()[item.value] ? (item.placeholder || item.label || 'Escribir N\u00FAmero') : null\"\r\n      class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\"\r\n      (keydown)=\"onEnter($event)\"\r\n    />\r\n    <div class=\"right-controls\">\r\n      @if (filterValues()[item.value]) {\r\n      <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"16\"\r\n          height=\"16\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <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 class=\"spinner-buttons\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"spinner-button spinner-button-up\"\r\n          (click)=\"increment(item.value)\"\r\n          title=\"Aumentar\"\r\n        >\r\n          \u25B2\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"spinner-button spinner-button-down\"\r\n          (click)=\"decrement(item.value)\"\r\n          title=\"Disminuir\"\r\n        >\r\n          \u25BC\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{--filter-chip-min-width: 80px;--filter-chip-max-width: min(280px, 100%);--filter-chip-padding-start: 8px;--filter-chip-padding-end: 12px;--filter-chip-padding-end-actions: 34px}.filter-chips .chip-input-wrapper,.filter-chips .chip{flex:0 1 auto;min-width:var(--filter-chip-min-width);max-width:var(--filter-chip-max-width)}.filter-chips .chip-input{box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px var(--filter-chip-padding-end) 6px var(--filter-chip-padding-start)}.filter-chips .chip-input-wrapper:has(.clear-button) .chip-input,.filter-chips .chip-input-wrapper:has(.calendar-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.time-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.right-controls) .chip-input{padding-right:var(--filter-chip-padding-end-actions)}.filter-chips .chip .content-chip{min-width:0;flex:1;width:100%;padding:0 var(--filter-chip-padding-start);box-sizing:border-box}.filter-chips .content-chip .chip-input{flex:1 1 auto;min-width:0;width:auto;padding-right:4px}.filter-chips .content-chip .icon{flex-shrink:0}.filter-chips{display:flex;gap:10px;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;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.chip-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{background:transparent;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}.right-controls{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;background:transparent}.spinner-buttons{display:flex;flex-direction:column;gap:2px}.spinner-button{width:18px;height:12px;border:none;background:transparent;color:var(--schemes-on-surface-variant, #454733);font-size:10px;line-height:1;padding:0;cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,color .2s ease}.spinner-button:hover{background-color:#7878611a}.spinner-button:active{background-color:#78786133}.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"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
 
 class InputSelectFilter {
@@ -2323,7 +2323,7 @@ class InputSelectFilter {
                 useExisting: forwardRef(() => InputSelectFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<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 type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\" (keydown)=\"onEnter($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [disabled]=\"isDisabled()\" />\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\" (click)=\"onFocusFilter(item.value)\">\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        <!-- Opci\u00F3n por defecto sin valor -->\r\n        <div class=\"option-item option-default\" (click)=\"clear()\">\r\n          {{ 'Seleccionar' }}\r\n        </div>\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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.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, 1.4rem);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);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px transparent inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#a9a97f}.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;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.option-item.option-default{color:#787861;font-style:italic;border-bottom:1px solid rgba(120,120,97,.35)}.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=\"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 type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\" (keydown)=\"onEnter($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [attr.title]=\"!filterValues()[item.value] ? (item.placeholder || item.label || 'Seleccionar') : null\"\r\n        [disabled]=\"isDisabled()\" />\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\" (click)=\"onFocusFilter(item.value)\">\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        <!-- Opci\u00F3n por defecto sin valor -->\r\n        <div class=\"option-item option-default\" (click)=\"clear()\">\r\n          {{ 'Seleccionar' }}\r\n        </div>\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>", styles: [".filter-chips{--filter-chip-min-width: 80px;--filter-chip-max-width: min(280px, 100%);--filter-chip-padding-start: 8px;--filter-chip-padding-end: 12px;--filter-chip-padding-end-actions: 34px}.filter-chips .chip-input-wrapper,.filter-chips .chip{flex:0 1 auto;min-width:var(--filter-chip-min-width);max-width:var(--filter-chip-max-width)}.filter-chips .chip-input{box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px var(--filter-chip-padding-end) 6px var(--filter-chip-padding-start)}.filter-chips .chip-input-wrapper:has(.clear-button) .chip-input,.filter-chips .chip-input-wrapper:has(.calendar-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.time-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.right-controls) .chip-input{padding-right:var(--filter-chip-padding-end-actions)}.filter-chips .chip .content-chip{min-width:0;flex:1;width:100%;padding:0 var(--filter-chip-padding-start);box-sizing:border-box}.filter-chips .content-chip .chip-input{flex:1 1 auto;min-width:0;width:auto;padding-right:4px}.filter-chips .content-chip .icon{flex-shrink:0}.filter-chips{display:flex;gap:10px;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;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{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, 1.4rem);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);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px transparent inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#a9a97f}.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;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.option-item.option-default{color:#787861;font-style:italic;border-bottom:1px solid rgba(120,120,97,.35)}.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.16", ngImport: i0, type: InputSelectFilter, decorators: [{
             type: Component,
@@ -2333,7 +2333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => InputSelectFilter),
                             multi: true,
                         },
-                    ], template: "<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 type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\" (keydown)=\"onEnter($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [disabled]=\"isDisabled()\" />\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\" (click)=\"onFocusFilter(item.value)\">\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        <!-- Opci\u00F3n por defecto sin valor -->\r\n        <div class=\"option-item option-default\" (click)=\"clear()\">\r\n          {{ 'Seleccionar' }}\r\n        </div>\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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.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, 1.4rem);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);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px transparent inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#a9a97f}.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;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.option-item.option-default{color:#787861;font-style:italic;border-bottom:1px solid rgba(120,120,97,.35)}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"] }]
+                    ], template: "<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 type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\" (keydown)=\"onEnter($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [attr.title]=\"!filterValues()[item.value] ? (item.placeholder || item.label || 'Seleccionar') : null\"\r\n        [disabled]=\"isDisabled()\" />\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\" (click)=\"onFocusFilter(item.value)\">\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        <!-- Opci\u00F3n por defecto sin valor -->\r\n        <div class=\"option-item option-default\" (click)=\"clear()\">\r\n          {{ 'Seleccionar' }}\r\n        </div>\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>", styles: [".filter-chips{--filter-chip-min-width: 80px;--filter-chip-max-width: min(280px, 100%);--filter-chip-padding-start: 8px;--filter-chip-padding-end: 12px;--filter-chip-padding-end-actions: 34px}.filter-chips .chip-input-wrapper,.filter-chips .chip{flex:0 1 auto;min-width:var(--filter-chip-min-width);max-width:var(--filter-chip-max-width)}.filter-chips .chip-input{box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px var(--filter-chip-padding-end) 6px var(--filter-chip-padding-start)}.filter-chips .chip-input-wrapper:has(.clear-button) .chip-input,.filter-chips .chip-input-wrapper:has(.calendar-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.time-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.right-controls) .chip-input{padding-right:var(--filter-chip-padding-end-actions)}.filter-chips .chip .content-chip{min-width:0;flex:1;width:100%;padding:0 var(--filter-chip-padding-start);box-sizing:border-box}.filter-chips .content-chip .chip-input{flex:1 1 auto;min-width:0;width:auto;padding-right:4px}.filter-chips .content-chip .icon{flex-shrink:0}.filter-chips{display:flex;gap:10px;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;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{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, 1.4rem);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);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px transparent inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#a9a97f}.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;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.option-item.option-default{color:#787861;font-style:italic;border-bottom:1px solid rgba(120,120,97,.35)}.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"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
 
 class InputTextFilter {
@@ -2436,7 +2436,7 @@ class InputTextFilter {
                 useExisting: forwardRef(() => InputTextFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<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 type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent;flex:1 1 auto;max-width:180px}.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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 35px 6px 8px;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, 1.4rem);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;text-transform:uppercase}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.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 }] });
+        ], ngImport: i0, template: "<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 type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n      [attr.title]=\"!filterValues()[item.value] ? (item.placeholder || item.label || 'Escribir') : null\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        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>", styles: [".filter-chips{--filter-chip-min-width: 80px;--filter-chip-max-width: min(280px, 100%);--filter-chip-padding-start: 8px;--filter-chip-padding-end: 12px;--filter-chip-padding-end-actions: 34px}.filter-chips .chip-input-wrapper,.filter-chips .chip{flex:0 1 auto;min-width:var(--filter-chip-min-width);max-width:var(--filter-chip-max-width)}.filter-chips .chip-input{box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px var(--filter-chip-padding-end) 6px var(--filter-chip-padding-start)}.filter-chips .chip-input-wrapper:has(.clear-button) .chip-input,.filter-chips .chip-input-wrapper:has(.calendar-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.time-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.right-controls) .chip-input{padding-right:var(--filter-chip-padding-end-actions)}.filter-chips .chip .content-chip{min-width:0;flex:1;width:100%;padding:0 var(--filter-chip-padding-start);box-sizing:border-box}.filter-chips .content-chip .chip-input{flex:1 1 auto;min-width:0;width:auto;padding-right:4px}.filter-chips .content-chip .icon{flex-shrink:0}.filter-chips{display:flex;gap:10px;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;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.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, 1.4rem);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;text-transform:uppercase}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.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.16", ngImport: i0, type: InputTextFilter, decorators: [{
             type: Component,
@@ -2446,7 +2446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => InputTextFilter),
                             multi: true,
                         },
-                    ], template: "<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 type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent;flex:1 1 auto;max-width:180px}.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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 35px 6px 8px;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, 1.4rem);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;text-transform:uppercase}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.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"] }]
+                    ], template: "<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 type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n      [attr.title]=\"!filterValues()[item.value] ? (item.placeholder || item.label || 'Escribir') : null\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        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>", styles: [".filter-chips{--filter-chip-min-width: 80px;--filter-chip-max-width: min(280px, 100%);--filter-chip-padding-start: 8px;--filter-chip-padding-end: 12px;--filter-chip-padding-end-actions: 34px}.filter-chips .chip-input-wrapper,.filter-chips .chip{flex:0 1 auto;min-width:var(--filter-chip-min-width);max-width:var(--filter-chip-max-width)}.filter-chips .chip-input{box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px var(--filter-chip-padding-end) 6px var(--filter-chip-padding-start)}.filter-chips .chip-input-wrapper:has(.clear-button) .chip-input,.filter-chips .chip-input-wrapper:has(.calendar-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.time-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.right-controls) .chip-input{padding-right:var(--filter-chip-padding-end-actions)}.filter-chips .chip .content-chip{min-width:0;flex:1;width:100%;padding:0 var(--filter-chip-padding-start);box-sizing:border-box}.filter-chips .content-chip .chip-input{flex:1 1 auto;min-width:0;width:auto;padding-right:4px}.filter-chips .content-chip .icon{flex-shrink:0}.filter-chips{display:flex;gap:10px;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;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.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, 1.4rem);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;text-transform:uppercase}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.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"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
 
 class Input {
@@ -4185,7 +4185,7 @@ class InputTimeFilter {
                 useExisting: forwardRef(() => InputTimeFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"filter-chips\">\n  @for (item of filters(); track item.value) {\n    <div\n      class=\"chip-input-wrapper\"\n      [class.has-value]=\"filterValues()[item.value]\"\n      [class.active]=\"activeFilterType() === item.value && isOpen()\"\n    >\n      <label class=\"floating-label\">\n        {{ item.placeholder || item.label || 'Seleccionar hora' }}\n      </label>\n\n      <input\n        type=\"text\"\n        class=\"chip-input\"\n        [value]=\"filterValues()[item.value] || ''\"\n        [placeholder]=\"item.placeholder || item.label || 'hh:mm'\"\n        readonly\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggleDropdown(item.value)\"\n        (keydown)=\"onEnter($event)\"\n      />\n\n      <button\n        type=\"button\"\n        class=\"time-icon-button\"\n        (click)=\"toggleDropdown(item.value)\"\n        title=\"Seleccionar hora\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"9\" />\n          <polyline points=\"12 7 12 12 15 15\" />\n        </svg>\n      </button>\n\n      @if (isOpen() && activeFilterType() === item.value) {\n        <div class=\"dropdown\">\n          <div class=\"datetime-content\">\n            <div class=\"time-section\">\n              <!-- <div class=\"time-header\">Horario</div> -->\n\n              <div class=\"time-selectors\">\n                <div class=\"time-group\">\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Hora</div>\n                    <div class=\"time-scroll\">\n                      @for (hour of hours12(); track hour.value) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"hour.value === selectedHour12\"\n                          (click)=\"setHour12(hour.value)\"\n                        >\n                          {{ hour.display }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-separator-vertical\">:</div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Min</div>\n                    <div class=\"time-scroll\">\n                      @for (minute of minutes(); track minute) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"minute === selectedMinute()\"\n                          (click)=\"setMinute(minute)\"\n                        >\n                          {{ minute.toString().padStart(2, '0') }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">AM/PM</div>\n                    <div class=\"time-scroll ampm\">\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'AM'\"\n                        (click)=\"setAmPm('AM')\"\n                      >\n                        AM\n                      </div>\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'PM'\"\n                        (click)=\"setAmPm('PM')\"\n                      >\n                        PM\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"action-buttons\">\n            <button\n              type=\"button\"\n              class=\"action-btn secondary\"\n              (click)=\"clearActive(item.value)\"\n            >\n              Limpiar\n            </button>\n            <button\n              type=\"button\"\n              class=\"action-btn primary\"\n              (click)=\"closeDropdown()\"\n            >\n              Aceptar\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.time-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:3}.time-icon-button svg{width:18px;height:18px}.dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:10;background:#e3e3d1;border:1px solid #787861;border-radius:0 0 5px 5px;box-shadow:0 4px 12px #00000026;min-width:220px}.datetime-content{display:flex;flex-direction:column}.time-section{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;font-size:1rem;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px}.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;font-weight:500;margin-bottom:10px;color:#787861}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-scroll.ampm{max-height:none}.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}.time-option{padding:8px 12px;cursor:pointer;font-size:1rem;color:#454733;text-align:center;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}.action-buttons{display:flex;justify-content:space-between;gap:10px;padding:15px;border-top:1px solid rgba(120,120,97,.2)}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+        ], ngImport: i0, template: "<div class=\"filter-chips\">\n  @for (item of filters(); track item.value) {\n    <div\n      class=\"chip-input-wrapper\"\n      [class.has-value]=\"filterValues()[item.value]\"\n      [class.active]=\"activeFilterType() === item.value && isOpen()\"\n    >\n      <label class=\"floating-label\">\n        {{ item.placeholder || item.label || 'Seleccionar hora' }}\n      </label>\n\n      <input\n        type=\"text\"\n        class=\"chip-input\"\n        [value]=\"filterValues()[item.value] || ''\"\n        [placeholder]=\"item.placeholder || item.label || 'hh:mm'\"\n        [attr.title]=\"item.placeholder || item.label || 'hh:mm'\"\n        readonly\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggleDropdown(item.value)\"\n        (keydown)=\"onEnter($event)\"\n      />\n\n      <button\n        type=\"button\"\n        class=\"time-icon-button\"\n        (click)=\"toggleDropdown(item.value)\"\n        title=\"Seleccionar hora\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"9\" />\n          <polyline points=\"12 7 12 12 15 15\" />\n        </svg>\n      </button>\n\n      @if (isOpen() && activeFilterType() === item.value) {\n        <div class=\"dropdown\">\n          <div class=\"datetime-content\">\n            <div class=\"time-section\">\n              <!-- <div class=\"time-header\">Horario</div> -->\n\n              <div class=\"time-selectors\">\n                <div class=\"time-group\">\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Hora</div>\n                    <div class=\"time-scroll\">\n                      @for (hour of hours12(); track hour.value) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"hour.value === selectedHour12\"\n                          (click)=\"setHour12(hour.value)\"\n                        >\n                          {{ hour.display }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-separator-vertical\">:</div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Min</div>\n                    <div class=\"time-scroll\">\n                      @for (minute of minutes(); track minute) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"minute === selectedMinute()\"\n                          (click)=\"setMinute(minute)\"\n                        >\n                          {{ minute.toString().padStart(2, '0') }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">AM/PM</div>\n                    <div class=\"time-scroll ampm\">\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'AM'\"\n                        (click)=\"setAmPm('AM')\"\n                      >\n                        AM\n                      </div>\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'PM'\"\n                        (click)=\"setAmPm('PM')\"\n                      >\n                        PM\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"action-buttons\">\n            <button\n              type=\"button\"\n              class=\"action-btn secondary\"\n              (click)=\"clearActive(item.value)\"\n            >\n              Limpiar\n            </button>\n            <button\n              type=\"button\"\n              class=\"action-btn primary\"\n              (click)=\"closeDropdown()\"\n            >\n              Aceptar\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".filter-chips{--filter-chip-min-width: 80px;--filter-chip-max-width: min(280px, 100%);--filter-chip-padding-start: 8px;--filter-chip-padding-end: 12px;--filter-chip-padding-end-actions: 34px}.filter-chips .chip-input-wrapper,.filter-chips .chip{flex:0 1 auto;min-width:var(--filter-chip-min-width);max-width:var(--filter-chip-max-width)}.filter-chips .chip-input{box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px var(--filter-chip-padding-end) 6px var(--filter-chip-padding-start)}.filter-chips .chip-input-wrapper:has(.clear-button) .chip-input,.filter-chips .chip-input-wrapper:has(.calendar-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.time-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.right-controls) .chip-input{padding-right:var(--filter-chip-padding-end-actions)}.filter-chips .chip .content-chip{min-width:0;flex:1;width:100%;padding:0 var(--filter-chip-padding-start);box-sizing:border-box}.filter-chips .content-chip .chip-input{flex:1 1 auto;min-width:0;width:auto;padding-right:4px}.filter-chips .content-chip .icon{flex-shrink:0}.filter-chips{display:flex;gap:10px;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;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6}.chip-input-wrapper.has-value .floating-label{opacity:.9}.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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.time-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:3}.time-icon-button svg{width:18px;height:18px}.dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:10;background:#e3e3d1;border:1px solid #787861;border-radius:0 0 5px 5px;box-shadow:0 4px 12px #00000026;min-width:220px}.datetime-content{display:flex;flex-direction:column}.time-section{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;font-size:1rem;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px}.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;font-weight:500;margin-bottom:10px;color:#787861}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-scroll.ampm{max-height:none}.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}.time-option{padding:8px 12px;cursor:pointer;font-size:1rem;color:#454733;text-align:center;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}.action-buttons{display:flex;justify-content:space-between;gap:10px;padding:15px;border-top:1px solid rgba(120,120,97,.2)}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTimeFilter, decorators: [{
             type: Component,
@@ -4195,7 +4195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => InputTimeFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"filter-chips\">\n  @for (item of filters(); track item.value) {\n    <div\n      class=\"chip-input-wrapper\"\n      [class.has-value]=\"filterValues()[item.value]\"\n      [class.active]=\"activeFilterType() === item.value && isOpen()\"\n    >\n      <label class=\"floating-label\">\n        {{ item.placeholder || item.label || 'Seleccionar hora' }}\n      </label>\n\n      <input\n        type=\"text\"\n        class=\"chip-input\"\n        [value]=\"filterValues()[item.value] || ''\"\n        [placeholder]=\"item.placeholder || item.label || 'hh:mm'\"\n        readonly\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggleDropdown(item.value)\"\n        (keydown)=\"onEnter($event)\"\n      />\n\n      <button\n        type=\"button\"\n        class=\"time-icon-button\"\n        (click)=\"toggleDropdown(item.value)\"\n        title=\"Seleccionar hora\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"9\" />\n          <polyline points=\"12 7 12 12 15 15\" />\n        </svg>\n      </button>\n\n      @if (isOpen() && activeFilterType() === item.value) {\n        <div class=\"dropdown\">\n          <div class=\"datetime-content\">\n            <div class=\"time-section\">\n              <!-- <div class=\"time-header\">Horario</div> -->\n\n              <div class=\"time-selectors\">\n                <div class=\"time-group\">\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Hora</div>\n                    <div class=\"time-scroll\">\n                      @for (hour of hours12(); track hour.value) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"hour.value === selectedHour12\"\n                          (click)=\"setHour12(hour.value)\"\n                        >\n                          {{ hour.display }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-separator-vertical\">:</div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Min</div>\n                    <div class=\"time-scroll\">\n                      @for (minute of minutes(); track minute) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"minute === selectedMinute()\"\n                          (click)=\"setMinute(minute)\"\n                        >\n                          {{ minute.toString().padStart(2, '0') }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">AM/PM</div>\n                    <div class=\"time-scroll ampm\">\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'AM'\"\n                        (click)=\"setAmPm('AM')\"\n                      >\n                        AM\n                      </div>\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'PM'\"\n                        (click)=\"setAmPm('PM')\"\n                      >\n                        PM\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"action-buttons\">\n            <button\n              type=\"button\"\n              class=\"action-btn secondary\"\n              (click)=\"clearActive(item.value)\"\n            >\n              Limpiar\n            </button>\n            <button\n              type=\"button\"\n              class=\"action-btn primary\"\n              (click)=\"closeDropdown()\"\n            >\n              Aceptar\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.time-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:3}.time-icon-button svg{width:18px;height:18px}.dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:10;background:#e3e3d1;border:1px solid #787861;border-radius:0 0 5px 5px;box-shadow:0 4px 12px #00000026;min-width:220px}.datetime-content{display:flex;flex-direction:column}.time-section{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;font-size:1rem;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px}.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;font-weight:500;margin-bottom:10px;color:#787861}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-scroll.ampm{max-height:none}.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}.time-option{padding:8px 12px;cursor:pointer;font-size:1rem;color:#454733;text-align:center;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}.action-buttons{display:flex;justify-content:space-between;gap:10px;padding:15px;border-top:1px solid rgba(120,120,97,.2)}.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}\n"] }]
+                    ], template: "<div class=\"filter-chips\">\n  @for (item of filters(); track item.value) {\n    <div\n      class=\"chip-input-wrapper\"\n      [class.has-value]=\"filterValues()[item.value]\"\n      [class.active]=\"activeFilterType() === item.value && isOpen()\"\n    >\n      <label class=\"floating-label\">\n        {{ item.placeholder || item.label || 'Seleccionar hora' }}\n      </label>\n\n      <input\n        type=\"text\"\n        class=\"chip-input\"\n        [value]=\"filterValues()[item.value] || ''\"\n        [placeholder]=\"item.placeholder || item.label || 'hh:mm'\"\n        [attr.title]=\"item.placeholder || item.label || 'hh:mm'\"\n        readonly\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggleDropdown(item.value)\"\n        (keydown)=\"onEnter($event)\"\n      />\n\n      <button\n        type=\"button\"\n        class=\"time-icon-button\"\n        (click)=\"toggleDropdown(item.value)\"\n        title=\"Seleccionar hora\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"9\" />\n          <polyline points=\"12 7 12 12 15 15\" />\n        </svg>\n      </button>\n\n      @if (isOpen() && activeFilterType() === item.value) {\n        <div class=\"dropdown\">\n          <div class=\"datetime-content\">\n            <div class=\"time-section\">\n              <!-- <div class=\"time-header\">Horario</div> -->\n\n              <div class=\"time-selectors\">\n                <div class=\"time-group\">\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Hora</div>\n                    <div class=\"time-scroll\">\n                      @for (hour of hours12(); track hour.value) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"hour.value === selectedHour12\"\n                          (click)=\"setHour12(hour.value)\"\n                        >\n                          {{ hour.display }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-separator-vertical\">:</div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Min</div>\n                    <div class=\"time-scroll\">\n                      @for (minute of minutes(); track minute) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"minute === selectedMinute()\"\n                          (click)=\"setMinute(minute)\"\n                        >\n                          {{ minute.toString().padStart(2, '0') }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">AM/PM</div>\n                    <div class=\"time-scroll ampm\">\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'AM'\"\n                        (click)=\"setAmPm('AM')\"\n                      >\n                        AM\n                      </div>\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'PM'\"\n                        (click)=\"setAmPm('PM')\"\n                      >\n                        PM\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"action-buttons\">\n            <button\n              type=\"button\"\n              class=\"action-btn secondary\"\n              (click)=\"clearActive(item.value)\"\n            >\n              Limpiar\n            </button>\n            <button\n              type=\"button\"\n              class=\"action-btn primary\"\n              (click)=\"closeDropdown()\"\n            >\n              Aceptar\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".filter-chips{--filter-chip-min-width: 80px;--filter-chip-max-width: min(280px, 100%);--filter-chip-padding-start: 8px;--filter-chip-padding-end: 12px;--filter-chip-padding-end-actions: 34px}.filter-chips .chip-input-wrapper,.filter-chips .chip{flex:0 1 auto;min-width:var(--filter-chip-min-width);max-width:var(--filter-chip-max-width)}.filter-chips .chip-input{box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px var(--filter-chip-padding-end) 6px var(--filter-chip-padding-start)}.filter-chips .chip-input-wrapper:has(.clear-button) .chip-input,.filter-chips .chip-input-wrapper:has(.calendar-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.time-icon-button) .chip-input,.filter-chips .chip-input-wrapper:has(.right-controls) .chip-input{padding-right:var(--filter-chip-padding-end-actions)}.filter-chips .chip .content-chip{min-width:0;flex:1;width:100%;padding:0 var(--filter-chip-padding-start);box-sizing:border-box}.filter-chips .content-chip .chip-input{flex:1 1 auto;min-width:0;width:auto;padding-right:4px}.filter-chips .content-chip .icon{flex-shrink:0}.filter-chips{display:flex;gap:10px;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;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:1.1rem;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6}.chip-input-wrapper.has-value .floating-label{opacity:.9}.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, 1.4rem);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;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.time-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:3}.time-icon-button svg{width:18px;height:18px}.dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:10;background:#e3e3d1;border:1px solid #787861;border-radius:0 0 5px 5px;box-shadow:0 4px 12px #00000026;min-width:220px}.datetime-content{display:flex;flex-direction:column}.time-section{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;font-size:1rem;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px}.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;font-weight:500;margin-bottom:10px;color:#787861}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-scroll.ampm{max-height:none}.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}.time-option{padding:8px 12px;cursor:pointer;font-size:1rem;color:#454733;text-align:center;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}.action-buttons{display:flex;justify-content:space-between;gap:10px;padding:15px;border-top:1px solid rgba(120,120,97,.2)}.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}\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"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
 
 class TitleFilters {