sapenlinea-components 0.0.45 → 0.0.47

package/fesm2022/sapenlinea-components.mjs

@@ -124,6 +124,10 @@ class Table {
     expandedRowId = signal(null, ...(ngDevMode ? [{ debugName: "expandedRowId" }] : []));
     isRowExpandable = input(() => false, ...(ngDevMode ? [{ debugName: "isRowExpandable" }] : []));
     expandedChildren = input(() => null, ...(ngDevMode ? [{ debugName: "expandedChildren" }] : []));
+    rowIdKey = input('id', ...(ngDevMode ? [{ debugName: "rowIdKey" }] : []));
+    showSelection = input(false, ...(ngDevMode ? [{ debugName: "showSelection" }] : []));
+    selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
+    showTotals = input(false, ...(ngDevMode ? [{ debugName: "showTotals" }] : []));
     chips;
     ngAfterViewInit() {
         this.recalculateStatusChipWidth();
@@ -287,15 +291,18 @@ class Table {
             el.style.width = `${maxContentWidth}px`;
         });
     }
+    getRowId(row) {
+        return row?.[this.rowIdKey()];
+    }
     toggleRowExpand(row, event) {
         event?.stopPropagation();
         if (!this.isRowExpandable()(row))
             return;
-        const id = row['id'];
+        const id = this.getRowId(row);
         this.expandedRowId.set(this.expandedRowId() === id ? null : id);
     }
     isExpanded(row) {
-        return this.expandedRowId() === row['id'];
+        return this.expandedRowId() === this.getRowId(row);
     }
     getChildRows(row) {
         const provider = this.expandedChildren();
@@ -303,13 +310,41 @@ class Table {
             return [];
         return provider(row) ?? [];
     }
+    toggleAllRows(checked) {
+        if (!checked) {
+            this.selectedRows.set(new Set());
+            return;
+        }
+        const allIds = this.sortData().map(row => row['id']);
+        this.selectedRows.set(new Set(allIds));
+    }
+    toggleRow(row, checked) {
+        const next = new Set(this.selectedRows());
+        checked ? next.add(row.id) : next.delete(row.id);
+        this.selectedRows.set(next);
+    }
+    isRowSelected(row) {
+        return this.selectedRows().has(row.id);
+    }
+    isAllSelected() {
+        return this.sortData().length > 0 &&
+            this.selectedRows().size === this.sortData().length;
+    }
+    getMoneyTotal(col) {
+        if (col.type !== 'money' || !col.totalizable)
+            return 0;
+        return this.sortData().reduce((acc, row) => {
+            const value = Number(row[col.key]);
+            return acc + (isNaN(value) ? 0 : value);
+        }, 0);
+    }
     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 } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th class=\"actions-header\">Acciones</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track row['id']) {\r\n      <tr class=\"parent-row\" [class.expandable]=\"isRowExpandable()(row)\" [class.expanded]=\"isExpanded(row)\"\r\n        (click)=\"toggleRowExpand(row, $event)\">\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ row[col.key]?.toString() }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span class=\"icon\" [class]=\"col.icon\"></span>\r\n          </button>\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]) }}\r\n\r\n          }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content-table\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\r\n                    (click)=\"onOptionClick(option, row)\">\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n      @if (isRowExpandable()(row) && isExpanded(row)) {\r\n      @for (child of getChildRows(row); track child['id']) {\r\n      <tr class=\"child-row\">\r\n        <td class=\"child-cell-full\" [attr.colspan]=\"columns().length + (showActions() ? 1 : 0)\">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n              <span class=\"child-label\">{{ subCol.label }}</span>\r\n\r\n              @if (subCol.type === 'status') {\r\n              @let style = getStatusStyle(child[subCol.key]);\r\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n                [style.color]=\"style.color\">\r\n                {{ child[subCol.key] }}\r\n              </span>\r\n              } @else {\r\n\r\n              <span class=\"child-value\">\r\n                {{ formatValue(subCol, child[subCol.key]) }}\r\n              </span>\r\n              }\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n      }\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{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: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}.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>')}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:pointer}.inner-table tbody tr.parent-row:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.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:#777;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}\n"] });
