sapenlinea-components 0.7.71 → 0.8.73

package/fesm2022/sapenlinea-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { model, input, signal, computed, Component, output, HostListener, ViewChildren, forwardRef, effect, ViewChild, inject, ElementRef, booleanAttribute, DestroyRef, EventEmitter, Output, Input as Input$1, Injectable, viewChildren, ChangeDetectionStrategy } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, UpperCasePipe } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
 import PubSub from 'pubsub-js';
@@ -140,6 +140,14 @@ class Table {
     showSelection = input(false, ...(ngDevMode ? [{ debugName: "showSelection" }] : []));
     selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
     showTotals = input(false, ...(ngDevMode ? [{ debugName: "showTotals" }] : []));
+    columnGroups = input([], ...(ngDevMode ? [{ debugName: "columnGroups" }] : []));
+    columnGroupChange = output();
+    hasColumnGroups = computed(() => this.columnGroups().length > 0, ...(ngDevMode ? [{ debugName: "hasColumnGroups" }] : []));
+    totalGroupSubColumns = computed(() => this.columnGroups().reduce((sum, g) => sum + g.columns.length, 0), ...(ngDevMode ? [{ debugName: "totalGroupSubColumns" }] : []));
+    totalColspan = computed(() => this.columns().length
+        + this.totalGroupSubColumns()
+        + (this.showActions() ? 1 : 0)
+        + (this.showSelection() ? 1 : 0), ...(ngDevMode ? [{ debugName: "totalColspan" }] : []));
     chips;
     ngAfterViewInit() {
         this.recalculateStatusChipWidth();
@@ -477,13 +485,20 @@ class Table {
             return { bg: '#D89D9D', color: '#CF0707' };
         return { bg: '#BAC2BB', color: '#40484C' };
     }
+    onGroupItemChange(col, row, value) {
+        this.columnGroupChange.emit({ key: col.key, row, value });
+    }
+    onGroupIconClick(col, row, event) {
+        event.stopPropagation();
+        this.iconAction.emit({ action: col.iconKey ?? col.key, row });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", isSignal: true, isRequired: false, transformFunction: null }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", isSignal: true, isRequired: false, transformFunction: null } }, 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 sortedData(); track row['id']) {\r\n      <tr class=\"parent-row\"\r\n        [class.expandable]=\"isRowExpandable()(row)\"\r\n        [class.expanded]=\"isExpanded(row)\"\r\n        [class.selected]=\"isRowSelected(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            {{ getStatusLabel(row[col.key]) }}\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 if (col.type === 'grade') {\r\n          @let style = getGradeStyle(row[col.key]);\r\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ formatValue(col, row[col.key]) }}\r\n          </span>\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                {{ getStatusLabel(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:8px 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;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.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>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\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 }, columnGroups: { classPropertyName: "columnGroups", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction", columnGroupChange: "columnGroupChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col)\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col)\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}\n"], dependencies: [{ kind: "pipe", type: UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table', imports: [], 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 sortedData(); track row['id']) {\r\n      <tr class=\"parent-row\"\r\n        [class.expandable]=\"isRowExpandable()(row)\"\r\n        [class.expanded]=\"isExpanded(row)\"\r\n        [class.selected]=\"isRowSelected(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            {{ getStatusLabel(row[col.key]) }}\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 if (col.type === 'grade') {\r\n          @let style = getGradeStyle(row[col.key]);\r\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ formatValue(col, row[col.key]) }}\r\n          </span>\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                {{ getStatusLabel(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:8px 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;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.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>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\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: [{
+            args: [{ selector: 'lib-table', imports: [UpperCasePipe], standalone: true, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col)\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col)\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], iconAction: [{ type: i0.Output, args: ["iconAction"] }], statusToneMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToneMap", required: false }] }], statusEnumMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusEnumMap", required: false }] }], subColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "subColumns", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], expandedChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedChildren", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], showSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelection", required: false }] }], showTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotals", required: false }] }], columnGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnGroups", required: false }] }], columnGroupChange: [{ type: i0.Output, args: ["columnGroupChange"] }], chips: [{
                 type: ViewChildren,
                 args: ['statusChip']
             }], onClickOutside: [{
@@ -2642,11 +2657,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()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label\n          >} @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <label class=\"label\">{{ f.label }}</label>\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\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}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #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 var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #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 var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #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}.form.form--compact .checkbox-group{padding:0 8px 0 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:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.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:#596300;border-color:#596300}.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%}.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:#596300}.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:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.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 var(--sl-form-surface, #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"] }, { kind: "component", type: ToggleCustom, selector: "lib-toggle-custom", inputs: ["label", "key", "disabled", "checked"], outputs: ["checkedChange", "toggleChange"] }] });
+    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()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\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}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;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 var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #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 var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #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}.form.form--compact .checkbox-group{padding:0 8px 0 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:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.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:#596300;border-color:#596300}.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%}.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:#596300}.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:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.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 var(--sl-form-surface, #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"] }, { kind: "component", type: ToggleCustom, selector: "lib-toggle-custom", inputs: ["label", "key", "disabled", "checked"], outputs: ["checkedChange", "toggleChange"] }] });
 }
 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, ToggleCustom], template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label\n          >} @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <label class=\"label\">{{ f.label }}</label>\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\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}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #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 var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #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 var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #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}.form.form--compact .checkbox-group{padding:0 8px 0 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:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.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:#596300;border-color:#596300}.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%}.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:#596300}.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:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.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 var(--sl-form-surface, #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, ToggleCustom], template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\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}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;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 var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #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 var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #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}.form.form--compact .checkbox-group{padding:0 8px 0 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:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.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:#596300;border-color:#596300}.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%}.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:#596300}.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:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.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 var(--sl-form-surface, #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 {
