sapenlinea-components 0.0.47 → 0.1.49

package/fesm2022/sapenlinea-components.mjs

@@ -104,6 +104,7 @@ const ICON_COLOR_MAP = {
     'icon-refresh': '#596300',
     'icon-activate': '#006D2F',
     'icon-view': '#063546',
+    'icon-add': '#063546',
     'icon-file': '#40484C',
     'icon-sanction': '#CF6507',
 };
@@ -187,8 +188,7 @@ class Table {
             case 'percentage':
                 return `${value}%`;
             case 'date':
-                const d = new Date(value);
-                return d.toLocaleDateString('es-CO'); // dd/mm/yyyy
+                return this.formatDateValue(value);
             case 'email':
                 return String(value).toLowerCase();
             default:
@@ -213,6 +213,48 @@ class Table {
             .trim()
             .replace(/\s+/g, '_');
     }
+    formatDateValue(value) {
+        if (!value)
+            return '';
+        const str = String(value).trim();
+        // Si ya está exactamente en formato dd/mm/yyyy → no tocar
+        const alreadyFormatted = /^\d{2}\/\d{2}\/\d{4}$/;
+        if (alreadyFormatted.test(str)) {
+            return str;
+        }
+        let day;
+        let month;
+        let year;
+        // Formato tipo yyyy-mm-dd o yyyy-m-d
+        const isoMatch = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(str);
+        if (isoMatch) {
+            year = isoMatch[1];
+            month = isoMatch[2];
+            day = isoMatch[3];
+        }
+        // Formato tipo d/m/yyyy o dd/mm/yyyy sin ceros
+        else {
+            const slashMatch = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(str);
+            if (slashMatch) {
+                day = slashMatch[1];
+                month = slashMatch[2];
+                year = slashMatch[3];
+            }
+            else {
+                // 4️⃣ Fallback: intentar con Date
+                const d = new Date(str);
+                if (isNaN(d.getTime()))
+                    return str;
+                day = d.getDate();
+                month = d.getMonth() + 1;
+                year = d.getFullYear();
+            }
+        }
+        const dd = String(day).padStart(2, '0');
+        const mm = String(month).padStart(2, '0');
+        const yyyy = String(year);
+        return `${dd}/${mm}/${yyyy}`;
+    }
     /**
      * Devuelve las acciones para una fila.
      * Puede ser que `actions` sea un arreglo (se muestra tal cual) o una función
@@ -339,11 +381,11 @@ class Table {
         }, 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", isSignal: true, isRequired: false, transformFunction: null }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n\r\n        @if (showSelection()) {\r\n        <th class=\"checkbox-header\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </th>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th class=\"actions-header\">Acciones</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track row['id']) {\r\n      <tr class=\"parent-row\" [class.expandable]=\"isRowExpandable()(row)\" [class.expanded]=\"isExpanded(row)\"\r\n        (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n        @if (showSelection()) {\r\n        <td class=\"checkbox-cell\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </td>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ row[col.key]?.toString() }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span class=\"icon\" [class]=\"col.icon\"></span>\r\n          </button>\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]) }}\r\n\r\n          }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content-table\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\r\n                    (click)=\"onOptionClick(option, row)\">\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n      @if (isRowExpandable()(row) && isExpanded(row)) {\r\n      <tr class=\"child-row child-header-row\">\r\n        <td class=\"child-cell-full\"\r\n          [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n              <span class=\"child-label\">{{ subCol.label }}</span>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n\r\n      @for (child of getChildRows(row); track child['id']) {\r\n      <tr class=\"child-row\">\r\n        <td class=\"child-cell-full\" [attr.colspan]=\"\r\n        columns().length +\r\n        (showActions() ? 1 : 0) +\r\n        (showSelection() ? 1 : 0)\r\n      \">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n\r\n              @if (subCol.type === 'status') {\r\n              @let style = getStatusStyle(child[subCol.key]);\r\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n                [style.color]=\"style.color\">\r\n                {{ child[subCol.key] }}\r\n              </span>\r\n              } @else {\r\n              <span class=\"child-value\">\r\n                {{ formatValue(subCol, child[subCol.key]) }}\r\n              </span>\r\n              }\r\n\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n      }\r\n      }\r\n      @if (showTotals()) {\r\n        <tr class=\"total-row\">\r\n        \r\n          <!-- checkbox -->\r\n          @if (showSelection()) {\r\n          <td class=\"checkbox-cell\"></td>\r\n          }\r\n        \r\n          @for (col of columns(); track col.key) {\r\n          <td [class]=\"getAlignment(col)\">\r\n        \r\n            @if (col.type === 'money' && col.totalizable) {\r\n              {{ formatValue(col, getMoneyTotal(col)) }}\r\n            } @else if (col === columns()[0]) {\r\n              <strong>Total</strong>\r\n            }\r\n        \r\n          </td>\r\n          }\r\n        \r\n          @if (showActions()) {\r\n          <td></td>\r\n          }\r\n        \r\n        </tr>\r\n        }\r\n        \r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", isSignal: true, isRequired: false, transformFunction: null }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n\r\n        @if (showSelection()) {\r\n        <th class=\"checkbox-header\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </th>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th class=\"actions-header\">Acciones</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track row['id']) {\r\n      <tr class=\"parent-row\" [class.expandable]=\"isRowExpandable()(row)\" [class.expanded]=\"isExpanded(row)\"\r\n        (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n        @if (showSelection()) {\r\n        <td class=\"checkbox-cell\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </td>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ row[col.key]?.toString() }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span class=\"icon\" [class]=\"col.icon\"></span>\r\n          </button>\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]) }}\r\n\r\n          }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content-table\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\r\n                    (click)=\"onOptionClick(option, row)\">\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n      @if (isRowExpandable()(row) && isExpanded(row)) {\r\n      <tr class=\"child-row child-header-row\">\r\n        <td class=\"child-cell-full\"\r\n          [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n              <span class=\"child-label\">{{ subCol.label }}</span>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n\r\n      @for (child of getChildRows(row); track child['id']) {\r\n      <tr class=\"child-row\">\r\n        <td class=\"child-cell-full\" [attr.colspan]=\"\r\n        columns().length +\r\n        (showActions() ? 1 : 0) +\r\n        (showSelection() ? 1 : 0)\r\n      \">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n\r\n              @if (subCol.type === 'status') {\r\n              @let style = getStatusStyle(child[subCol.key]);\r\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n                [style.color]=\"style.color\">\r\n                {{ child[subCol.key] }}\r\n              </span>\r\n              } @else {\r\n              <span class=\"child-value\">\r\n                {{ formatValue(subCol, child[subCol.key]) }}\r\n              </span>\r\n              }\r\n\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n      }\r\n      }\r\n      @if (showTotals()) {\r\n        <tr class=\"total-row\">\r\n        \r\n          <!-- checkbox -->\r\n          @if (showSelection()) {\r\n          <td class=\"checkbox-cell\"></td>\r\n          }\r\n        \r\n          @for (col of columns(); track col.key) {\r\n          <td [class]=\"getAlignment(col)\">\r\n        \r\n            @if (col.type === 'money' && col.totalizable) {\r\n              {{ formatValue(col, getMoneyTotal(col)) }}\r\n            } @else if (col === columns()[0]) {\r\n              <strong>Total</strong>\r\n            }\r\n        \r\n          </td>\r\n          }\r\n        \r\n          @if (showActions()) {\r\n          <td></td>\r\n          }\r\n        \r\n        </tr>\r\n        }\r\n        \r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.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}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table', imports: [], standalone: true, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n\r\n        @if (showSelection()) {\r\n        <th class=\"checkbox-header\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </th>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th class=\"actions-header\">Acciones</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track row['id']) {\r\n      <tr class=\"parent-row\" [class.expandable]=\"isRowExpandable()(row)\" [class.expanded]=\"isExpanded(row)\"\r\n        (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n        @if (showSelection()) {\r\n        <td class=\"checkbox-cell\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </td>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ row[col.key]?.toString() }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span class=\"icon\" [class]=\"col.icon\"></span>\r\n          </button>\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]) }}\r\n\r\n          }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content-table\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\r\n                    (click)=\"onOptionClick(option, row)\">\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n      @if (isRowExpandable()(row) && isExpanded(row)) {\r\n      <tr class=\"child-row child-header-row\">\r\n        <td class=\"child-cell-full\"\r\n          [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n              <span class=\"child-label\">{{ subCol.label }}</span>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n\r\n      @for (child of getChildRows(row); track child['id']) {\r\n      <tr class=\"child-row\">\r\n        <td class=\"child-cell-full\" [attr.colspan]=\"\r\n        columns().length +\r\n        (showActions() ? 1 : 0) +\r\n        (showSelection() ? 1 : 0)\r\n      \">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n\r\n              @if (subCol.type === 'status') {\r\n              @let style = getStatusStyle(child[subCol.key]);\r\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n                [style.color]=\"style.color\">\r\n                {{ child[subCol.key] }}\r\n              </span>\r\n              } @else {\r\n              <span class=\"child-value\">\r\n                {{ formatValue(subCol, child[subCol.key]) }}\r\n              </span>\r\n              }\r\n\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n      }\r\n      }\r\n      @if (showTotals()) {\r\n        <tr class=\"total-row\">\r\n        \r\n          <!-- checkbox -->\r\n          @if (showSelection()) {\r\n          <td class=\"checkbox-cell\"></td>\r\n          }\r\n        \r\n          @for (col of columns(); track col.key) {\r\n          <td [class]=\"getAlignment(col)\">\r\n        \r\n            @if (col.type === 'money' && col.totalizable) {\r\n              {{ formatValue(col, getMoneyTotal(col)) }}\r\n            } @else if (col === columns()[0]) {\r\n              <strong>Total</strong>\r\n            }\r\n        \r\n          </td>\r\n          }\r\n        \r\n          @if (showActions()) {\r\n          <td></td>\r\n          }\r\n        \r\n        </tr>\r\n        }\r\n        \r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\n"] }]
+            args: [{ selector: 'lib-table', imports: [], standalone: true, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n\r\n        @if (showSelection()) {\r\n        <th class=\"checkbox-header\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </th>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th class=\"actions-header\">Acciones</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track row['id']) {\r\n      <tr class=\"parent-row\" [class.expandable]=\"isRowExpandable()(row)\" [class.expanded]=\"isExpanded(row)\"\r\n        (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n        @if (showSelection()) {\r\n        <td class=\"checkbox-cell\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </td>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ row[col.key]?.toString() }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span class=\"icon\" [class]=\"col.icon\"></span>\r\n          </button>\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]) }}\r\n\r\n          }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content-table\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\r\n                    (click)=\"onOptionClick(option, row)\">\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n      @if (isRowExpandable()(row) && isExpanded(row)) {\r\n      <tr class=\"child-row child-header-row\">\r\n        <td class=\"child-cell-full\"\r\n          [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n              <span class=\"child-label\">{{ subCol.label }}</span>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n\r\n      @for (child of getChildRows(row); track child['id']) {\r\n      <tr class=\"child-row\">\r\n        <td class=\"child-cell-full\" [attr.colspan]=\"\r\n        columns().length +\r\n        (showActions() ? 1 : 0) +\r\n        (showSelection() ? 1 : 0)\r\n      \">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n\r\n              @if (subCol.type === 'status') {\r\n              @let style = getStatusStyle(child[subCol.key]);\r\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n                [style.color]=\"style.color\">\r\n                {{ child[subCol.key] }}\r\n              </span>\r\n              } @else {\r\n              <span class=\"child-value\">\r\n                {{ formatValue(subCol, child[subCol.key]) }}\r\n              </span>\r\n              }\r\n\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n      }\r\n      }\r\n      @if (showTotals()) {\r\n        <tr class=\"total-row\">\r\n        \r\n          <!-- checkbox -->\r\n          @if (showSelection()) {\r\n          <td class=\"checkbox-cell\"></td>\r\n          }\r\n        \r\n          @for (col of columns(); track col.key) {\r\n          <td [class]=\"getAlignment(col)\">\r\n        \r\n            @if (col.type === 'money' && col.totalizable) {\r\n              {{ formatValue(col, getMoneyTotal(col)) }}\r\n            } @else if (col === columns()[0]) {\r\n              <strong>Total</strong>\r\n            }\r\n        \r\n          </td>\r\n          }\r\n        \r\n          @if (showActions()) {\r\n          <td></td>\r\n          }\r\n        \r\n        </tr>\r\n        }\r\n        \r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.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}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], iconAction: [{ type: i0.Output, args: ["iconAction"] }], statusToneMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToneMap", required: false }] }], statusEnumMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusEnumMap", required: false }] }], subColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "subColumns", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], expandedChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedChildren", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], showSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelection", required: false }] }], showTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotals", required: false }] }], chips: [{
                 type: ViewChildren,
                 args: ['statusChip']
@@ -2130,11 +2172,11 @@ class DynamicFormFields {
         submitBtn?.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"radio\">\r\n              <input\r\n                type=\"radio\"\r\n                [value]=\"o.value\"\r\n                [formControlName]=\"f.key\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"radio-mark\"></span>\r\n              <span class=\"radio-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"checkbox\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\r\n                (change)=\"onCheckboxChange($event, f.key, $index)\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"checkbox-mark\"></span>\r\n              <span class=\"checkbox-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:#e3e3d1;padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#454733;border-color:#454733}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.checkbox:hover .checkbox-mark{border-color:#a9a97f}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#454733}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:#e3e3d1;cursor:not-allowed}.checkbox input:disabled~.checkbox-label,.radio input:disabled~.radio-label{color:#1c1c1266;cursor:not-allowed}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"radio\">\r\n              <input\r\n                type=\"radio\"\r\n                [value]=\"o.value\"\r\n                [formControlName]=\"f.key\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"radio-mark\"></span>\r\n              <span class=\"radio-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\" [class.checkbox-group--cards]=\"f.variant === 'cards'\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"checkbox\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\r\n                (change)=\"onCheckboxChange($event, f.key, $index)\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"checkbox-mark\"></span>\r\n              <span class=\"checkbox-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:#e3e3d1;padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.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: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:#e3e3d1;cursor:not-allowed}.checkbox input:disabled~.checkbox-label,.radio input:disabled~.radio-label{color:#1c1c1266;cursor:not-allowed}.checkbox-group--cards .checkbox{display:flex;align-items:center;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 #E3E3D1 inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"radio\">\r\n              <input\r\n                type=\"radio\"\r\n                [value]=\"o.value\"\r\n                [formControlName]=\"f.key\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"radio-mark\"></span>\r\n              <span class=\"radio-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"checkbox\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\r\n                (change)=\"onCheckboxChange($event, f.key, $index)\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"checkbox-mark\"></span>\r\n              <span class=\"checkbox-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:#e3e3d1;padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#454733;border-color:#454733}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.checkbox:hover .checkbox-mark{border-color:#a9a97f}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#454733}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:#e3e3d1;cursor:not-allowed}.checkbox input:disabled~.checkbox-label,.radio input:disabled~.radio-label{color:#1c1c1266;cursor:not-allowed}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
+            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"radio\">\r\n              <input\r\n                type=\"radio\"\r\n                [value]=\"o.value\"\r\n                [formControlName]=\"f.key\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"radio-mark\"></span>\r\n              <span class=\"radio-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\" [class.checkbox-group--cards]=\"f.variant === 'cards'\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n            <label class=\"checkbox\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\r\n                (change)=\"onCheckboxChange($event, f.key, $index)\"\r\n                [readonly]=\"f.readonly || false\"\r\n              />\r\n              <span class=\"checkbox-mark\"></span>\r\n              <span class=\"checkbox-label\">{{ o.label }}</span>\r\n            </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:#e3e3d1;padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.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: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:#e3e3d1;cursor:not-allowed}.checkbox input:disabled~.checkbox-label,.radio input:disabled~.radio-label{color:#1c1c1266;cursor:not-allowed}.checkbox-group--cards .checkbox{display:flex;align-items:center;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 #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 {
@@ -2239,6 +2281,7 @@ class ModalForm {
     evidenceHelperText = input('Formato admitido', ...(ngDevMode ? [{ debugName: "evidenceHelperText" }] : []));
     evidenceAccept = input('application/pdf', ...(ngDevMode ? [{ debugName: "evidenceAccept" }] : []));
     maxSizeMB = input(25, ...(ngDevMode ? [{ debugName: "maxSizeMB" }] : []));
+    hiddenFooterActions = input(false, ...(ngDevMode ? [{ debugName: "hiddenFooterActions" }] : []));
     constructor() {
         effect(() => {
             if (!this.steps().length) {
@@ -2286,12 +2329,12 @@ class ModalForm {
         this.evidenceChange.emit(file);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModalForm, isStandalone: true, selector: "lib-modal-form", inputs: { isFull: { classPropertyName: "isFull", publicName: "isFull", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, showActionsLeft: { classPropertyName: "showActionsLeft", publicName: "showActionsLeft", isSignal: true, isRequired: false, transformFunction: null }, evidenceLabel: { classPropertyName: "evidenceLabel", publicName: "evidenceLabel", isSignal: true, isRequired: false, transformFunction: null }, evidenceHelperText: { classPropertyName: "evidenceHelperText", publicName: "evidenceHelperText", isSignal: true, isRequired: false, transformFunction: null }, evidenceAccept: { classPropertyName: "evidenceAccept", publicName: "evidenceAccept", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMB: { classPropertyName: "maxSizeMB", publicName: "maxSizeMB", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", evidenceChange: "evidenceChange" }, ngImport: i0, template: "<div class=\"modal-form-container\" [class.expanded]=\"isFull()\">\r\n  <div class=\"header-content\">\r\n    <h1>{{ title() }}</h1>\r\n    <p>{{ subtitle() }}</p>\r\n  </div>\r\n\r\n  @if (steps() && steps().length > 1) {\r\n  <div class=\"steps\">\r\n    @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"step\"\r\n      [class.step-active]=\"currentStep() === $index + 1\"\r\n      [class.step-completed]=\"currentStep() > $index + 1\"\r\n    >\r\n      @if (currentStep() > $index + 1) {\r\n      <span class=\"check-icon\">\u2714</span>\r\n      }\r\n      <span>Paso {{ $index + 1 }}: {{ step.label }}</span>\r\n    </div>\r\n\r\n    @if ($index < steps().length - 1) {\r\n    <span class=\"separator\">\u203A</span>\r\n    } }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"divider\"></div>\r\n\r\n  <div class=\"body-content\">\r\n    @if (!steps() || !steps().length) {\r\n    <ng-content></ng-content>\r\n    } @else {\r\n    <!-- Render din\u00E1mico del paso actual -->\r\n    <lib-wizard-form\r\n      [form]=\"form()\"\r\n      [currentStep]=\"currentStep()\"\r\n      [steps]=\"steps()\"\r\n      (canContinue)=\"canContinue.set($event)\"\r\n    ></lib-wizard-form>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    @if (showActionsLeft()){\r\n    <div class=\"actions-left\">\r\n      <p class=\"file-type\">{{ evidenceHelperText() }}</p>\r\n      <button type=\"button\" class=\"btn-outline\" (click)=\"fileInput.click()\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"upload-icon icon icon-tabler icons-tabler-outline icon-tabler-cloud-upload\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1\"\r\n          />\r\n          <path d=\"M9 15l3 -3l3 3\" />\r\n          <path d=\"M12 12l0 9\" />\r\n        </svg>\r\n        <span class=\"label-button\">\r\n          {{ evidenceFileName() || evidenceLabel() }}\r\n        </span>\r\n      </button>\r\n      <input\r\n        #fileInput\r\n        type=\"file\"\r\n        hidden\r\n        [accept]=\"evidenceAccept()\"\r\n        (change)=\"onFileSelected($event)\"\r\n      />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"actions-right\">\r\n      @if (!steps() || steps().length <= 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else if (currentStep() === 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"prevStep()\">\r\n        Volver\r\n      </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn\"\r\n        (click)=\"!steps() || !steps().length ? submitForm() :\r\n           currentStep() === steps().length ? submitForm() : nextStep()\"\r\n        [disabled]=\"!canContinue()\"\r\n      >\r\n        {{ !steps() || !steps().length ? submitLabel() : currentStep() ===\r\n        steps().length ? submitLabel() : 'Continuar' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{position:fixed;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;z-index:9999;padding:12px;box-sizing:border-box;overflow-y:auto}.modal-form-container{background-color:#ebe8d6;width:100%;max-width:1200px;max-height:90dvh;display:flex;flex-direction:column;align-items:stretch;padding:24px 48px;border-radius:24px;box-shadow:0 10px 25px #00000026}.header-content{display:flex;flex-direction:column;gap:8px;padding:16px 0}.header-content h1{font-size:2.4rem;font-weight:700;text-transform:capitalize;color:#1c1c12}.header-content p{font-size:1.4rem;font-weight:300;color:#454733;text-transform:capitalize}.divider{width:calc(100% + 100px);margin-left:-52px;height:1px;background-color:#7878612c;margin-top:16px}.body-content{flex:1}.body-content::-webkit-scrollbar{width:6px;background:transparent}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.steps{display:flex;flex-direction:row;gap:16px;justify-content:flex-start;align-items:center}.step{padding:12px;font-size:1.4rem;font-weight:600;text-align:center;border-radius:8px;height:32px;display:flex;align-items:center;justify-content:center;color:#40484c;border:1px solid #c7c7ad;box-shadow:none;transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;position:relative}.separator{font-size:1.6rem;color:#61661f}.step-active{box-shadow:0 2px 4px #0003;background-color:#f5f5e0;border-color:#a3a375;border:none}.step-completed{box-shadow:none;background-color:#dee58f;border:none;color:#61661f;justify-content:center;gap:8px}.check-icon{align-content:center;justify-content:center;color:#61661f}.actions{display:flex;justify-content:space-between;align-items:end;width:100%;margin-top:8px;padding:8px 0}.modal-form-container.expanded .actions{padding:8px 48px}.actions-left{display:flex;flex-direction:column;gap:4px}.actions-right{display:flex;gap:10px;margin-left:auto}.btn-outline{display:flex;justify-content:center;gap:12px;align-items:center;background:transparent;padding:8px 16px;border-radius:30px;border:none;cursor:pointer;font-size:1.4rem;font-weight:500;color:#6a750a;border:1px solid #6A750A;max-width:260px;width:100%;overflow:hidden;text-transform:capitalize}.btn-outline:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.upload-icon{width:28px;height:28px;color:#6a750a;cursor:pointer;transition:transform .2s ease,color .2s ease}.label-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;flex:1}.file-type{margin-left:8px;font-size:11px;color:#8a8a8a}.btn,.btn--ghost{font-size:1.4rem;border:0;border-radius:40px;padding:14px 24px;background-color:#596300;color:#fff;cursor:pointer;transition:background-color .3s ease;text-transform:capitalize}.btn--ghost{background-color:#dee58f;color:#61661f}.btn:hover{background-color:#7cb342}.btn:disabled{background-color:#0000001a;color:#00000043;cursor:default}.btn--ghost:hover{background-color:#c9d171}.modal-form-container.expanded{position:relative;width:100%;max-width:100dvw;height:100%;max-height:100dvh;background-color:#ebe8d6;display:flex;flex-direction:column;align-items:stretch;padding:18px 0 14px;border-radius:24px}.modal-form-container.expanded .header-content,.modal-form-container.expanded .actions{padding:8px 24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WizardForm, selector: "lib-wizard-form", inputs: ["form", "currentStep", "steps"], outputs: ["canContinue"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModalForm, isStandalone: true, selector: "lib-modal-form", inputs: { isFull: { classPropertyName: "isFull", publicName: "isFull", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, showActionsLeft: { classPropertyName: "showActionsLeft", publicName: "showActionsLeft", isSignal: true, isRequired: false, transformFunction: null }, evidenceLabel: { classPropertyName: "evidenceLabel", publicName: "evidenceLabel", isSignal: true, isRequired: false, transformFunction: null }, evidenceHelperText: { classPropertyName: "evidenceHelperText", publicName: "evidenceHelperText", isSignal: true, isRequired: false, transformFunction: null }, evidenceAccept: { classPropertyName: "evidenceAccept", publicName: "evidenceAccept", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMB: { classPropertyName: "maxSizeMB", publicName: "maxSizeMB", isSignal: true, isRequired: false, transformFunction: null }, hiddenFooterActions: { classPropertyName: "hiddenFooterActions", publicName: "hiddenFooterActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", evidenceChange: "evidenceChange" }, ngImport: i0, template: "<div class=\"modal-form-container\" [class.expanded]=\"isFull()\">\r\n  <div class=\"header-content\">\r\n    <div class=\"header-top\">\r\n      <div class=\"header-text\">\r\n        <h1>{{ title() }}</h1>\r\n        @if(subtitle()){\r\n          <p>{{ subtitle() }}</p>\r\n        }\r\n      </div>\r\n  \r\n        <button class=\"close-btn\" type=\"button\" (click)=\"onCancel.emit()\">\r\n          \u2715\r\n        </button>\r\n    </div>\r\n  </div>\r\n\r\n  @if (steps() && steps().length > 1) {\r\n  <div class=\"steps\">\r\n    @for (step of steps(); track $index) {\r\n    <div class=\"step\" [class.step-active]=\"currentStep() === $index + 1\"\r\n      [class.step-completed]=\"currentStep() > $index + 1\">\r\n      @if (currentStep() > $index + 1) {\r\n      <span class=\"check-icon\">\u2714</span>\r\n      }\r\n      <span>Paso {{ $index + 1 }}: {{ step.label }}</span>\r\n    </div>\r\n\r\n    @if ($index < steps().length - 1) { <span class=\"separator\">\u203A</span>\r\n      } }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"divider\"></div>\r\n\r\n  <div class=\"body-content\">\r\n    @if (!steps() || !steps().length) {\r\n    <ng-content></ng-content>\r\n    } @else {\r\n    <!-- Render din\u00E1mico del paso actual -->\r\n    <lib-wizard-form [form]=\"form()\" [currentStep]=\"currentStep()\" [steps]=\"steps()\"\r\n      (canContinue)=\"canContinue.set($event)\"></lib-wizard-form>\r\n    }\r\n  </div>\r\n\r\n  @if (!hiddenFooterActions()) {\r\n  <div class=\"actions\">\r\n    @if (showActionsLeft()){\r\n    <div class=\"actions-left\">\r\n      <p class=\"file-type\">{{ evidenceHelperText() }}</p>\r\n      <button type=\"button\" class=\"btn-outline\" (click)=\"fileInput.click()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"upload-icon icon icon-tabler icons-tabler-outline icon-tabler-cloud-upload\" width=\"24\" height=\"24\"\r\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1\" />\r\n          <path d=\"M9 15l3 -3l3 3\" />\r\n          <path d=\"M12 12l0 9\" />\r\n        </svg>\r\n        <span class=\"label-button\">\r\n          {{ evidenceFileName() || evidenceLabel() }}\r\n        </span>\r\n      </button>\r\n      <input #fileInput type=\"file\" hidden [accept]=\"evidenceAccept()\" (change)=\"onFileSelected($event)\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"actions-right\">\r\n      @if (!steps() || steps().length <= 1) { <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n        </button>\r\n        } @else if (currentStep() === 1) {\r\n        <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n          Cancelar\r\n        </button>\r\n        } @else {\r\n        <button type=\"button\" class=\"btn--ghost\" (click)=\"prevStep()\">\r\n          Volver\r\n        </button>\r\n        }\r\n\r\n        <button type=\"button\" class=\"btn\" (click)=\"!steps() || !steps().length ? submitForm() :\r\n           currentStep() === steps().length ? submitForm() : nextStep()\" [disabled]=\"!canContinue()\">\r\n          {{ !steps() || !steps().length ? submitLabel() : currentStep() ===\r\n          steps().length ? submitLabel() : 'Continuar' }}\r\n        </button>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [":host{position:fixed;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;z-index:9999;padding:12px;box-sizing:border-box;overflow-y:auto}.modal-form-container{background-color:#ebe8d6;width:100%;max-width:1200px;max-height:90dvh;display:flex;flex-direction:column;align-items:stretch;padding:24px 48px;border-radius:24px;box-shadow:0 10px 25px #00000026}.header-content{display:flex;flex-direction:column;gap:6px;padding:16px 0;position:sticky;top:0;z-index:10}.header-top{display:flex;justify-content:space-between;align-items:center}.header-text{display:flex;flex-direction:column;gap:6px}.close-btn{background:transparent;border:none;font-size:2rem;font-weight:500;cursor:pointer;color:#596300;padding:4px 10px;border-radius:50%;transition:background-color .2s ease,transform .2s ease}.close-btn:hover{background-color:#00000010;transform:scale(1.1)}.header-content h1{font-size:2.4rem;font-weight:700;text-transform:capitalize;color:#1c1c12}.header-content p{font-size:1.4rem;font-weight:300;color:#454733}.divider{width:calc(100% + 100px);margin-left:-52px;height:1px;background-color:#7878612c;margin-top:16px}.body-content{flex:1}.body-content::-webkit-scrollbar{width:6px;background:transparent}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.steps{display:flex;flex-direction:row;gap:16px;justify-content:flex-start;align-items:center}.step{padding:12px;font-size:1.4rem;font-weight:600;text-align:center;border-radius:8px;height:32px;display:flex;align-items:center;justify-content:center;color:#40484c;border:1px solid #c7c7ad;box-shadow:none;transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;position:relative}.separator{font-size:1.6rem;color:#61661f}.step-active{box-shadow:0 2px 4px #0003;background-color:#f5f5e0;border-color:#a3a375;border:none}.step-completed{box-shadow:none;background-color:#dee58f;border:none;color:#61661f;justify-content:center;gap:8px}.check-icon{align-content:center;justify-content:center;color:#61661f}.actions{display:flex;justify-content:space-between;align-items:end;width:100%;margin-top:8px;padding:8px 0;position:sticky;bottom:0;z-index:10}.modal-form-container.expanded .actions{padding:8px 48px}.actions-left{display:flex;flex-direction:column;gap:4px}.actions-right{display:flex;gap:10px;margin-left:auto}.btn-outline{display:flex;justify-content:center;gap:12px;align-items:center;background:transparent;padding:8px 16px;border-radius:30px;border:none;cursor:pointer;font-size:1.4rem;font-weight:500;color:#6a750a;border:1px solid #6A750A;max-width:260px;width:100%;overflow:hidden;text-transform:capitalize}.btn-outline:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.upload-icon{width:28px;height:28px;color:#6a750a;cursor:pointer;transition:transform .2s ease,color .2s ease}.label-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;flex:1}.file-type{margin-left:8px;font-size:11px;color:#8a8a8a}.btn,.btn--ghost{font-size:1.4rem;border:0;border-radius:40px;padding:14px 24px;background-color:#596300;color:#fff;cursor:pointer;transition:background-color .3s ease;text-transform:capitalize}.btn--ghost{background-color:#dee58f;color:#61661f}.btn:hover{background-color:#3e4503}.btn:disabled{background-color:#0000001a;color:#00000043;cursor:default}.btn--ghost:hover{background-color:#c9d171}.modal-form-container.expanded{position:relative;width:100%;max-width:100dvw;height:100%;max-height:100dvh;background-color:#ebe8d6;display:flex;flex-direction:column;align-items:stretch;padding:18px 0 14px;border-radius:24px}.modal-form-container.expanded .header-content,.modal-form-container.expanded .actions{padding:8px 24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WizardForm, selector: "lib-wizard-form", inputs: ["form", "currentStep", "steps"], outputs: ["canContinue"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalForm, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-modal-form', standalone: true, imports: [CommonModule, WizardForm], template: "<div class=\"modal-form-container\" [class.expanded]=\"isFull()\">\r\n  <div class=\"header-content\">\r\n    <h1>{{ title() }}</h1>\r\n    <p>{{ subtitle() }}</p>\r\n  </div>\r\n\r\n  @if (steps() && steps().length > 1) {\r\n  <div class=\"steps\">\r\n    @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"step\"\r\n      [class.step-active]=\"currentStep() === $index + 1\"\r\n      [class.step-completed]=\"currentStep() > $index + 1\"\r\n    >\r\n      @if (currentStep() > $index + 1) {\r\n      <span class=\"check-icon\">\u2714</span>\r\n      }\r\n      <span>Paso {{ $index + 1 }}: {{ step.label }}</span>\r\n    </div>\r\n\r\n    @if ($index < steps().length - 1) {\r\n    <span class=\"separator\">\u203A</span>\r\n    } }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"divider\"></div>\r\n\r\n  <div class=\"body-content\">\r\n    @if (!steps() || !steps().length) {\r\n    <ng-content></ng-content>\r\n    } @else {\r\n    <!-- Render din\u00E1mico del paso actual -->\r\n    <lib-wizard-form\r\n      [form]=\"form()\"\r\n      [currentStep]=\"currentStep()\"\r\n      [steps]=\"steps()\"\r\n      (canContinue)=\"canContinue.set($event)\"\r\n    ></lib-wizard-form>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    @if (showActionsLeft()){\r\n    <div class=\"actions-left\">\r\n      <p class=\"file-type\">{{ evidenceHelperText() }}</p>\r\n      <button type=\"button\" class=\"btn-outline\" (click)=\"fileInput.click()\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"upload-icon icon icon-tabler icons-tabler-outline icon-tabler-cloud-upload\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1\"\r\n          />\r\n          <path d=\"M9 15l3 -3l3 3\" />\r\n          <path d=\"M12 12l0 9\" />\r\n        </svg>\r\n        <span class=\"label-button\">\r\n          {{ evidenceFileName() || evidenceLabel() }}\r\n        </span>\r\n      </button>\r\n      <input\r\n        #fileInput\r\n        type=\"file\"\r\n        hidden\r\n        [accept]=\"evidenceAccept()\"\r\n        (change)=\"onFileSelected($event)\"\r\n      />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"actions-right\">\r\n      @if (!steps() || steps().length <= 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else if (currentStep() === 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"prevStep()\">\r\n        Volver\r\n      </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn\"\r\n        (click)=\"!steps() || !steps().length ? submitForm() :\r\n           currentStep() === steps().length ? submitForm() : nextStep()\"\r\n        [disabled]=\"!canContinue()\"\r\n      >\r\n        {{ !steps() || !steps().length ? submitLabel() : currentStep() ===\r\n        steps().length ? submitLabel() : 'Continuar' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{position:fixed;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;z-index:9999;padding:12px;box-sizing:border-box;overflow-y:auto}.modal-form-container{background-color:#ebe8d6;width:100%;max-width:1200px;max-height:90dvh;display:flex;flex-direction:column;align-items:stretch;padding:24px 48px;border-radius:24px;box-shadow:0 10px 25px #00000026}.header-content{display:flex;flex-direction:column;gap:8px;padding:16px 0}.header-content h1{font-size:2.4rem;font-weight:700;text-transform:capitalize;color:#1c1c12}.header-content p{font-size:1.4rem;font-weight:300;color:#454733;text-transform:capitalize}.divider{width:calc(100% + 100px);margin-left:-52px;height:1px;background-color:#7878612c;margin-top:16px}.body-content{flex:1}.body-content::-webkit-scrollbar{width:6px;background:transparent}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.steps{display:flex;flex-direction:row;gap:16px;justify-content:flex-start;align-items:center}.step{padding:12px;font-size:1.4rem;font-weight:600;text-align:center;border-radius:8px;height:32px;display:flex;align-items:center;justify-content:center;color:#40484c;border:1px solid #c7c7ad;box-shadow:none;transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;position:relative}.separator{font-size:1.6rem;color:#61661f}.step-active{box-shadow:0 2px 4px #0003;background-color:#f5f5e0;border-color:#a3a375;border:none}.step-completed{box-shadow:none;background-color:#dee58f;border:none;color:#61661f;justify-content:center;gap:8px}.check-icon{align-content:center;justify-content:center;color:#61661f}.actions{display:flex;justify-content:space-between;align-items:end;width:100%;margin-top:8px;padding:8px 0}.modal-form-container.expanded .actions{padding:8px 48px}.actions-left{display:flex;flex-direction:column;gap:4px}.actions-right{display:flex;gap:10px;margin-left:auto}.btn-outline{display:flex;justify-content:center;gap:12px;align-items:center;background:transparent;padding:8px 16px;border-radius:30px;border:none;cursor:pointer;font-size:1.4rem;font-weight:500;color:#6a750a;border:1px solid #6A750A;max-width:260px;width:100%;overflow:hidden;text-transform:capitalize}.btn-outline:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.upload-icon{width:28px;height:28px;color:#6a750a;cursor:pointer;transition:transform .2s ease,color .2s ease}.label-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;flex:1}.file-type{margin-left:8px;font-size:11px;color:#8a8a8a}.btn,.btn--ghost{font-size:1.4rem;border:0;border-radius:40px;padding:14px 24px;background-color:#596300;color:#fff;cursor:pointer;transition:background-color .3s ease;text-transform:capitalize}.btn--ghost{background-color:#dee58f;color:#61661f}.btn:hover{background-color:#7cb342}.btn:disabled{background-color:#0000001a;color:#00000043;cursor:default}.btn--ghost:hover{background-color:#c9d171}.modal-form-container.expanded{position:relative;width:100%;max-width:100dvw;height:100%;max-height:100dvh;background-color:#ebe8d6;display:flex;flex-direction:column;align-items:stretch;padding:18px 0 14px;border-radius:24px}.modal-form-container.expanded .header-content,.modal-form-container.expanded .actions{padding:8px 24px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFull", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }], evidenceChange: [{ type: i0.Output, args: ["evidenceChange"] }], showActionsLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionsLeft", required: false }] }], evidenceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceLabel", required: false }] }], evidenceHelperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceHelperText", required: false }] }], evidenceAccept: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceAccept", required: false }] }], maxSizeMB: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMB", required: false }] }] } });
+            args: [{ selector: 'lib-modal-form', standalone: true, imports: [CommonModule, WizardForm], template: "<div class=\"modal-form-container\" [class.expanded]=\"isFull()\">\r\n  <div class=\"header-content\">\r\n    <div class=\"header-top\">\r\n      <div class=\"header-text\">\r\n        <h1>{{ title() }}</h1>\r\n        @if(subtitle()){\r\n          <p>{{ subtitle() }}</p>\r\n        }\r\n      </div>\r\n  \r\n        <button class=\"close-btn\" type=\"button\" (click)=\"onCancel.emit()\">\r\n          \u2715\r\n        </button>\r\n    </div>\r\n  </div>\r\n\r\n  @if (steps() && steps().length > 1) {\r\n  <div class=\"steps\">\r\n    @for (step of steps(); track $index) {\r\n    <div class=\"step\" [class.step-active]=\"currentStep() === $index + 1\"\r\n      [class.step-completed]=\"currentStep() > $index + 1\">\r\n      @if (currentStep() > $index + 1) {\r\n      <span class=\"check-icon\">\u2714</span>\r\n      }\r\n      <span>Paso {{ $index + 1 }}: {{ step.label }}</span>\r\n    </div>\r\n\r\n    @if ($index < steps().length - 1) { <span class=\"separator\">\u203A</span>\r\n      } }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"divider\"></div>\r\n\r\n  <div class=\"body-content\">\r\n    @if (!steps() || !steps().length) {\r\n    <ng-content></ng-content>\r\n    } @else {\r\n    <!-- Render din\u00E1mico del paso actual -->\r\n    <lib-wizard-form [form]=\"form()\" [currentStep]=\"currentStep()\" [steps]=\"steps()\"\r\n      (canContinue)=\"canContinue.set($event)\"></lib-wizard-form>\r\n    }\r\n  </div>\r\n\r\n  @if (!hiddenFooterActions()) {\r\n  <div class=\"actions\">\r\n    @if (showActionsLeft()){\r\n    <div class=\"actions-left\">\r\n      <p class=\"file-type\">{{ evidenceHelperText() }}</p>\r\n      <button type=\"button\" class=\"btn-outline\" (click)=\"fileInput.click()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"upload-icon icon icon-tabler icons-tabler-outline icon-tabler-cloud-upload\" width=\"24\" height=\"24\"\r\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1\" />\r\n          <path d=\"M9 15l3 -3l3 3\" />\r\n          <path d=\"M12 12l0 9\" />\r\n        </svg>\r\n        <span class=\"label-button\">\r\n          {{ evidenceFileName() || evidenceLabel() }}\r\n        </span>\r\n      </button>\r\n      <input #fileInput type=\"file\" hidden [accept]=\"evidenceAccept()\" (change)=\"onFileSelected($event)\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"actions-right\">\r\n      @if (!steps() || steps().length <= 1) { <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n        </button>\r\n        } @else if (currentStep() === 1) {\r\n        <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n          Cancelar\r\n        </button>\r\n        } @else {\r\n        <button type=\"button\" class=\"btn--ghost\" (click)=\"prevStep()\">\r\n          Volver\r\n        </button>\r\n        }\r\n\r\n        <button type=\"button\" class=\"btn\" (click)=\"!steps() || !steps().length ? submitForm() :\r\n           currentStep() === steps().length ? submitForm() : nextStep()\" [disabled]=\"!canContinue()\">\r\n          {{ !steps() || !steps().length ? submitLabel() : currentStep() ===\r\n          steps().length ? submitLabel() : 'Continuar' }}\r\n        </button>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [":host{position:fixed;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;z-index:9999;padding:12px;box-sizing:border-box;overflow-y:auto}.modal-form-container{background-color:#ebe8d6;width:100%;max-width:1200px;max-height:90dvh;display:flex;flex-direction:column;align-items:stretch;padding:24px 48px;border-radius:24px;box-shadow:0 10px 25px #00000026}.header-content{display:flex;flex-direction:column;gap:6px;padding:16px 0;position:sticky;top:0;z-index:10}.header-top{display:flex;justify-content:space-between;align-items:center}.header-text{display:flex;flex-direction:column;gap:6px}.close-btn{background:transparent;border:none;font-size:2rem;font-weight:500;cursor:pointer;color:#596300;padding:4px 10px;border-radius:50%;transition:background-color .2s ease,transform .2s ease}.close-btn:hover{background-color:#00000010;transform:scale(1.1)}.header-content h1{font-size:2.4rem;font-weight:700;text-transform:capitalize;color:#1c1c12}.header-content p{font-size:1.4rem;font-weight:300;color:#454733}.divider{width:calc(100% + 100px);margin-left:-52px;height:1px;background-color:#7878612c;margin-top:16px}.body-content{flex:1}.body-content::-webkit-scrollbar{width:6px;background:transparent}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.steps{display:flex;flex-direction:row;gap:16px;justify-content:flex-start;align-items:center}.step{padding:12px;font-size:1.4rem;font-weight:600;text-align:center;border-radius:8px;height:32px;display:flex;align-items:center;justify-content:center;color:#40484c;border:1px solid #c7c7ad;box-shadow:none;transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;position:relative}.separator{font-size:1.6rem;color:#61661f}.step-active{box-shadow:0 2px 4px #0003;background-color:#f5f5e0;border-color:#a3a375;border:none}.step-completed{box-shadow:none;background-color:#dee58f;border:none;color:#61661f;justify-content:center;gap:8px}.check-icon{align-content:center;justify-content:center;color:#61661f}.actions{display:flex;justify-content:space-between;align-items:end;width:100%;margin-top:8px;padding:8px 0;position:sticky;bottom:0;z-index:10}.modal-form-container.expanded .actions{padding:8px 48px}.actions-left{display:flex;flex-direction:column;gap:4px}.actions-right{display:flex;gap:10px;margin-left:auto}.btn-outline{display:flex;justify-content:center;gap:12px;align-items:center;background:transparent;padding:8px 16px;border-radius:30px;border:none;cursor:pointer;font-size:1.4rem;font-weight:500;color:#6a750a;border:1px solid #6A750A;max-width:260px;width:100%;overflow:hidden;text-transform:capitalize}.btn-outline:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.upload-icon{width:28px;height:28px;color:#6a750a;cursor:pointer;transition:transform .2s ease,color .2s ease}.label-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;flex:1}.file-type{margin-left:8px;font-size:11px;color:#8a8a8a}.btn,.btn--ghost{font-size:1.4rem;border:0;border-radius:40px;padding:14px 24px;background-color:#596300;color:#fff;cursor:pointer;transition:background-color .3s ease;text-transform:capitalize}.btn--ghost{background-color:#dee58f;color:#61661f}.btn:hover{background-color:#3e4503}.btn:disabled{background-color:#0000001a;color:#00000043;cursor:default}.btn--ghost:hover{background-color:#c9d171}.modal-form-container.expanded{position:relative;width:100%;max-width:100dvw;height:100%;max-height:100dvh;background-color:#ebe8d6;display:flex;flex-direction:column;align-items:stretch;padding:18px 0 14px;border-radius:24px}.modal-form-container.expanded .header-content,.modal-form-container.expanded .actions{padding:8px 24px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFull", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }], evidenceChange: [{ type: i0.Output, args: ["evidenceChange"] }], showActionsLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionsLeft", required: false }] }], evidenceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceLabel", required: false }] }], evidenceHelperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceHelperText", required: false }] }], evidenceAccept: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceAccept", required: false }] }], maxSizeMB: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMB", required: false }] }], hiddenFooterActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenFooterActions", required: false }] }] } });
 
 class DialogAlertComponent {
     title = 'Mensaje';
@@ -2375,11 +2418,11 @@ class DialogAlertComponent {
         this.close.emit(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogAlertComponent, isStandalone: true, selector: "lib-dialog-alert-component", inputs: { title: "title", message: "message", type: "type", action: "action", showReason: "showReason", confirm: "confirm", confirmLabel: "confirmLabel", reasonOptions: "reasonOptions" }, outputs: { close: "close", confirmReason: "confirmReason" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" [class.modal-card-compact]=\"!isReasonNeeded\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <p>{{ message }}</p>\r\n      <lib-dynamic-form-fields [form]=\"form\" [sections]=\"sections\"></lib-dynamic-form-fields>\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\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      } @else {\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:30%;max-width:50%;max-height:80dvh;background:#ebe8d6;border-radius:14px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;box-sizing:border-box}.modal-card-compact{width:100%;max-width:25%;padding:24px 32px}.modal-header{display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-transform:uppercase;text-align:center}.modal-body{text-align:center;max-height:400px;overflow:hidden;box-sizing:border-box}.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}.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}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.warning:hover,.btn.confirm.error:hover{background-color:#ce3535}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.info:hover{background-color:#0b495f}.btn.confirm.success{background-color:#596300;color:#fff}.btn.confirm.success:hover{background-color:#61661f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: DynamicFormFields, selector: "lib-dynamic-form-fields", inputs: ["form", "sections", "compact"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogAlertComponent, isStandalone: true, selector: "lib-dialog-alert-component", inputs: { title: "title", message: "message", type: "type", action: "action", showReason: "showReason", confirm: "confirm", confirmLabel: "confirmLabel", reasonOptions: "reasonOptions" }, outputs: { close: "close", confirmReason: "confirmReason" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" [class.modal-card-compact]=\"!isReasonNeeded\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      @if(type != 'info') {\r\n      <div class=\"icono-container\" [ngClass]=\"type\">\r\n        @if (type === 'success') {\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        } @else if(type === 'error') {\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-x\">\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=\"M10 10l4 4m0 -4l-4 4\" />\r\n        </svg>\r\n        } @else if (type === 'warning') {\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-alert-triangle\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M12 9v4\" />\r\n          <path\r\n            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 0\" />\r\n          <path d=\"M12 16h.01\" />\r\n        </svg>\r\n        }\r\n      </div>\r\n      }\r\n      <h2>{{ title }}</h2>\r\n    </div>\r\n\r\n    <div class=\"modal-body\">\r\n      <p>{{ message }}</p>\r\n      <lib-dynamic-form-fields [form]=\"form\" [sections]=\"sections\"></lib-dynamic-form-fields>\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\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      } @else {\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</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;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:30%;max-width:50%;max-height:80dvh;background:#ebe8d6;border-radius:14px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;box-sizing:border-box}.modal-card-compact{width:100%;max-width:25%;padding:24px 32px}.modal-header{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.success{background-color:#596300}.icono-container.error,.icono-container.warning{background-color:#ba1a1a}.icon{width:48px;height:48px;color:#e3e3d1}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-transform:uppercase;text-align:center}.modal-body{text-align:center;max-height:400px;overflow:hidden;box-sizing:border-box}.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}.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}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.warning:hover,.btn.confirm.error:hover{background-color:#ce3535}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.info:hover{background-color:#0b495f}.btn.confirm.success{background-color:#596300;color:#fff}.btn.confirm.success:hover{background-color:#61661f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: DynamicFormFields, selector: "lib-dynamic-form-fields", inputs: ["form", "sections", "compact"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dialog-alert-component', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormFields], template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" [class.modal-card-compact]=\"!isReasonNeeded\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <p>{{ message }}</p>\r\n      <lib-dynamic-form-fields [form]=\"form\" [sections]=\"sections\"></lib-dynamic-form-fields>\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\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      } @else {\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:30%;max-width:50%;max-height:80dvh;background:#ebe8d6;border-radius:14px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;box-sizing:border-box}.modal-card-compact{width:100%;max-width:25%;padding:24px 32px}.modal-header{display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-transform:uppercase;text-align:center}.modal-body{text-align:center;max-height:400px;overflow:hidden;box-sizing:border-box}.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}.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}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.warning:hover,.btn.confirm.error:hover{background-color:#ce3535}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.info:hover{background-color:#0b495f}.btn.confirm.success{background-color:#596300;color:#fff}.btn.confirm.success:hover{background-color:#61661f}\n"] }]
+            args: [{ selector: 'lib-dialog-alert-component', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormFields], template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" [class.modal-card-compact]=\"!isReasonNeeded\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      @if(type != 'info') {\r\n      <div class=\"icono-container\" [ngClass]=\"type\">\r\n        @if (type === 'success') {\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        } @else if(type === 'error') {\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-x\">\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=\"M10 10l4 4m0 -4l-4 4\" />\r\n        </svg>\r\n        } @else if (type === 'warning') {\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-alert-triangle\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M12 9v4\" />\r\n          <path\r\n            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 0\" />\r\n          <path d=\"M12 16h.01\" />\r\n        </svg>\r\n        }\r\n      </div>\r\n      }\r\n      <h2>{{ title }}</h2>\r\n    </div>\r\n\r\n    <div class=\"modal-body\">\r\n      <p>{{ message }}</p>\r\n      <lib-dynamic-form-fields [form]=\"form\" [sections]=\"sections\"></lib-dynamic-form-fields>\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\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      } @else {\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</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;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:30%;max-width:50%;max-height:80dvh;background:#ebe8d6;border-radius:14px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;box-sizing:border-box}.modal-card-compact{width:100%;max-width:25%;padding:24px 32px}.modal-header{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.success{background-color:#596300}.icono-container.error,.icono-container.warning{background-color:#ba1a1a}.icon{width:48px;height:48px;color:#e3e3d1}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-transform:uppercase;text-align:center}.modal-body{text-align:center;max-height:400px;overflow:hidden;box-sizing:border-box}.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}.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}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.warning:hover,.btn.confirm.error:hover{background-color:#ce3535}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.info:hover{background-color:#0b495f}.btn.confirm.success{background-color:#596300;color:#fff}.btn.confirm.success:hover{background-color:#61661f}\n"] }]
         }], propDecorators: { title: [{
                 type: Input$1
             }], message: [{
@@ -3134,6 +3177,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'app-footer', standalone: true, imports: [], template: "<footer class=\"footer\">\r\n  \u00A9 2026 <span>PAICO \u00B7 Sistemas y Aplicaciones en L\u00EDnea.</span> Todos los derechos reservados.\r\n</footer>\r\n", styles: ["footer{background-color:#f0f0db;color:#787861;padding:20px 30px;border-radius:16px;display:flex;gap:6px;justify-content:center;align-items:center;position:fixed;bottom:16px;left:32px;right:32px;font-size:1.2rem}span{font-weight:700}\n"] }]
         }] });
 
+class ButtonCards {
+    groupCard = input(false, ...(ngDevMode ? [{ debugName: "groupCard" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
+    variant = input('success', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    // Estado interno
+    selectedSingle = signal(false, ...(ngDevMode ? [{ debugName: "selectedSingle" }] : []));
+    selectedGroup = signal('success', ...(ngDevMode ? [{ debugName: "selectedGroup" }] : []));
+    // Output
+    selectedChange = output();
+    // Computeds
+    isSuccess = computed(() => this.variant() === 'success', ...(ngDevMode ? [{ debugName: "isSuccess" }] : []));
+    isDanger = computed(() => this.variant() === 'danger', ...(ngDevMode ? [{ debugName: "isDanger" }] : []));
+    options = computed(() => [
+        {
+            label: 'Aprobar Evidencia',
+            subtitle: 'La evidencia cumple con los requisitos',
+            variant: 'success'
+        },
+        {
+            label: 'Rechazar Evidencia',
+            subtitle: 'La evidencia no cumple con los requisitos',
+            variant: 'danger'
+        }
+    ], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    toggleSingle() {
+        this.selectedSingle.update(v => !v);
+        this.selectedChange.emit(this.variant());
+    }
+    selectGroup(option) {
+        this.selectedGroup.set(option);
+        this.selectedChange.emit(option);
+    }
+    isSelected(option) {
+        return this.selectedGroup() === option;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonCards, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ButtonCards, isStandalone: true, selector: "lib-button-cards", inputs: { groupCard: { classPropertyName: "groupCard", publicName: "groupCard", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "@if (!groupCard()) {\r\n\r\n<!-- MODO SINGLE -->\r\n<button class=\"opcion-boton\" [class.opcion-activa]=\"selectedSingle()\"\r\n    [class.opcion-success]=\"selectedSingle() && isSuccess()\" [class.opcion-danger]=\"selectedSingle() && isDanger()\"\r\n    (click)=\"toggleSingle()\">\r\n\r\n    <div class=\"opcion-contenido\">\r\n        <div class=\"opcion-icono-container\" [class.icono-activo]=\"selectedSingle()\">\r\n\r\n            @if (isSuccess()) {\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\" [class.icon-success]=\"selectedSingle() && isSuccess()\">\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            } @else if(isDanger()) {\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-x\" [class.icon-danger]=\"selectedSingle() && isDanger()\">\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=\"M10 10l4 4m0 -4l-4 4\" />\r\n            </svg>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"opcion-textos\">\r\n            <div class=\"opcion-titulo\" [class.titulo-success]=\"selectedSingle() && isSuccess()\"\r\n                [class.titulo-danger]=\"selectedSingle() && isDanger()\">\r\n                {{ label() }}\r\n            </div>\r\n\r\n            <div class=\"opcion-subtitulo\" [class.subtitulo-success]=\"selectedSingle() && isSuccess()\"\r\n                [class.subtitulo-danger]=\"selectedSingle() && isDanger()\">\r\n                {{ subtitle() }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    @if (selectedSingle()) {\r\n    <div class=\"indicador-seleccion\">\r\n        <div class=\"indicador-punto\" [class.punto-success]=\"isSuccess()\" [class.punto-danger]=\"isDanger()\">\r\n        </div>\r\n    </div>\r\n    }\r\n</button>\r\n\r\n} @else {\r\n<!-- MODO GROUP -->\r\n<div class=\"columnCards\">\r\n    @for (option of options(); track option.variant) {\r\n    <button class=\"opcion-boton\" [class.opcion-activa]=\"isSelected(option.variant)\"\r\n        [class.opcion-success]=\"isSelected(option.variant) && option.variant === 'success'\"\r\n        [class.opcion-danger]=\"isSelected(option.variant) && option.variant === 'danger'\"\r\n        (click)=\"selectGroup(option.variant)\">\r\n        <div class=\"opcion-contenido\">\r\n            <div class=\"opcion-icono-container\">\r\n                @if (option.variant === 'success') {\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                } @else if(option.variant === 'danger') {\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-x\" [class.icon-danger]=\"isSelected(option.variant) && option.variant === 'danger'\">\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=\"M10 10l4 4m0 -4l-4 4\" />\r\n                </svg>\r\n                }\r\n            </div>\r\n\r\n            <div class=\"opcion-textos\">\r\n                <div class=\"opcion-titulo\" [class.titulo-success]=\"isSelected(option.variant) && option.variant === 'success'\"\r\n                [class.titulo-danger]=\"isSelected(option.variant) && option.variant === 'danger'\">\r\n                    {{ option.label }}\r\n                </div>\r\n\r\n                <div class=\"opcion-subtitulo\" [class.titulo-success]=\"isSelected(option.variant) && option.variant === 'success'\"\r\n                [class.titulo-danger]=\"isSelected(option.variant) && option.variant === 'danger'\">\r\n                    {{ option.subtitle }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        @if (isSelected(option.variant)) {\r\n        <div class=\"indicador-seleccion\">\r\n            <div class=\"indicador-punto\" [class.punto-success]=\"option.variant === 'success'\"\r\n                [class.punto-danger]=\"option.variant === 'danger'\">\r\n            </div>\r\n        </div>\r\n        }\r\n    </button>\r\n    }\r\n</div>\r\n}", styles: [":host{display:block;width:100%}.columnCards{display:flex;flex-direction:column;gap:8px}.opcion-boton{width:100%;padding:24px;border-radius:12px;border:2px solid #d1d5c0;background-color:#f5f5e8;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between}.opcion-boton:hover{transform:scale(1.01)}.opcion-boton:active{transform:scale(.99)}.opcion-success{background-color:#596300;border-color:#596300}.opcion-danger{background-color:#6b0518;border-color:#6b0518}.opcion-contenido{display:flex;align-items:center;gap:16px}.opcion-icono-container{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#e3e3d1;transition:background-color .2s}.icon{width:32px;height:32px;color:#596300}.icon-danger{color:#6b0518}.icono-activo{background-color:#fafae8}.opcion-textos{text-align:left}.opcion-titulo{font-size:18px;font-weight:600;color:#1c1c12;margin-bottom:4px}.opcion-subtitulo{font-size:14px;color:#454733}.titulo-success,.titulo-danger{color:#fafae8}.subtitulo-success{color:#e8e8c8}.subtitulo-danger{color:#f0d0d5}.indicador-seleccion{width:32px;height:32px;border-radius:50%;background-color:#fafae8;display:flex;align-items:center;justify-content:center}.indicador-punto{width:12px;height:12px;border-radius:50%}.punto-success{background-color:#596300}.punto-danger{background-color:#6b0518}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonCards, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button-cards', imports: [], template: "@if (!groupCard()) {\r\n\r\n<!-- MODO SINGLE -->\r\n<button class=\"opcion-boton\" [class.opcion-activa]=\"selectedSingle()\"\r\n    [class.opcion-success]=\"selectedSingle() && isSuccess()\" [class.opcion-danger]=\"selectedSingle() && isDanger()\"\r\n    (click)=\"toggleSingle()\">\r\n\r\n    <div class=\"opcion-contenido\">\r\n        <div class=\"opcion-icono-container\" [class.icono-activo]=\"selectedSingle()\">\r\n\r\n            @if (isSuccess()) {\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\" [class.icon-success]=\"selectedSingle() && isSuccess()\">\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            } @else if(isDanger()) {\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-x\" [class.icon-danger]=\"selectedSingle() && isDanger()\">\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=\"M10 10l4 4m0 -4l-4 4\" />\r\n            </svg>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"opcion-textos\">\r\n            <div class=\"opcion-titulo\" [class.titulo-success]=\"selectedSingle() && isSuccess()\"\r\n                [class.titulo-danger]=\"selectedSingle() && isDanger()\">\r\n                {{ label() }}\r\n            </div>\r\n\r\n            <div class=\"opcion-subtitulo\" [class.subtitulo-success]=\"selectedSingle() && isSuccess()\"\r\n                [class.subtitulo-danger]=\"selectedSingle() && isDanger()\">\r\n                {{ subtitle() }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    @if (selectedSingle()) {\r\n    <div class=\"indicador-seleccion\">\r\n        <div class=\"indicador-punto\" [class.punto-success]=\"isSuccess()\" [class.punto-danger]=\"isDanger()\">\r\n        </div>\r\n    </div>\r\n    }\r\n</button>\r\n\r\n} @else {\r\n<!-- MODO GROUP -->\r\n<div class=\"columnCards\">\r\n    @for (option of options(); track option.variant) {\r\n    <button class=\"opcion-boton\" [class.opcion-activa]=\"isSelected(option.variant)\"\r\n        [class.opcion-success]=\"isSelected(option.variant) && option.variant === 'success'\"\r\n        [class.opcion-danger]=\"isSelected(option.variant) && option.variant === 'danger'\"\r\n        (click)=\"selectGroup(option.variant)\">\r\n        <div class=\"opcion-contenido\">\r\n            <div class=\"opcion-icono-container\">\r\n                @if (option.variant === 'success') {\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                } @else if(option.variant === 'danger') {\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-x\" [class.icon-danger]=\"isSelected(option.variant) && option.variant === 'danger'\">\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=\"M10 10l4 4m0 -4l-4 4\" />\r\n                </svg>\r\n                }\r\n            </div>\r\n\r\n            <div class=\"opcion-textos\">\r\n                <div class=\"opcion-titulo\" [class.titulo-success]=\"isSelected(option.variant) && option.variant === 'success'\"\r\n                [class.titulo-danger]=\"isSelected(option.variant) && option.variant === 'danger'\">\r\n                    {{ option.label }}\r\n                </div>\r\n\r\n                <div class=\"opcion-subtitulo\" [class.titulo-success]=\"isSelected(option.variant) && option.variant === 'success'\"\r\n                [class.titulo-danger]=\"isSelected(option.variant) && option.variant === 'danger'\">\r\n                    {{ option.subtitle }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        @if (isSelected(option.variant)) {\r\n        <div class=\"indicador-seleccion\">\r\n            <div class=\"indicador-punto\" [class.punto-success]=\"option.variant === 'success'\"\r\n                [class.punto-danger]=\"option.variant === 'danger'\">\r\n            </div>\r\n        </div>\r\n        }\r\n    </button>\r\n    }\r\n</div>\r\n}", styles: [":host{display:block;width:100%}.columnCards{display:flex;flex-direction:column;gap:8px}.opcion-boton{width:100%;padding:24px;border-radius:12px;border:2px solid #d1d5c0;background-color:#f5f5e8;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between}.opcion-boton:hover{transform:scale(1.01)}.opcion-boton:active{transform:scale(.99)}.opcion-success{background-color:#596300;border-color:#596300}.opcion-danger{background-color:#6b0518;border-color:#6b0518}.opcion-contenido{display:flex;align-items:center;gap:16px}.opcion-icono-container{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#e3e3d1;transition:background-color .2s}.icon{width:32px;height:32px;color:#596300}.icon-danger{color:#6b0518}.icono-activo{background-color:#fafae8}.opcion-textos{text-align:left}.opcion-titulo{font-size:18px;font-weight:600;color:#1c1c12;margin-bottom:4px}.opcion-subtitulo{font-size:14px;color:#454733}.titulo-success,.titulo-danger{color:#fafae8}.subtitulo-success{color:#e8e8c8}.subtitulo-danger{color:#f0d0d5}.indicador-seleccion{width:32px;height:32px;border-radius:50%;background-color:#fafae8;display:flex;align-items:center;justify-content:center}.indicador-punto{width:12px;height:12px;border-radius:50%}.punto-success{background-color:#596300}.punto-danger{background-color:#6b0518}\n"] }]
+        }], propDecorators: { groupCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupCard", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
+
+class Tabs {
+    tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    activeTab = input(null, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    tabChange = output();
+    activeTabChange = output();
+    internalActive = signal(null, ...(ngDevMode ? [{ debugName: "internalActive" }] : []));
+    constructor() {
+        effect(() => {
+            const list = this.tabs();
+            const external = this.activeTab();
+            const internal = this.internalActive();
+            if (!list.length) {
+                if (internal !== null)
+                    this.internalActive.set(null);
+                return;
+            }
+            const isValid = (id) => !!id && list.some(t => t.id === id);
+            const next = isValid(external) ? external :
+                isValid(internal) ? internal :
+                    list[0].id;
+            if (internal !== next) {
+                this.internalActive.set(next);
+            }
+        });
+    }
+    active = computed(() => {
+        const list = this.tabs();
+        if (!list.length)
+            return null;
+        const external = this.activeTab();
+        if (external && list.some(t => t.id === external))
+            return external;
+        return this.internalActive() ?? list[0].id;
+    }, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    count = computed(() => Math.max(this.tabs().length, 1), ...(ngDevMode ? [{ debugName: "count" }] : []));
+    indicatorWidth = computed(() => `${100 / this.count()}%`, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
+    activeIndex = computed(() => {
+        const list = this.tabs();
+        const a = this.active();
+        if (!list.length || !a)
+            return 0;
+        const idx = list.findIndex(t => t.id === a);
+        return idx >= 0 ? idx : 0;
+    }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    indicatorLeft = computed(() => `${(100 / this.count()) * this.activeIndex()}%`, ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : []));
+    setTab(tabId) {
+        if (tabId === this.active())
+            return;
+        // modo no-controlado: actualiza interno
+        this.internalActive.set(tabId);
+        // emite para que el padre pueda sincronizar
+        this.activeTabChange.emit(tabId);
+        this.tabChange.emit(tabId);
+    }
+    // Accesibilidad 
+    onTabKeydown(event, currentId) {
+        const key = event.key;
+        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter', ' '].includes(key))
+            return;
+        event.preventDefault();
+        if (key === 'Enter' || key === ' ') {
+            this.setTab(currentId);
+            this.focusTab(currentId);
+            return;
+        }
+        const nextId = key === 'Home' ? this.firstEnabledId()
+            : key === 'End' ? this.lastEnabledId()
+                : key === 'ArrowRight' ? this.nextEnabledId(currentId, +1)
+                    : this.nextEnabledId(currentId, -1);
+        if (!nextId)
+            return;
+        // mover foco
+        this.focusTab(nextId);
+        // comportamiento común: solo mover foco con flechas (no activar)
+        // Si quieres activar también con flechas, descomenta:
+        // this.setTab(nextId);
+    }
+    enabledTabs() {
+        return this.tabs().filter(t => !t.disabled);
+    }
+    firstEnabledId() {
+        return this.enabledTabs()[0]?.id ?? null;
+    }
+    lastEnabledId() {
+        const list = this.enabledTabs();
+        return list.length ? list[list.length - 1].id : null;
+    }
+    nextEnabledId(currentId, delta) {
+        const list = this.tabs();
+        if (!list.length)
+            return null;
+        const idx = list.findIndex(t => t.id === currentId);
+        if (idx < 0)
+            return this.firstEnabledId();
+        // buscar siguiente habilitado con wrap-around
+        for (let step = 1; step <= list.length; step++) {
+            const i = (idx + step * delta + list.length) % list.length;
+            if (!list[i].disabled)
+                return list[i].id;
+        }
+        return null;
+    }
+    focusTab(tabId) {
+        // IDs determinísticos para focus (ver template)
+        const el = document.getElementById(this.tabDomId(tabId));
+        el?.focus();
+    }
+    tabDomId(tabId) {
+        return `lib-tab-${tabId}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Tabs, isStandalone: true, selector: "lib-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange", activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"side-tabs\" role=\"tablist\">\r\n    @if (tabs().length > 0) {\r\n    @for (t of tabs(); track t.id) {\r\n    <button type=\"button\" class=\"tab\" role=\"tab\" [id]=\"tabDomId(t.id)\" [class.active]=\"t.id === active()\"\r\n        [class.disabled]=\"!!t.disabled\" [attr.aria-selected]=\"t.id === active()\" [attr.aria-disabled]=\"!!t.disabled\"\r\n        [disabled]=\"!!t.disabled\" [attr.tabindex]=\"t.id === active() ? 0 : -1\" (click)=\"setTab(t.id)\"\r\n        (keydown)=\"onTabKeydown($event, t.id)\">\r\n        {{ t.label }}\r\n    </button>\r\n    }\r\n    <div class=\"tab-indicator\" [class.hidden]=\"active() === null\" [style.width]=\"indicatorWidth()\"\r\n        [style.left]=\"indicatorLeft()\"></div>\r\n    }\r\n</div>", styles: [".side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;background:transparent;border:0;margin:0;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase;-webkit-user-select:none;user-select:none}.tab.active{color:#596300;font-weight:600}.tab:hover:not(:disabled){color:#6a7500}.tab:disabled,.tab.disabled{cursor:not-allowed;opacity:.45}.tab:focus-visible{outline:2px solid rgba(89,99,0,.35);outline-offset:2px;border-radius:6px}.tab-indicator{position:absolute;bottom:-2px;left:0;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease,width .3s ease}.tab-indicator.hidden{display:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tabs', imports: [], template: "<div class=\"side-tabs\" role=\"tablist\">\r\n    @if (tabs().length > 0) {\r\n    @for (t of tabs(); track t.id) {\r\n    <button type=\"button\" class=\"tab\" role=\"tab\" [id]=\"tabDomId(t.id)\" [class.active]=\"t.id === active()\"\r\n        [class.disabled]=\"!!t.disabled\" [attr.aria-selected]=\"t.id === active()\" [attr.aria-disabled]=\"!!t.disabled\"\r\n        [disabled]=\"!!t.disabled\" [attr.tabindex]=\"t.id === active() ? 0 : -1\" (click)=\"setTab(t.id)\"\r\n        (keydown)=\"onTabKeydown($event, t.id)\">\r\n        {{ t.label }}\r\n    </button>\r\n    }\r\n    <div class=\"tab-indicator\" [class.hidden]=\"active() === null\" [style.width]=\"indicatorWidth()\"\r\n        [style.left]=\"indicatorLeft()\"></div>\r\n    }\r\n</div>", styles: [".side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;background:transparent;border:0;margin:0;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase;-webkit-user-select:none;user-select:none}.tab.active{color:#596300;font-weight:600}.tab:hover:not(:disabled){color:#6a7500}.tab:disabled,.tab.disabled{cursor:not-allowed;opacity:.45}.tab:focus-visible{outline:2px solid rgba(89,99,0,.35);outline-offset:2px;border-radius:6px}.tab-indicator{position:absolute;bottom:-2px;left:0;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease,width .3s ease}.tab-indicator.hidden{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }] } });
+
+class NotFoundSection {
+    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%;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;flex-shrink:0;position:relative}.no-data-container{width:20%;height:calc(100vh - 250px);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%;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;flex-shrink:0;position:relative}.no-data-container{width:20%;height:calc(100vh - 250px);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"] }] } });
+
 // src/app/components/public-api.ts
 // Exportar el componente
 
@@ -3141,5 +3358,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, Footer, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, Loader, ModalForm, NotFoundModal, NotificationModal, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TitleFilters, ToastHelper, WizardForm };
+export { ButtonCards, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, Footer, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, Loader, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, Tabs, TitleFilters, ToastHelper, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map