+    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 } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n\r\n        @if (showSelection()) {\r\n        <th class=\"checkbox-header\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </th>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th class=\"actions-header\">Acciones</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track row['id']) {\r\n      <tr class=\"parent-row\" [class.expandable]=\"isRowExpandable()(row)\" [class.expanded]=\"isExpanded(row)\"\r\n        (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n        @if (showSelection()) {\r\n        <td class=\"checkbox-cell\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </td>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ row[col.key]?.toString() }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span class=\"icon\" [class]=\"col.icon\"></span>\r\n          </button>\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]) }}\r\n\r\n          }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content-table\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\r\n                    (click)=\"onOptionClick(option, row)\">\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n      @if (isRowExpandable()(row) && isExpanded(row)) {\r\n      <tr class=\"child-row child-header-row\">\r\n        <td class=\"child-cell-full\"\r\n          [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n              <span class=\"child-label\">{{ subCol.label }}</span>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n\r\n      @for (child of getChildRows(row); track child['id']) {\r\n      <tr class=\"child-row\">\r\n        <td class=\"child-cell-full\" [attr.colspan]=\"\r\n        columns().length +\r\n        (showActions() ? 1 : 0) +\r\n        (showSelection() ? 1 : 0)\r\n      \">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n\r\n              @if (subCol.type === 'status') {\r\n              @let style = getStatusStyle(child[subCol.key]);\r\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n                [style.color]=\"style.color\">\r\n                {{ child[subCol.key] }}\r\n              </span>\r\n              } @else {\r\n              <span class=\"child-value\">\r\n                {{ formatValue(subCol, child[subCol.key]) }}\r\n              </span>\r\n              }\r\n\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n      }\r\n      }\r\n      @if (showTotals()) {\r\n        <tr class=\"total-row\">\r\n        \r\n          <!-- checkbox -->\r\n          @if (showSelection()) {\r\n          <td class=\"checkbox-cell\"></td>\r\n          }\r\n        \r\n          @for (col of columns(); track col.key) {\r\n          <td [class]=\"getAlignment(col)\">\r\n        \r\n            @if (col.type === 'money' && col.totalizable) {\r\n              {{ formatValue(col, getMoneyTotal(col)) }}\r\n            } @else if (col === columns()[0]) {\r\n              <strong>Total</strong>\r\n            }\r\n        \r\n          </td>\r\n          }\r\n        \r\n          @if (showActions()) {\r\n          <td></td>\r\n          }\r\n        \r\n        </tr>\r\n        }\r\n        \r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;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}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.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: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}.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>')}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}.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}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table', imports: [], standalone: true, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th class=\"actions-header\">Acciones</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track row['id']) {\r\n      <tr class=\"parent-row\" [class.expandable]=\"isRowExpandable()(row)\" [class.expanded]=\"isExpanded(row)\"\r\n        (click)=\"toggleRowExpand(row, $event)\">\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ row[col.key]?.toString() }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span class=\"icon\" [class]=\"col.icon\"></span>\r\n          </button>\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]) }}\r\n\r\n          }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content-table\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\r\n                    (click)=\"onOptionClick(option, row)\">\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n      @if (isRowExpandable()(row) && isExpanded(row)) {\r\n      @for (child of getChildRows(row); track child['id']) {\r\n      <tr class=\"child-row\">\r\n        <td class=\"child-cell-full\" [attr.colspan]=\"columns().length + (showActions() ? 1 : 0)\">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n              <span class=\"child-label\">{{ subCol.label }}</span>\r\n\r\n              @if (subCol.type === 'status') {\r\n              @let style = getStatusStyle(child[subCol.key]);\r\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n                [style.color]=\"style.color\">\r\n                {{ child[subCol.key] }}\r\n              </span>\r\n              } @else {\r\n\r\n              <span class=\"child-value\">\r\n                {{ formatValue(subCol, child[subCol.key]) }}\r\n              </span>\r\n              }\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n      }\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{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: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}.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>')}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:pointer}.inner-table tbody tr.parent-row:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.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:#777;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}\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 }] }], chips: [{
+            args: [{ selector: 'lib-table', imports: [], standalone: true, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n\r\n        @if (showSelection()) {\r\n        <th class=\"checkbox-header\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </th>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th class=\"actions-header\">Acciones</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track row['id']) {\r\n      <tr class=\"parent-row\" [class.expandable]=\"isRowExpandable()(row)\" [class.expanded]=\"isExpanded(row)\"\r\n        (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n        @if (showSelection()) {\r\n        <td class=\"checkbox-cell\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </td>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ row[col.key]?.toString() }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span class=\"icon\" [class]=\"col.icon\"></span>\r\n          </button>\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]) }}\r\n\r\n          }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content-table\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\r\n                    (click)=\"onOptionClick(option, row)\">\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n      @if (isRowExpandable()(row) && isExpanded(row)) {\r\n      <tr class=\"child-row child-header-row\">\r\n        <td class=\"child-cell-full\"\r\n          [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n              <span class=\"child-label\">{{ subCol.label }}</span>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n\r\n      @for (child of getChildRows(row); track child['id']) {\r\n      <tr class=\"child-row\">\r\n        <td class=\"child-cell-full\" [attr.colspan]=\"\r\n        columns().length +\r\n        (showActions() ? 1 : 0) +\r\n        (showSelection() ? 1 : 0)\r\n      \">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n\r\n              @if (subCol.type === 'status') {\r\n              @let style = getStatusStyle(child[subCol.key]);\r\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n                [style.color]=\"style.color\">\r\n                {{ child[subCol.key] }}\r\n              </span>\r\n              } @else {\r\n              <span class=\"child-value\">\r\n                {{ formatValue(subCol, child[subCol.key]) }}\r\n              </span>\r\n              }\r\n\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n      }\r\n      }\r\n      @if (showTotals()) {\r\n        <tr class=\"total-row\">\r\n        \r\n          <!-- checkbox -->\r\n          @if (showSelection()) {\r\n          <td class=\"checkbox-cell\"></td>\r\n          }\r\n        \r\n          @for (col of columns(); track col.key) {\r\n          <td [class]=\"getAlignment(col)\">\r\n        \r\n            @if (col.type === 'money' && col.totalizable) {\r\n              {{ formatValue(col, getMoneyTotal(col)) }}\r\n            } @else if (col === columns()[0]) {\r\n              <strong>Total</strong>\r\n            }\r\n        \r\n          </td>\r\n          }\r\n        \r\n          @if (showActions()) {\r\n          <td></td>\r\n          }\r\n        \r\n        </tr>\r\n        }\r\n        \r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;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}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.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: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}.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>')}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}.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}\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 }] }], chips: [{
                 type: ViewChildren,
                 args: ['statusChip']
             }], onClickOutside: [{
@@ -2042,12 +2077,12 @@ class DynamicFormFields {
     }
     ctrl = (key) => this.form().get(key);
     getCheckboxArray(key) {
-        return this.form().get(key);
+        return this.form().get(key)?.controls;
     }
     onCheckboxChange(event, fieldKey, optionIndex) {
         const checkbox = event.target;
         const checkboxArray = this.getCheckboxArray(fieldKey);
-        checkboxArray.at(optionIndex).setValue(checkbox.checked);
+        checkboxArray?.[optionIndex]?.setValue(checkbox.checked);
     }
     ngOnDestroy() {
         this.copyFromSubscriptions.forEach((sub) => sub.unsubscribe());
@@ -2095,11 +2130,11 @@ class DynamicFormFields {
         submitBtn?.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\"\r\n            />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:#e3e3d1;padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.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}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"radio\">\r\n              <input\r\n                type=\"radio\"\r\n                [value]=\"o.value\"\r\n                [formControlName]=\"f.key\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"radio-mark\"></span>\r\n              <span class=\"radio-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"checkbox\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\r\n                (change)=\"onCheckboxChange($event, f.key, $index)\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"checkbox-mark\"></span>\r\n              <span class=\"checkbox-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:#e3e3d1;padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.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}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#454733;border-color:#454733}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.checkbox:hover .checkbox-mark{border-color:#a9a97f}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#454733}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:#e3e3d1;cursor:not-allowed}.checkbox input:disabled~.checkbox-label,.radio input:disabled~.radio-label{color:#1c1c1266;cursor:not-allowed}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\"\r\n            />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:#e3e3d1;padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.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}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
+            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"radio\">\r\n              <input\r\n                type=\"radio\"\r\n                [value]=\"o.value\"\r\n                [formControlName]=\"f.key\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"radio-mark\"></span>\r\n              <span class=\"radio-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"checkbox\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\r\n                (change)=\"onCheckboxChange($event, f.key, $index)\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"checkbox-mark\"></span>\r\n              <span class=\"checkbox-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:#e3e3d1;padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.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}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#454733;border-color:#454733}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.checkbox:hover .checkbox-mark{border-color:#a9a97f}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#454733}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:#e3e3d1;cursor:not-allowed}.checkbox input:disabled~.checkbox-label,.radio input:disabled~.radio-label{color:#1c1c1266;cursor:not-allowed}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
 
 class WizardForm {