@@ -2956,10 +2971,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class DialogConfirmation {
     title = 'TITULO';
+    message = '';
     confirm = false;
     confirmLabel = 'Aceptar';
     items = [];
     btnMap = false;
+    type = 'default';
     close = new EventEmitter();
     expandedIndex = null;
     toggle(index) {
@@ -2972,13 +2989,15 @@ class DialogConfirmation {
         this.close.emit(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogConfirmation, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogConfirmation, isStandalone: true, selector: "lib-dialog-confirmation", inputs: { title: "title", confirm: "confirm", confirmLabel: "confirmLabel", items: "items", btnMap: "btnMap" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n      <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n        @for (item of items; track item.key; let i = $index) {\r\n\r\n        <div class=\"info-item\">\r\n          <div class=\"info-main\" [class.info-main-expanded]=\"item.expandible\" (click)=\"item.expandible && toggle(i)\">\r\n            <span class=\"label\">{{ item.label }} @if (item.expandible) {\r\n              <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n              }\r\n            </span>\r\n            <span class=\"value\"> {{ item.value }} </span>\r\n          </div>\r\n\r\n          @if (expandedIndex === i && item.children?.length) {\r\n          <div class=\"info-children\">\r\n            @for (child of item.children; track child.key) {\r\n            <div class=\"info-item child-item\">\r\n              <div class=\"info-main\">\r\n                <span class=\"label\">{{ child.label }}</span>\r\n                <span class=\"value\">{{ child.value }}</span>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n            <path fill=\"#fff\"\r\n              d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n            <path fill=\"#fff\"\r\n              d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n          </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      } @else {\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n            <path fill=\"#fff\"\r\n              d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n            <path fill=\"#fff\"\r\n              d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n          </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff;display:flex;gap:4px;align-items:center}.btn.confirm:hover{background-color:#596300c2}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogConfirmation, isStandalone: true, selector: "lib-dialog-confirmation", inputs: { title: "title", message: "message", confirm: "confirm", confirmLabel: "confirmLabel", items: "items", btnMap: "btnMap", type: "type" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <div class=\"modal-header-title\">\r\n        <div class=\"icon-container\" class=\"icono-container\" [ngClass]=\"type\">\r\n          @if(type === 'info') {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            class=\"icon icon-tabler icons-tabler-outline icon-tabler-circle-check\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\r\n            <path d=\"M9 12l2 2l4 -4\" />\r\n          </svg>\r\n          }\r\n        </div>\r\n        <h2>{{ title }}</h2>\r\n        <p class=\"modal-header-message\">{{ message }}</p>\r\n      </div>\r\n      <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n        @for (item of items; track item.key; let i = $index) {\r\n\r\n        <div class=\"info-item\">\r\n          <div class=\"info-main\" [class.info-main-expanded]=\"item.expandible\" (click)=\"item.expandible && toggle(i)\">\r\n            <span class=\"label\">{{ item.label }} @if (item.expandible) {\r\n              <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n              }\r\n            </span>\r\n            <span class=\"value\"> {{ item.value }} </span>\r\n          </div>\r\n\r\n          @if (expandedIndex === i && item.children?.length) {\r\n          <div class=\"info-children\">\r\n            @for (child of item.children; track child.key) {\r\n            <div class=\"info-item child-item\">\r\n              <div class=\"info-main\">\r\n                <span class=\"label\">{{ child.label }}</span>\r\n                <span class=\"value\">{{ child.value }}</span>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n          <path fill=\"#fff\"\r\n            d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n          <path fill=\"#fff\"\r\n            d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n        </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      } @else {\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n          <path fill=\"#fff\"\r\n            d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n          <path fill=\"#fff\"\r\n            d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n        </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.icono-container{width:64px;height:64px;border-radius:50%;padding:12px;display:flex;align-items:center;justify-content:center;background-color:#e3e3d1;transition:background-color .2s}.icono-container.info{background-color:#0088ff3a}.icono-container.info svg{width:42px;height:42px;color:#08f}.modal-header-title{display:flex;flex-direction:column;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.modal-header-message{color:#d14c4c;font-size:12px;line-height:1.5}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff;display:flex;gap:4px;align-items:center}.btn.confirm:hover{background-color:#596300c2}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogConfirmation, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dialog-confirmation', imports: [CommonModule], template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n      <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n        @for (item of items; track item.key; let i = $index) {\r\n\r\n        <div class=\"info-item\">\r\n          <div class=\"info-main\" [class.info-main-expanded]=\"item.expandible\" (click)=\"item.expandible && toggle(i)\">\r\n            <span class=\"label\">{{ item.label }} @if (item.expandible) {\r\n              <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n              }\r\n            </span>\r\n            <span class=\"value\"> {{ item.value }} </span>\r\n          </div>\r\n\r\n          @if (expandedIndex === i && item.children?.length) {\r\n          <div class=\"info-children\">\r\n            @for (child of item.children; track child.key) {\r\n            <div class=\"info-item child-item\">\r\n              <div class=\"info-main\">\r\n                <span class=\"label\">{{ child.label }}</span>\r\n                <span class=\"value\">{{ child.value }}</span>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n            <path fill=\"#fff\"\r\n              d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n            <path fill=\"#fff\"\r\n              d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n          </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      } @else {\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n            <path fill=\"#fff\"\r\n              d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n            <path fill=\"#fff\"\r\n              d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n          </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff;display:flex;gap:4px;align-items:center}.btn.confirm:hover{background-color:#596300c2}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"] }]
+            args: [{ selector: 'lib-dialog-confirmation', imports: [CommonModule], template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <div class=\"modal-header-title\">\r\n        <div class=\"icon-container\" class=\"icono-container\" [ngClass]=\"type\">\r\n          @if(type === 'info') {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            class=\"icon icon-tabler icons-tabler-outline icon-tabler-circle-check\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\r\n            <path d=\"M9 12l2 2l4 -4\" />\r\n          </svg>\r\n          }\r\n        </div>\r\n        <h2>{{ title }}</h2>\r\n        <p class=\"modal-header-message\">{{ message }}</p>\r\n      </div>\r\n      <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n        @for (item of items; track item.key; let i = $index) {\r\n\r\n        <div class=\"info-item\">\r\n          <div class=\"info-main\" [class.info-main-expanded]=\"item.expandible\" (click)=\"item.expandible && toggle(i)\">\r\n            <span class=\"label\">{{ item.label }} @if (item.expandible) {\r\n              <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n              }\r\n            </span>\r\n            <span class=\"value\"> {{ item.value }} </span>\r\n          </div>\r\n\r\n          @if (expandedIndex === i && item.children?.length) {\r\n          <div class=\"info-children\">\r\n            @for (child of item.children; track child.key) {\r\n            <div class=\"info-item child-item\">\r\n              <div class=\"info-main\">\r\n                <span class=\"label\">{{ child.label }}</span>\r\n                <span class=\"value\">{{ child.value }}</span>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n          <path fill=\"#fff\"\r\n            d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n          <path fill=\"#fff\"\r\n            d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n        </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      } @else {\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n          <path fill=\"#fff\"\r\n            d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n          <path fill=\"#fff\"\r\n            d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n        </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.icono-container{width:64px;height:64px;border-radius:50%;padding:12px;display:flex;align-items:center;justify-content:center;background-color:#e3e3d1;transition:background-color .2s}.icono-container.info{background-color:#0088ff3a}.icono-container.info svg{width:42px;height:42px;color:#08f}.modal-header-title{display:flex;flex-direction:column;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.modal-header-message{color:#d14c4c;font-size:12px;line-height:1.5}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff;display:flex;gap:4px;align-items:center}.btn.confirm:hover{background-color:#596300c2}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"] }]
         }], propDecorators: { title: [{
                 type: Input$1
+            }], message: [{
+                type: Input$1
             }], confirm: [{
                 type: Input$1
             }], confirmLabel: [{
@@ -2987,6 +3006,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input$1
             }], btnMap: [{
                 type: Input$1
+            }], type: [{
+                type: Input$1
             }], close: [{
                 type: Output
             }] } });
@@ -4399,16 +4420,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], validateOnTabChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateOnTabChange", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], tabValidationFailed: [{ type: i0.Output, args: ["tabValidationFailed"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], childCards: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CardContent), { isSignal: true }] }] } });
 
 class NotFoundSection {
+    title = input('No hay datos', ...(ngDevMode ? [{ debugName: "title" }] : []));
     showButton = input(true, ...(ngDevMode ? [{ debugName: "showButton" }] : []));
     buttonLabel = input('Crear', ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
     openModal = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotFoundSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotFoundSection, isStandalone: true, selector: "lib-not-found-section", inputs: { showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModal: "openModal" }, ngImport: i0, template: "<div class=\"content-container\">\r\n    <div class=\"no-data-container\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-inbox\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M4 13h3l3 3h4l3 -3h3\" />\r\n      </svg>\r\n      <div class=\"title2\">No hay datos</div>\r\n      @if(showButton()){\r\n      <button class=\"button-medium-primary\" (click)=\"openModal.emit()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-plus\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M12 5l0 14\" />\r\n          <path d=\"M5 12l14 0\" />\r\n        </svg>\r\n        <div class=\"label\">{{ buttonLabel() }}</div>\r\n      </button>\r\n    }\r\n    </div>\r\n  </div>", styles: [".content-container{width:100%;height:100%;min-height:200px;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;flex-shrink:0;position:relative;padding:24px}.no-data-container{width:100%;max-width:280px;display:flex;flex-direction:column;justify-content:center;align-items:center}.title2{color:var(--schemes-on-surface, #171c1f);text-align:center;font-family:var(--headline-medium-font, \"Roboto-SemiBold\", sans-serif);font-size:24px;line-height:32px;font-weight:600;margin-bottom:24px;position:relative}.button-medium-primary{background-color:var(--primary, #596300);padding:16px 22px;width:100%;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-medium-primary:hover{background-color:var(--on-secondary-container, #61661f)}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.icon.icon-tabler-inbox{width:64px;height:64px;color:#171c1f}.label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotFoundSection, isStandalone: true, selector: "lib-not-found-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModal: "openModal" }, ngImport: i0, template: "<div class=\"content-container\">\r\n    <div class=\"no-data-container\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-inbox\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M4 13h3l3 3h4l3 -3h3\" />\r\n      </svg>\r\n      <div class=\"title2\">{{ title() }}</div>\r\n      @if(showButton()){\r\n      <button class=\"button-medium-primary\" (click)=\"openModal.emit()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-plus\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M12 5l0 14\" />\r\n          <path d=\"M5 12l14 0\" />\r\n        </svg>\r\n        <div class=\"label\">{{ buttonLabel() }}</div>\r\n      </button>\r\n    }\r\n    </div>\r\n  </div>", styles: [".content-container{width:100%;height:100%;min-height:200px;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;flex-shrink:0;position:relative;padding:24px}.no-data-container{width:100%;max-width:280px;display:flex;flex-direction:column;justify-content:center;align-items:center}.title2{color:var(--schemes-on-surface, #171c1f);text-align:center;font-family:var(--headline-medium-font, \"Roboto-SemiBold\", sans-serif);font-size:24px;line-height:32px;font-weight:600;margin-bottom:24px;position:relative}.button-medium-primary{background-color:var(--primary, #596300);padding:16px 22px;width:100%;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-medium-primary:hover{background-color:var(--on-secondary-container, #61661f)}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.icon.icon-tabler-inbox{width:64px;height:64px;color:#171c1f}.label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotFoundSection, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-not-found-section', imports: [], template: "<div class=\"content-container\">\r\n    <div class=\"no-data-container\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-inbox\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M4 13h3l3 3h4l3 -3h3\" />\r\n      </svg>\r\n      <div class=\"title2\">No hay datos</div>\r\n      @if(showButton()){\r\n      <button class=\"button-medium-primary\" (click)=\"openModal.emit()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-plus\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M12 5l0 14\" />\r\n          <path d=\"M5 12l14 0\" />\r\n        </svg>\r\n        <div class=\"label\">{{ buttonLabel() }}</div>\r\n      </button>\r\n    }\r\n    </div>\r\n  </div>", styles: [".content-container{width:100%;height:100%;min-height:200px;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;flex-shrink:0;position:relative;padding:24px}.no-data-container{width:100%;max-width:280px;display:flex;flex-direction:column;justify-content:center;align-items:center}.title2{color:var(--schemes-on-surface, #171c1f);text-align:center;font-family:var(--headline-medium-font, \"Roboto-SemiBold\", sans-serif);font-size:24px;line-height:32px;font-weight:600;margin-bottom:24px;position:relative}.button-medium-primary{background-color:var(--primary, #596300);padding:16px 22px;width:100%;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-medium-primary:hover{background-color:var(--on-secondary-container, #61661f)}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.icon.icon-tabler-inbox{width:64px;height:64px;color:#171c1f}.label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
-        }], propDecorators: { showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], openModal: [{ type: i0.Output, args: ["openModal"] }] } });
+            args: [{ selector: 'lib-not-found-section', imports: [], template: "<div class=\"content-container\">\r\n    <div class=\"no-data-container\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-inbox\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M4 13h3l3 3h4l3 -3h3\" />\r\n      </svg>\r\n      <div class=\"title2\">{{ title() }}</div>\r\n      @if(showButton()){\r\n      <button class=\"button-medium-primary\" (click)=\"openModal.emit()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-plus\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M12 5l0 14\" />\r\n          <path d=\"M5 12l14 0\" />\r\n        </svg>\r\n        <div class=\"label\">{{ buttonLabel() }}</div>\r\n      </button>\r\n    }\r\n    </div>\r\n  </div>", styles: [".content-container{width:100%;height:100%;min-height:200px;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;flex-shrink:0;position:relative;padding:24px}.no-data-container{width:100%;max-width:280px;display:flex;flex-direction:column;justify-content:center;align-items:center}.title2{color:var(--schemes-on-surface, #171c1f);text-align:center;font-family:var(--headline-medium-font, \"Roboto-SemiBold\", sans-serif);font-size:24px;line-height:32px;font-weight:600;margin-bottom:24px;position:relative}.button-medium-primary{background-color:var(--primary, #596300);padding:16px 22px;width:100%;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-medium-primary:hover{background-color:var(--on-secondary-container, #61661f)}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.icon.icon-tabler-inbox{width:64px;height:64px;color:#171c1f}.label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], openModal: [{ type: i0.Output, args: ["openModal"] }] } });
 
 class ToastService {
     currentToast = signal(null, ...(ngDevMode ? [{ debugName: "currentToast" }] : []));
@@ -4513,6 +4535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }] });
 
 class OptionCard {
+    mode = input('default', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
     buttonBg = input(...(ngDevMode ? [undefined, { debugName: "buttonBg" }] : []));
@@ -4522,12 +4545,27 @@ class OptionCard {
         this.clickAction.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OptionCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: OptionCard, isStandalone: true, selector: "lib-option-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonBg: { classPropertyName: "buttonBg", publicName: "buttonBg", isSignal: true, isRequired: false, transformFunction: null }, iconBg: { classPropertyName: "iconBg", publicName: "iconBg", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickAction: "clickAction" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"option-btn\"\r\n  (click)=\"onClick()\"\r\n  [style.--btn-bg]=\"buttonBg()\"\r\n  [style.--icon-bg]=\"iconBg()\"\r\n>\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-icon\">\r\n    <ng-content select=\"[icon]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Contenido -->\r\n  <div class=\"option-btn-content\">\r\n    <div class=\"option-btn-header\">\r\n      <h3 class=\"option-btn-title\">\r\n        {{ label() }}\r\n      </h3>\r\n\r\n      <span class=\"option-btn-chevron\">\u203A</span>\r\n    </div>\r\n\r\n    @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n    }\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #596300);color:var(--surface, #ffffff)}.option-btn-icon ::ng-deep svg{stroke:currentColor}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: OptionCard, isStandalone: true, selector: "lib-option-card", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonBg: { classPropertyName: "buttonBg", publicName: "buttonBg", isSignal: true, isRequired: false, transformFunction: null }, iconBg: { classPropertyName: "iconBg", publicName: "iconBg", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickAction: "clickAction" }, ngImport: i0, template: "<button type=\"button\" class=\"option-btn\" (click)=\"onClick()\" [style.--btn-bg]=\"buttonBg()\" [style.--icon-bg]=\"iconBg()\">\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-wrapper\" [class.option-btn-wrapper--quick-access]=\"mode() === 'quick-access'\">\r\n    <div class=\"option-btn-icon\">\r\n      <ng-content select=\"[icon]\"></ng-content>\r\n    </div>\r\n\r\n\r\n    <!-- Contenido -->\r\n    <div class=\"option-btn-content\">\r\n      <div class=\"option-btn-header\">\r\n        <h3 class=\"option-btn-title\">\r\n          {{ label() }}\r\n        </h3>\r\n\r\n        @if (mode() === 'default') {\r\n        <span class=\"option-btn-chevron\">\u203A</span>\r\n        }\r\n      </div>\r\n\r\n      @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n      }\r\n    </div>\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-wrapper{display:flex;align-items:flex-start;gap:16px}.option-btn-wrapper--quick-access{display:flex;flex-direction:column;gap:16px;padding:8px}.option-btn-wrapper--quick-access .option-btn-icon svg{width:24px;height:24px}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #596300);color:var(--surface, #ffffff)}.option-btn-icon ::ng-deep svg{stroke:currentColor}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OptionCard, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-option-card', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  type=\"button\"\r\n  class=\"option-btn\"\r\n  (click)=\"onClick()\"\r\n  [style.--btn-bg]=\"buttonBg()\"\r\n  [style.--icon-bg]=\"iconBg()\"\r\n>\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-icon\">\r\n    <ng-content select=\"[icon]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Contenido -->\r\n  <div class=\"option-btn-content\">\r\n    <div class=\"option-btn-header\">\r\n      <h3 class=\"option-btn-title\">\r\n        {{ label() }}\r\n      </h3>\r\n\r\n      <span class=\"option-btn-chevron\">\u203A</span>\r\n    </div>\r\n\r\n    @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n    }\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #596300);color:var(--surface, #ffffff)}.option-btn-icon ::ng-deep svg{stroke:currentColor}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], buttonBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonBg", required: false }] }], iconBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBg", required: false }] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
+            args: [{ selector: 'lib-option-card', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"option-btn\" (click)=\"onClick()\" [style.--btn-bg]=\"buttonBg()\" [style.--icon-bg]=\"iconBg()\">\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-wrapper\" [class.option-btn-wrapper--quick-access]=\"mode() === 'quick-access'\">\r\n    <div class=\"option-btn-icon\">\r\n      <ng-content select=\"[icon]\"></ng-content>\r\n    </div>\r\n\r\n\r\n    <!-- Contenido -->\r\n    <div class=\"option-btn-content\">\r\n      <div class=\"option-btn-header\">\r\n        <h3 class=\"option-btn-title\">\r\n          {{ label() }}\r\n        </h3>\r\n\r\n        @if (mode() === 'default') {\r\n        <span class=\"option-btn-chevron\">\u203A</span>\r\n        }\r\n      </div>\r\n\r\n      @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n      }\r\n    </div>\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-wrapper{display:flex;align-items:flex-start;gap:16px}.option-btn-wrapper--quick-access{display:flex;flex-direction:column;gap:16px;padding:8px}.option-btn-wrapper--quick-access .option-btn-icon svg{width:24px;height:24px}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #596300);color:var(--surface, #ffffff)}.option-btn-icon ::ng-deep svg{stroke:currentColor}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], buttonBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonBg", required: false }] }], iconBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBg", required: false }] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
+
+class QuickAccessCards {
+    title = input('Accesos Rápidos', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    clickAction = output();
+    onOptionClick(item) {
+        this.clickAction.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickAccessCards, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: QuickAccessCards, isStandalone: true, selector: "lib-quick-access-cards", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickAction: "clickAction" }, ngImport: i0, template: "<h2 class=\"quick-access-title\">{{ title() }}</h2>\n<div class=\"quick-access-grid\">\n    @for (item of items(); track item.id) {\n        <lib-option-card [label]=\"item.label\" [description]=\"item.description\" [iconBg]=\"item.iconBg\"\n            [mode]=\"'quick-access'\" (clickAction)=\"onOptionClick(item)\">\n            <span icon [class]=\"item.icon\"></span>\n        </lib-option-card>\n    }\n</div>", styles: [":host{display:block}.quick-access-title{font-family:Manrope,sans-serif;font-weight:700;font-size:24px;color:var(--text, #fff);margin-bottom:20px;letter-spacing:.3px}.quick-access-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}::ng-deep .icon-settings,::ng-deep .icon-check,::ng-deep .icon-close,::ng-deep .icon-info,::ng-deep .icon-alert,::ng-deep .icon-star,::ng-deep .icon-users,::ng-deep .icon-building,::ng-deep .icon-car,::ng-deep .icon-shield,::ng-deep .icon-clipboard,::ng-deep .icon-map-pin,::ng-deep .icon-chart,::ng-deep .icon-file,::ng-deep .icon-refresh,::ng-deep .icon-edit,::ng-deep .icon-search{width:24px;height:24px;background-color:currentColor;display:inline-block;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat}::ng-deep .icon-settings{-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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>')}::ng-deep .icon-check{-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=\"M5 12l5 5l10-10\"/></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=\"M5 12l5 5l10-10\"/></svg>')}::ng-deep .icon-close{-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=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></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=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></svg>')}::ng-deep .icon-info{-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 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></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 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></svg>')}::ng-deep .icon-alert{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>')}::ng-deep .icon-star{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>')}::ng-deep .icon-users{-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=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></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=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></svg>')}::ng-deep .icon-building{-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 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></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 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></svg>')}::ng-deep .icon-car{-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=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></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=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></svg>')}::ng-deep .icon-shield{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-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=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-clipboard{-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=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-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=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-map-pin{-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=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></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=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></svg>')}::ng-deep .icon-chart{-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 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></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 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></svg>')}::ng-deep .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=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></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=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></svg>')}::ng-deep .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>')}::ng-deep .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>')}::ng-deep .icon-search{-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=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></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=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg>')}@media (max-width: 1200px){.quick-access-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.quick-access-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.quick-access-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "component", type: OptionCard, selector: "lib-option-card", inputs: ["mode", "label", "description", "buttonBg", "iconBg"], outputs: ["clickAction"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickAccessCards, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-quick-access-cards', imports: [OptionCard], template: "<h2 class=\"quick-access-title\">{{ title() }}</h2>\n<div class=\"quick-access-grid\">\n    @for (item of items(); track item.id) {\n        <lib-option-card [label]=\"item.label\" [description]=\"item.description\" [iconBg]=\"item.iconBg\"\n            [mode]=\"'quick-access'\" (clickAction)=\"onOptionClick(item)\">\n            <span icon [class]=\"item.icon\"></span>\n        </lib-option-card>\n    }\n</div>", styles: [":host{display:block}.quick-access-title{font-family:Manrope,sans-serif;font-weight:700;font-size:24px;color:var(--text, #fff);margin-bottom:20px;letter-spacing:.3px}.quick-access-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}::ng-deep .icon-settings,::ng-deep .icon-check,::ng-deep .icon-close,::ng-deep .icon-info,::ng-deep .icon-alert,::ng-deep .icon-star,::ng-deep .icon-users,::ng-deep .icon-building,::ng-deep .icon-car,::ng-deep .icon-shield,::ng-deep .icon-clipboard,::ng-deep .icon-map-pin,::ng-deep .icon-chart,::ng-deep .icon-file,::ng-deep .icon-refresh,::ng-deep .icon-edit,::ng-deep .icon-search{width:24px;height:24px;background-color:currentColor;display:inline-block;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat}::ng-deep .icon-settings{-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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>')}::ng-deep .icon-check{-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=\"M5 12l5 5l10-10\"/></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=\"M5 12l5 5l10-10\"/></svg>')}::ng-deep .icon-close{-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=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></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=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></svg>')}::ng-deep .icon-info{-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 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></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 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></svg>')}::ng-deep .icon-alert{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>')}::ng-deep .icon-star{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>')}::ng-deep .icon-users{-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=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></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=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></svg>')}::ng-deep .icon-building{-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 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></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 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></svg>')}::ng-deep .icon-car{-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=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></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=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></svg>')}::ng-deep .icon-shield{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-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=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-clipboard{-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=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-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=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-map-pin{-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=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></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=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></svg>')}::ng-deep .icon-chart{-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 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></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 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></svg>')}::ng-deep .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=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></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=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></svg>')}::ng-deep .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>')}::ng-deep .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>')}::ng-deep .icon-search{-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=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></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=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg>')}@media (max-width: 1200px){.quick-access-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.quick-access-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.quick-access-grid{grid-template-columns:1fr}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
 
 echarts.use([
     BarChart$1,
@@ -5485,7 +5523,7 @@ class TableChart {
         this.localPage.set(page);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableChart, isStandalone: true, selector: "lib-table-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, collapsedRows: { classPropertyName: "collapsedRows", publicName: "collapsedRows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-chart-container\" [class.expanded]=\"isExpanded()\">\n    <div class=\"table-chart-header\">\n        <h3 class=\"table-chart-title\">{{ title() }}</h3>\n        <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\"\n            [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\n            @if (isExpanded()) {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"lucide lucide-minimize-2\">\n                <polyline points=\"4 14 10 14 10 20\" />\n                <polyline points=\"20 10 14 10 14 4\" />\n                <line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\" />\n                <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n            </svg>\n            } @else {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"lucide lucide-maximize-2\">\n                <polyline points=\"15 3 21 3 21 9\" />\n                <polyline points=\"9 21 3 21 3 15\" />\n                <line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\" />\n                <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n            </svg>\n            }\n        </button>\n    </div>\n    <div class=\"chart-wrapper\">\n        @if (data().length > 0) {\n        <lib-table [columns]=\"columns()\" [data]=\"displayedData()\" [showActions]=\"false\" />\n        @if (isExpanded() && totalItems() > itemsPerPage()) {\n        <lib-pagination [totalItems]=\"totalItems()\" [pageSize]=\"itemsPerPage()\" [(page)]=\"localPage\" />\n        }\n        } @else {\n        <div class=\"no-data\">\n            <lib-not-found-section [showButton]=\"false\" />\n        </div>\n        }\n    </div>\n</div>\n@if (isExpanded()) {\n<div class=\"overlay\" (click)=\"toggleExpand()\"></div>\n}", styles: [":host{display:block;width:100%;height:100%;min-width:0}.table-chart-container{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease;box-sizing:border-box}.table-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;min-width:0;overflow:auto}.table-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.table-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.table-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.no-data{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: Table, selector: "lib-table", inputs: ["columns", "data", "actions", "showActions", "statusToneMap", "statusEnumMap", "subColumns", "isRowExpandable", "expandedChildren", "rowIdKey", "showSelection", "showTotals"], outputs: ["optionSelected", "iconAction"] }, { kind: "component", type: NotFoundSection, selector: "lib-not-found-section", inputs: ["showButton", "buttonLabel"], outputs: ["openModal"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["page", "pageSize", "totalItems", "showPageSizeSelector", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableChart, isStandalone: true, selector: "lib-table-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, collapsedRows: { classPropertyName: "collapsedRows", publicName: "collapsedRows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-chart-container\" [class.expanded]=\"isExpanded()\">\n    <div class=\"table-chart-header\">\n        <h3 class=\"table-chart-title\">{{ title() }}</h3>\n        <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\"\n            [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\n            @if (isExpanded()) {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"lucide lucide-minimize-2\">\n                <polyline points=\"4 14 10 14 10 20\" />\n                <polyline points=\"20 10 14 10 14 4\" />\n                <line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\" />\n                <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n            </svg>\n            } @else {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"lucide lucide-maximize-2\">\n                <polyline points=\"15 3 21 3 21 9\" />\n                <polyline points=\"9 21 3 21 3 15\" />\n                <line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\" />\n                <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n            </svg>\n            }\n        </button>\n    </div>\n    <div class=\"chart-wrapper\">\n        @if (data().length > 0) {\n        <lib-table [columns]=\"columns()\" [data]=\"displayedData()\" [showActions]=\"false\" />\n        @if (isExpanded() && totalItems() > itemsPerPage()) {\n        <lib-pagination [totalItems]=\"totalItems()\" [pageSize]=\"itemsPerPage()\" [(page)]=\"localPage\" />\n        }\n        } @else {\n        <div class=\"no-data\">\n            <lib-not-found-section [showButton]=\"false\" />\n        </div>\n        }\n    </div>\n</div>\n@if (isExpanded()) {\n<div class=\"overlay\" (click)=\"toggleExpand()\"></div>\n}", styles: [":host{display:block;width:100%;height:100%;min-width:0}.table-chart-container{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease;box-sizing:border-box}.table-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;min-width:0;overflow:auto}.table-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.table-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.table-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.no-data{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: Table, selector: "lib-table", inputs: ["columns", "data", "actions", "showActions", "statusToneMap", "statusEnumMap", "subColumns", "isRowExpandable", "expandedChildren", "rowIdKey", "showSelection", "showTotals", "columnGroups"], outputs: ["optionSelected", "iconAction", "columnGroupChange"] }, { kind: "component", type: NotFoundSection, selector: "lib-not-found-section", inputs: ["title", "showButton", "buttonLabel"], outputs: ["openModal"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["page", "pageSize", "totalItems", "showPageSizeSelector", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableChart, decorators: [{
             type: Component,
@@ -5603,11 +5641,11 @@ class LoadImage {
         this.zoomScale = 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LoadImage, isStandalone: true, selector: "lib-load-image", inputs: { title: "title", description: "description", recommendedSize: "recommendedSize", titleIcon: "titleIcon", imageUrl: "imageUrl" }, outputs: { imageLoaded: "imageLoaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"load-image-container\">\n  <!-- Header Info -->\n  <div class=\"header-info\">\n    <div class=\"title-section\">\n      <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n      <div class=\"text-group\">\n        <h3 class=\"title\">\n          {{ title }}\n          @if (imageSrc) {\n            <span class=\"badge-cargado\">CARGADO</span>\n          }\n        </h3>\n        <p class=\"description\">{{ description }}</p>\n      </div>\n    </div>\n  </div>\n\n  <hr class=\"divider\" />\n\n  <!-- Upload / Preview Box -->\n  <div class=\"box-area\" \n       [class.empty]=\"!imageSrc\" \n       [class.dragging]=\"isDragging\"\n       (dragover)=\"onDragOver($event)\" \n       (dragleave)=\"onDragLeave($event)\" \n       (drop)=\"onDrop($event)\"\n       (click)=\"!imageSrc ? triggerFileInput() : null\">\n    \n    <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n    <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n    @if (!imageSrc) {\n      <div class=\"upload-state\">\n        <i class=\"icon-big icon-upload\"></i>\n        <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n        <p class=\"upload-hint\">{{ recommendedSize }}</p>\n      </div>\n    }\n\n    <!-- Estado: Cargado (Preview) -->\n    @if (imageSrc) {\n      <div class=\"preview-state\">\n        <img [src]=\"imageSrc\" alt=\"Preview\">\n        \n        <!-- Hover overlay de acciones -->\n        <div class=\"actions-overlay\">\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n            <i class=\"icon-small icon-expand\"></i> Ampliar\n          </button>\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n            <i class=\"icon-small icon-change\"></i> Cambiar\n          </button>\n          <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n            <i class=\"icon-small icon-delete\"></i> Eliminar\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions / Info -->\n  <div class=\"footer-area\">\n    @if (!imageSrc) {\n      <div class=\"footer-text\">\n      </div>\n      <button class=\"btn-subir\" (click)=\"triggerFileInput()\">\n        <i class=\"icon-small icon-upload\"></i> Subir\n      </button>\n    } @else {\n      <div class=\"footer-text-loaded\">\n        <span>Recomendado: 300x100 px</span>\n        <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n@if (isExpanded) {\n  <div class=\"lightbox-overlay\" (click)=\"closeLightbox()\">\n    <!-- Top Bar -->\n    <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <div class=\"zoom-controls\">\n        <button class=\"btn-icon\" (click)=\"zoomIn()\">\n          <i class=\"icon-small icon-plus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomOut()\">\n          <i class=\"icon-small icon-minus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomReset()\">\n          <i class=\"icon-small icon-expand\"></i>\n        </button>\n      </div>\n      <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n    </div>\n\n    <!-- Centro: Imagen Expandida -->\n    <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n      <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n    </div>\n    \n    <!-- Parte Inferior -->\n    <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <span class=\"lightbox-title\">{{ title }}</span>\n      <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n    </div>\n  </div>\n}\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-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-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LoadImage, isStandalone: true, selector: "lib-load-image", inputs: { title: "title", description: "description", recommendedSize: "recommendedSize", titleIcon: "titleIcon", imageUrl: "imageUrl" }, outputs: { imageLoaded: "imageLoaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"load-image-container\">\n  <!-- Header Info -->\n  <div class=\"header-info\">\n    <div class=\"title-section\">\n      <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n      <div class=\"text-group\">\n        <h3 class=\"title\">\n          {{ title }}\n          @if (imageSrc) {\n            <span class=\"badge-cargado\">CARGADO</span>\n          }\n        </h3>\n        <p class=\"description\">{{ description }}</p>\n      </div>\n    </div>\n  </div>\n\n  <hr class=\"divider\" />\n\n  <!-- Upload / Preview Box -->\n  <div class=\"box-area\" \n       [class.empty]=\"!imageSrc\" \n       [class.dragging]=\"isDragging\"\n       (dragover)=\"onDragOver($event)\" \n       (dragleave)=\"onDragLeave($event)\" \n       (drop)=\"onDrop($event)\"\n       (click)=\"!imageSrc ? triggerFileInput() : null\">\n    \n    <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n    <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n    @if (!imageSrc) {\n      <div class=\"upload-state\">\n        <i class=\"icon-big icon-upload\"></i>\n        <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n        <p class=\"upload-hint\">{{ recommendedSize }}</p>\n      </div>\n    }\n\n    <!-- Estado: Cargado (Preview) -->\n    @if (imageSrc) {\n      <div class=\"preview-state\">\n        <img [src]=\"imageSrc\" alt=\"Preview\">\n        \n        <!-- Hover overlay de acciones -->\n        <div class=\"actions-overlay\">\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n            <i class=\"icon-small icon-expand\"></i> <span class=\"action-text\">Ampliar</span>\n          </button>\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n            <i class=\"icon-small icon-change\"></i> <span class=\"action-text\">Cambiar</span>\n          </button>\n          <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n            <i class=\"icon-small icon-delete\"></i> <span class=\"action-text\">Eliminar</span>\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions / Info -->\n  <div class=\"footer-area\">\n    @if (!imageSrc) {\n      <div class=\"footer-text\">\n      </div>\n      <button class=\"btn-subir\" (click)=\"triggerFileInput()\">\n        <i class=\"icon-small icon-upload\"></i> Subir\n      </button>\n    } @else {\n      <div class=\"footer-text-loaded\">\n        <span>Recomendado: 300x100 px</span>\n        <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n@if (isExpanded) {\n  <div class=\"lightbox-overlay\" (click)=\"closeLightbox()\">\n    <!-- Top Bar -->\n    <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <div class=\"zoom-controls\">\n        <button class=\"btn-icon\" (click)=\"zoomIn()\">\n          <i class=\"icon-small icon-plus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomOut()\">\n          <i class=\"icon-small icon-minus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomReset()\">\n          <i class=\"icon-small icon-expand\"></i>\n        </button>\n      </div>\n      <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n    </div>\n\n    <!-- Centro: Imagen Expandida -->\n    <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n      <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n    </div>\n    \n    <!-- Parte Inferior -->\n    <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <span class=\"lightbox-title\">{{ title }}</span>\n      <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n    </div>\n  </div>\n}\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-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-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}@media (max-width: 360px){.actions-overlay .action-text{display:none}.actions-overlay .action-btn{padding:8px;gap:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadImage, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-load-image', imports: [CommonModule], template: "<div class=\"load-image-container\">\n  <!-- Header Info -->\n  <div class=\"header-info\">\n    <div class=\"title-section\">\n      <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n      <div class=\"text-group\">\n        <h3 class=\"title\">\n          {{ title }}\n          @if (imageSrc) {\n            <span class=\"badge-cargado\">CARGADO</span>\n          }\n        </h3>\n        <p class=\"description\">{{ description }}</p>\n      </div>\n    </div>\n  </div>\n\n  <hr class=\"divider\" />\n\n  <!-- Upload / Preview Box -->\n  <div class=\"box-area\" \n       [class.empty]=\"!imageSrc\" \n       [class.dragging]=\"isDragging\"\n       (dragover)=\"onDragOver($event)\" \n       (dragleave)=\"onDragLeave($event)\" \n       (drop)=\"onDrop($event)\"\n       (click)=\"!imageSrc ? triggerFileInput() : null\">\n    \n    <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n    <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n    @if (!imageSrc) {\n      <div class=\"upload-state\">\n        <i class=\"icon-big icon-upload\"></i>\n        <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n        <p class=\"upload-hint\">{{ recommendedSize }}</p>\n      </div>\n    }\n\n    <!-- Estado: Cargado (Preview) -->\n    @if (imageSrc) {\n      <div class=\"preview-state\">\n        <img [src]=\"imageSrc\" alt=\"Preview\">\n        \n        <!-- Hover overlay de acciones -->\n        <div class=\"actions-overlay\">\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n            <i class=\"icon-small icon-expand\"></i> Ampliar\n          </button>\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n            <i class=\"icon-small icon-change\"></i> Cambiar\n          </button>\n          <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n            <i class=\"icon-small icon-delete\"></i> Eliminar\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions / Info -->\n  <div class=\"footer-area\">\n    @if (!imageSrc) {\n      <div class=\"footer-text\">\n      </div>\n      <button class=\"btn-subir\" (click)=\"triggerFileInput()\">\n        <i class=\"icon-small icon-upload\"></i> Subir\n      </button>\n    } @else {\n      <div class=\"footer-text-loaded\">\n        <span>Recomendado: 300x100 px</span>\n        <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n@if (isExpanded) {\n  <div class=\"lightbox-overlay\" (click)=\"closeLightbox()\">\n    <!-- Top Bar -->\n    <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <div class=\"zoom-controls\">\n        <button class=\"btn-icon\" (click)=\"zoomIn()\">\n          <i class=\"icon-small icon-plus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomOut()\">\n          <i class=\"icon-small icon-minus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomReset()\">\n          <i class=\"icon-small icon-expand\"></i>\n        </button>\n      </div>\n      <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n    </div>\n\n    <!-- Centro: Imagen Expandida -->\n    <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n      <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n    </div>\n    \n    <!-- Parte Inferior -->\n    <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <span class=\"lightbox-title\">{{ title }}</span>\n      <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n    </div>\n  </div>\n}\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-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-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}\n"] }]
+            args: [{ selector: 'lib-load-image', imports: [CommonModule], template: "<div class=\"load-image-container\">\n  <!-- Header Info -->\n  <div class=\"header-info\">\n    <div class=\"title-section\">\n      <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n      <div class=\"text-group\">\n        <h3 class=\"title\">\n          {{ title }}\n          @if (imageSrc) {\n            <span class=\"badge-cargado\">CARGADO</span>\n          }\n        </h3>\n        <p class=\"description\">{{ description }}</p>\n      </div>\n    </div>\n  </div>\n\n  <hr class=\"divider\" />\n\n  <!-- Upload / Preview Box -->\n  <div class=\"box-area\" \n       [class.empty]=\"!imageSrc\" \n       [class.dragging]=\"isDragging\"\n       (dragover)=\"onDragOver($event)\" \n       (dragleave)=\"onDragLeave($event)\" \n       (drop)=\"onDrop($event)\"\n       (click)=\"!imageSrc ? triggerFileInput() : null\">\n    \n    <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n    <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n    @if (!imageSrc) {\n      <div class=\"upload-state\">\n        <i class=\"icon-big icon-upload\"></i>\n        <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n        <p class=\"upload-hint\">{{ recommendedSize }}</p>\n      </div>\n    }\n\n    <!-- Estado: Cargado (Preview) -->\n    @if (imageSrc) {\n      <div class=\"preview-state\">\n        <img [src]=\"imageSrc\" alt=\"Preview\">\n        \n        <!-- Hover overlay de acciones -->\n        <div class=\"actions-overlay\">\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n            <i class=\"icon-small icon-expand\"></i> <span class=\"action-text\">Ampliar</span>\n          </button>\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n            <i class=\"icon-small icon-change\"></i> <span class=\"action-text\">Cambiar</span>\n          </button>\n          <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n            <i class=\"icon-small icon-delete\"></i> <span class=\"action-text\">Eliminar</span>\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions / Info -->\n  <div class=\"footer-area\">\n    @if (!imageSrc) {\n      <div class=\"footer-text\">\n      </div>\n      <button class=\"btn-subir\" (click)=\"triggerFileInput()\">\n        <i class=\"icon-small icon-upload\"></i> Subir\n      </button>\n    } @else {\n      <div class=\"footer-text-loaded\">\n        <span>Recomendado: 300x100 px</span>\n        <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n@if (isExpanded) {\n  <div class=\"lightbox-overlay\" (click)=\"closeLightbox()\">\n    <!-- Top Bar -->\n    <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <div class=\"zoom-controls\">\n        <button class=\"btn-icon\" (click)=\"zoomIn()\">\n          <i class=\"icon-small icon-plus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomOut()\">\n          <i class=\"icon-small icon-minus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomReset()\">\n          <i class=\"icon-small icon-expand\"></i>\n        </button>\n      </div>\n      <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n    </div>\n\n    <!-- Centro: Imagen Expandida -->\n    <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n      <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n    </div>\n    \n    <!-- Parte Inferior -->\n    <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <span class=\"lightbox-title\">{{ title }}</span>\n      <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n    </div>\n  </div>\n}\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-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-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}@media (max-width: 360px){.actions-overlay .action-text{display:none}.actions-overlay .action-btn{padding:8px;gap:0}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input$1
             }], description: [{
@@ -5632,5 +5670,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
+export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map