sapenlinea-components 0.8.72 → 0.9.74

package/fesm2022/sapenlinea-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { model, input, signal, computed, Component, output, HostListener, ViewChildren, forwardRef, effect, ViewChild, inject, ElementRef, booleanAttribute, DestroyRef, EventEmitter, Output, Input as Input$1, Injectable, viewChildren, ChangeDetectionStrategy } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, UpperCasePipe } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
 import PubSub from 'pubsub-js';
@@ -10,6 +10,7 @@ import * as echarts from 'echarts/core';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
 import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent, VisualMapComponent, LegendComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
+import { DomSanitizer } from '@angular/platform-browser';
 
 class PaginationComponent {
     // Inputs as Models/Signals
@@ -140,6 +141,14 @@ class Table {
     showSelection = input(false, ...(ngDevMode ? [{ debugName: "showSelection" }] : []));
     selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
     showTotals = input(false, ...(ngDevMode ? [{ debugName: "showTotals" }] : []));
+    columnGroups = input([], ...(ngDevMode ? [{ debugName: "columnGroups" }] : []));
+    columnGroupChange = output();
+    hasColumnGroups = computed(() => this.columnGroups().length > 0, ...(ngDevMode ? [{ debugName: "hasColumnGroups" }] : []));
+    totalGroupSubColumns = computed(() => this.columnGroups().reduce((sum, g) => sum + g.columns.length, 0), ...(ngDevMode ? [{ debugName: "totalGroupSubColumns" }] : []));
+    totalColspan = computed(() => this.columns().length
+        + this.totalGroupSubColumns()
+        + (this.showActions() ? 1 : 0)
+        + (this.showSelection() ? 1 : 0), ...(ngDevMode ? [{ debugName: "totalColspan" }] : []));
     chips;
     ngAfterViewInit() {
         this.recalculateStatusChipWidth();
@@ -477,13 +486,20 @@ class Table {
             return { bg: '#D89D9D', color: '#CF0707' };
         return { bg: '#BAC2BB', color: '#40484C' };
     }
+    onGroupItemChange(col, row, value) {
+        this.columnGroupChange.emit({ key: col.key, row, value });
+    }
+    onGroupIconClick(col, row, event) {
+        event.stopPropagation();
+        this.iconAction.emit({ action: col.iconKey ?? col.key, row });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", isSignal: true, isRequired: false, transformFunction: null }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n\r\n        @if (showSelection()) {\r\n        <th class=\"checkbox-header\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </th>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th class=\"actions-header\">Acciones</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortedData(); track row['id']) {\r\n      <tr class=\"parent-row\"\r\n        [class.expandable]=\"isRowExpandable()(row)\"\r\n        [class.expanded]=\"isExpanded(row)\"\r\n        [class.selected]=\"isRowSelected(row)\"\r\n        (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n        @if (showSelection()) {\r\n        <td class=\"checkbox-cell\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </td>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ getStatusLabel(row[col.key]) }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span class=\"icon\" [class]=\"col.icon\"></span>\r\n          </button>\r\n          } @else if (col.type === 'grade') {\r\n          @let style = getGradeStyle(row[col.key]);\r\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ formatValue(col, row[col.key]) }}\r\n          </span>\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]) }}\r\n\r\n          }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content-table\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\r\n                    (click)=\"onOptionClick(option, row)\">\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n      @if (isRowExpandable()(row) && isExpanded(row)) {\r\n      <tr class=\"child-row child-header-row\">\r\n        <td class=\"child-cell-full\"\r\n          [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n              <span class=\"child-label\">{{ subCol.label }}</span>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n\r\n      @for (child of getChildRows(row); track child['id']) {\r\n      <tr class=\"child-row\">\r\n        <td class=\"child-cell-full\" [attr.colspan]=\"\r\n        columns().length +\r\n        (showActions() ? 1 : 0) +\r\n        (showSelection() ? 1 : 0)\r\n      \">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n\r\n              @if (subCol.type === 'status') {\r\n              @let style = getStatusStyle(child[subCol.key]);\r\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n                [style.color]=\"style.color\">\r\n                {{ getStatusLabel(child[subCol.key]) }}\r\n              </span>\r\n              } @else {\r\n              <span class=\"child-value\">\r\n                {{ formatValue(subCol, child[subCol.key]) }}\r\n              </span>\r\n              }\r\n\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n      }\r\n      }\r\n      @if (showTotals()) {\r\n        <tr class=\"total-row\">\r\n        \r\n          <!-- checkbox -->\r\n          @if (showSelection()) {\r\n          <td class=\"checkbox-cell\"></td>\r\n          }\r\n        \r\n          @for (col of columns(); track col.key) {\r\n          <td [class]=\"getAlignment(col)\">\r\n        \r\n            @if (col.type === 'money' && col.totalizable) {\r\n              {{ formatValue(col, getMoneyTotal(col)) }}\r\n            } @else if (col === columns()[0]) {\r\n              <strong>Total</strong>\r\n            }\r\n        \r\n          </td>\r\n          }\r\n        \r\n          @if (showActions()) {\r\n          <td></td>\r\n          }\r\n        \r\n        </tr>\r\n        }\r\n        \r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:8px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", isSignal: true, isRequired: false, transformFunction: null }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", isSignal: true, isRequired: false, transformFunction: null }, columnGroups: { classPropertyName: "columnGroups", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction", columnGroupChange: "columnGroupChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col)\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col)\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}\n"], dependencies: [{ kind: "pipe", type: UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table', imports: [], standalone: true, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n\r\n        @if (showSelection()) {\r\n        <th class=\"checkbox-header\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </th>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th class=\"actions-header\">Acciones</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortedData(); track row['id']) {\r\n      <tr class=\"parent-row\"\r\n        [class.expandable]=\"isRowExpandable()(row)\"\r\n        [class.expanded]=\"isExpanded(row)\"\r\n        [class.selected]=\"isRowSelected(row)\"\r\n        (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n        @if (showSelection()) {\r\n        <td class=\"checkbox-cell\">\r\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n            <span class=\"checkmark\"></span>\r\n          </label>\r\n        </td>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ getStatusLabel(row[col.key]) }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span class=\"icon\" [class]=\"col.icon\"></span>\r\n          </button>\r\n          } @else if (col.type === 'grade') {\r\n          @let style = getGradeStyle(row[col.key]);\r\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n            {{ formatValue(col, row[col.key]) }}\r\n          </span>\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]) }}\r\n\r\n          }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content-table\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\r\n                    (click)=\"onOptionClick(option, row)\">\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n      @if (isRowExpandable()(row) && isExpanded(row)) {\r\n      <tr class=\"child-row child-header-row\">\r\n        <td class=\"child-cell-full\"\r\n          [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n              <span class=\"child-label\">{{ subCol.label }}</span>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n\r\n      @for (child of getChildRows(row); track child['id']) {\r\n      <tr class=\"child-row\">\r\n        <td class=\"child-cell-full\" [attr.colspan]=\"\r\n        columns().length +\r\n        (showActions() ? 1 : 0) +\r\n        (showSelection() ? 1 : 0)\r\n      \">\r\n          <div class=\"child-grid\">\r\n            @for (subCol of subColumns(); track subCol.key) {\r\n            <div class=\"child-item\">\r\n\r\n              @if (subCol.type === 'status') {\r\n              @let style = getStatusStyle(child[subCol.key]);\r\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n                [style.color]=\"style.color\">\r\n                {{ getStatusLabel(child[subCol.key]) }}\r\n              </span>\r\n              } @else {\r\n              <span class=\"child-value\">\r\n                {{ formatValue(subCol, child[subCol.key]) }}\r\n              </span>\r\n              }\r\n\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n      }\r\n      }\r\n      @if (showTotals()) {\r\n        <tr class=\"total-row\">\r\n        \r\n          <!-- checkbox -->\r\n          @if (showSelection()) {\r\n          <td class=\"checkbox-cell\"></td>\r\n          }\r\n        \r\n          @for (col of columns(); track col.key) {\r\n          <td [class]=\"getAlignment(col)\">\r\n        \r\n            @if (col.type === 'money' && col.totalizable) {\r\n              {{ formatValue(col, getMoneyTotal(col)) }}\r\n            } @else if (col === columns()[0]) {\r\n              <strong>Total</strong>\r\n            }\r\n        \r\n          </td>\r\n          }\r\n        \r\n          @if (showActions()) {\r\n          <td></td>\r\n          }\r\n        \r\n        </tr>\r\n        }\r\n        \r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:8px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], iconAction: [{ type: i0.Output, args: ["iconAction"] }], statusToneMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToneMap", required: false }] }], statusEnumMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusEnumMap", required: false }] }], subColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "subColumns", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], expandedChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedChildren", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], showSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelection", required: false }] }], showTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotals", required: false }] }], chips: [{
+            args: [{ selector: 'lib-table', imports: [UpperCasePipe], standalone: true, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col)\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col)\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\n</div>", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], iconAction: [{ type: i0.Output, args: ["iconAction"] }], statusToneMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToneMap", required: false }] }], statusEnumMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusEnumMap", required: false }] }], subColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "subColumns", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], expandedChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedChildren", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], showSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelection", required: false }] }], showTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotals", required: false }] }], columnGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnGroups", required: false }] }], columnGroupChange: [{ type: i0.Output, args: ["columnGroupChange"] }], chips: [{
                 type: ViewChildren,
                 args: ['statusChip']
             }], onClickOutside: [{
@@ -2642,11 +2658,11 @@ class DynamicFormFields {
         submitBtn?.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label\n          >} @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <label class=\"label\">{{ f.label }}</label>\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }, { kind: "component", type: ToggleCustom, selector: "lib-toggle-custom", inputs: ["label", "key", "disabled", "checked"], outputs: ["checkedChange", "toggleChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }, { kind: "component", type: ToggleCustom, selector: "lib-toggle-custom", inputs: ["label", "key", "disabled", "checked"], outputs: ["checkedChange", "toggleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker, ToggleCustom], template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label\n          >} @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <label class=\"label\">{{ f.label }}</label>\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
+            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker, ToggleCustom], template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
 
 class WizardForm {
@@ -2956,10 +2972,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class DialogConfirmation {
     title = 'TITULO';
+    message = '';
     confirm = false;
     confirmLabel = 'Aceptar';
     items = [];
     btnMap = false;
+    type = 'default';
     close = new EventEmitter();
     expandedIndex = null;
     toggle(index) {
@@ -2972,13 +2990,15 @@ class DialogConfirmation {
         this.close.emit(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogConfirmation, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogConfirmation, isStandalone: true, selector: "lib-dialog-confirmation", inputs: { title: "title", confirm: "confirm", confirmLabel: "confirmLabel", items: "items", btnMap: "btnMap" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n      <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n        @for (item of items; track item.key; let i = $index) {\r\n\r\n        <div class=\"info-item\">\r\n          <div class=\"info-main\" [class.info-main-expanded]=\"item.expandible\" (click)=\"item.expandible && toggle(i)\">\r\n            <span class=\"label\">{{ item.label }} @if (item.expandible) {\r\n              <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n              }\r\n            </span>\r\n            <span class=\"value\"> {{ item.value }} </span>\r\n          </div>\r\n\r\n          @if (expandedIndex === i && item.children?.length) {\r\n          <div class=\"info-children\">\r\n            @for (child of item.children; track child.key) {\r\n            <div class=\"info-item child-item\">\r\n              <div class=\"info-main\">\r\n                <span class=\"label\">{{ child.label }}</span>\r\n                <span class=\"value\">{{ child.value }}</span>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n            <path fill=\"#fff\"\r\n              d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n            <path fill=\"#fff\"\r\n              d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n          </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      } @else {\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n            <path fill=\"#fff\"\r\n              d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n            <path fill=\"#fff\"\r\n              d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n          </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff;display:flex;gap:4px;align-items:center}.btn.confirm:hover{background-color:#596300c2}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogConfirmation, isStandalone: true, selector: "lib-dialog-confirmation", inputs: { title: "title", message: "message", confirm: "confirm", confirmLabel: "confirmLabel", items: "items", btnMap: "btnMap", type: "type" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <div class=\"modal-header-title\">\r\n        <div class=\"icon-container\" class=\"icono-container\" [ngClass]=\"type\">\r\n          @if(type === 'info') {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            class=\"icon icon-tabler icons-tabler-outline icon-tabler-circle-check\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\r\n            <path d=\"M9 12l2 2l4 -4\" />\r\n          </svg>\r\n          }\r\n        </div>\r\n        <h2>{{ title }}</h2>\r\n        <p class=\"modal-header-message\">{{ message }}</p>\r\n      </div>\r\n      <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n        @for (item of items; track item.key; let i = $index) {\r\n\r\n        <div class=\"info-item\">\r\n          <div class=\"info-main\" [class.info-main-expanded]=\"item.expandible\" (click)=\"item.expandible && toggle(i)\">\r\n            <span class=\"label\">{{ item.label }} @if (item.expandible) {\r\n              <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n              }\r\n            </span>\r\n            <span class=\"value\"> {{ item.value }} </span>\r\n          </div>\r\n\r\n          @if (expandedIndex === i && item.children?.length) {\r\n          <div class=\"info-children\">\r\n            @for (child of item.children; track child.key) {\r\n            <div class=\"info-item child-item\">\r\n              <div class=\"info-main\">\r\n                <span class=\"label\">{{ child.label }}</span>\r\n                <span class=\"value\">{{ child.value }}</span>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n          <path fill=\"#fff\"\r\n            d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n          <path fill=\"#fff\"\r\n            d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n        </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      } @else {\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n          <path fill=\"#fff\"\r\n            d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n          <path fill=\"#fff\"\r\n            d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n        </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.icono-container{width:64px;height:64px;border-radius:50%;padding:12px;display:flex;align-items:center;justify-content:center;background-color:#e3e3d1;transition:background-color .2s}.icono-container.info{background-color:#0088ff3a}.icono-container.info svg{width:42px;height:42px;color:#08f}.modal-header-title{display:flex;flex-direction:column;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.modal-header-message{color:#d14c4c;font-size:12px;line-height:1.5}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff;display:flex;gap:4px;align-items:center}.btn.confirm:hover{background-color:#596300c2}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogConfirmation, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dialog-confirmation', imports: [CommonModule], template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n      <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n        @for (item of items; track item.key; let i = $index) {\r\n\r\n        <div class=\"info-item\">\r\n          <div class=\"info-main\" [class.info-main-expanded]=\"item.expandible\" (click)=\"item.expandible && toggle(i)\">\r\n            <span class=\"label\">{{ item.label }} @if (item.expandible) {\r\n              <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n              }\r\n            </span>\r\n            <span class=\"value\"> {{ item.value }} </span>\r\n          </div>\r\n\r\n          @if (expandedIndex === i && item.children?.length) {\r\n          <div class=\"info-children\">\r\n            @for (child of item.children; track child.key) {\r\n            <div class=\"info-item child-item\">\r\n              <div class=\"info-main\">\r\n                <span class=\"label\">{{ child.label }}</span>\r\n                <span class=\"value\">{{ child.value }}</span>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n            <path fill=\"#fff\"\r\n              d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n            <path fill=\"#fff\"\r\n              d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n          </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      } @else {\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n            <path fill=\"#fff\"\r\n              d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n            <path fill=\"#fff\"\r\n              d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n          </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff;display:flex;gap:4px;align-items:center}.btn.confirm:hover{background-color:#596300c2}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"] }]
+            args: [{ selector: 'lib-dialog-confirmation', imports: [CommonModule], template: "<div class=\"modal-backdrop\" (click)=\"onCancel()\">\r\n  <div class=\"modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <div class=\"modal-header-title\">\r\n        <div class=\"icon-container\" class=\"icono-container\" [ngClass]=\"type\">\r\n          @if(type === 'info') {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            class=\"icon icon-tabler icons-tabler-outline icon-tabler-circle-check\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\r\n            <path d=\"M9 12l2 2l4 -4\" />\r\n          </svg>\r\n          }\r\n        </div>\r\n        <h2>{{ title }}</h2>\r\n        <p class=\"modal-header-message\">{{ message }}</p>\r\n      </div>\r\n      <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n        @for (item of items; track item.key; let i = $index) {\r\n\r\n        <div class=\"info-item\">\r\n          <div class=\"info-main\" [class.info-main-expanded]=\"item.expandible\" (click)=\"item.expandible && toggle(i)\">\r\n            <span class=\"label\">{{ item.label }} @if (item.expandible) {\r\n              <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n              }\r\n            </span>\r\n            <span class=\"value\"> {{ item.value }} </span>\r\n          </div>\r\n\r\n          @if (expandedIndex === i && item.children?.length) {\r\n          <div class=\"info-children\">\r\n            @for (child of item.children; track child.key) {\r\n            <div class=\"info-item child-item\">\r\n              <div class=\"info-main\">\r\n                <span class=\"label\">{{ child.label }}</span>\r\n                <span class=\"value\">{{ child.value }}</span>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n          <path fill=\"#fff\"\r\n            d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n          <path fill=\"#fff\"\r\n            d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n        </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      } @else {\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        @if(btnMap) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n          <path fill=\"#fff\"\r\n            d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n          <path fill=\"#fff\"\r\n            d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n        </svg>\r\n        }\r\n        {{ confirmLabel }}\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.icono-container{width:64px;height:64px;border-radius:50%;padding:12px;display:flex;align-items:center;justify-content:center;background-color:#e3e3d1;transition:background-color .2s}.icono-container.info{background-color:#0088ff3a}.icono-container.info svg{width:42px;height:42px;color:#08f}.modal-header-title{display:flex;flex-direction:column;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.modal-header-message{color:#d14c4c;font-size:12px;line-height:1.5}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff;display:flex;gap:4px;align-items:center}.btn.confirm:hover{background-color:#596300c2}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"] }]
         }], propDecorators: { title: [{
                 type: Input$1
+            }], message: [{
+                type: Input$1
             }], confirm: [{
                 type: Input$1
             }], confirmLabel: [{
@@ -2987,6 +3007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input$1
             }], btnMap: [{
                 type: Input$1
+            }], type: [{
+                type: Input$1
             }], close: [{
                 type: Output
             }] } });
@@ -4030,11 +4052,11 @@ class TitleFilters {
         this.clickButtonBack.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, clickButtonIcon: { classPropertyName: "clickButtonIcon", publicName: "clickButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, clickButtonLabel: { classPropertyName: "clickButtonLabel", publicName: "clickButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowFilters: { classPropertyName: "alwaysShowFilters", publicName: "alwaysShowFilters", isSignal: true, isRequired: false, transformFunction: null }, showSecondaryButton: { classPropertyName: "showSecondaryButton", publicName: "showSecondaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonExport: { classPropertyName: "showButtonExport", publicName: "showButtonExport", isSignal: true, isRequired: false, transformFunction: null }, exportButtonIcon: { classPropertyName: "exportButtonIcon", publicName: "exportButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, exportButtonLabel: { classPropertyName: "exportButtonLabel", publicName: "exportButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonBack: { classPropertyName: "showButtonBack", publicName: "showButtonBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", clearFilters: "clearFilters", filterButtonClicked: "filterButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", exportButtonClicked: "exportButtonClicked", clickButtonBack: "clickButtonBack" }, viewQueries: [{ propertyName: "filtersContainer", first: true, predicate: ["filtersContainer"], descendants: true, read: ElementRef }, { propertyName: "submitBtn", first: true, predicate: ["submitBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"header-container-table\">\n    <div class=\"filters-dashboard-table\">\n        <div class=\"left-title\">\n            @if(showButtonBack()) {\n                <div class=\"button-back\" (click)=\"clickButton()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M5 12l6 6\" /><path d=\"M5 12l6 -6\" /></svg>\n                </div>\n            }\n            <div class=\"title-table\">{{ title() }}</div>\n        </div>\n\n        @if (buttonMode() === 'toggle') {\n        <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n                <path\n                    d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n            </svg>\n            <div class=\"label\">Filtros</div>\n        </div>\n        }\n        @if (buttonMode() === 'action') {\n        <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n                <path fill=\"#fff\"\n                    d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n                <path fill=\"#fff\"\n                    d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n            </svg>\n            <div class=\"label\">Ir al Mapa</div>\n        </div>\n        }\n        @if (buttonMode() === 'click') {\n        <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n            @if (clickButtonIcon()) {\n                <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n            }\n            {{ clickButtonLabel() }}\n        </lib-button>\n        }\n        <div class=\"secondary-action-btn\">\n        @if (showSecondaryButton()) {\n        <lib-button variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n            @if (secondaryButtonIcon()) {\n                <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n            }\n            {{ secondaryButtonLabel() }}\n        </lib-button>\n        }\n        @if (showButtonExport()) {\n          <lib-button variant=\"outline\" (clicked)=\"exportButtonClicked.emit()\">\n            <span class=\"btn-icon {{exportButtonIcon()}}\"></span>\n            {{ exportButtonLabel() }}\n          </lib-button>\n        }\n        </div>\n    </div>\n\n    @if (filtersVisible) {\n    <div class=\"filters-container\" #filtersContainer>\n        <div class=\"filters-wrapper\">\n\n            @for (config of normalizedFiltersConfig(); track $index) {\n            @switch (config.type) {\n              @case ('text') {\n                <lib-input-text-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('number') {\n                <lib-input-number-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('select') {\n                <lib-input-select-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('date') {\n                <lib-date-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (dateSelected)=\"onDateSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('time') {\n                <lib-input-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n            }\n            }\n\n            <div class=\"actions\">\n              <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\" (keydown.enter)=\"onApplyFilters()\">\n                Aplicar Filtros\n              </lib-button>\n\n              <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\"> \n                Borrar Filtros \n              </lib-button>\n            </div>\n        </div>\n    </div>\n    }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:100}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;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-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon-tabler-filter{color:var(--schemes-on-primary, #ffffff);width:20px;height:20px}.secondary-action-btn{margin-left:auto;display:flex;gap:10px}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-filter{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .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, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: InputNumberFilter, selector: "lib-input-number-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputTextFilter, selector: "lib-input-text-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputSelectFilter, selector: "lib-input-select-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: DateTimeFilter, selector: "lib-date-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["dateSelected", "dateChange", "enterPressed"] }, { kind: "component", type: InputTimeFilter, selector: "lib-input-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: Button, selector: "lib-button", inputs: ["variant", "type", "disabled", "fullWidth", "size"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, clickButtonIcon: { classPropertyName: "clickButtonIcon", publicName: "clickButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, clickButtonLabel: { classPropertyName: "clickButtonLabel", publicName: "clickButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowFilters: { classPropertyName: "alwaysShowFilters", publicName: "alwaysShowFilters", isSignal: true, isRequired: false, transformFunction: null }, showSecondaryButton: { classPropertyName: "showSecondaryButton", publicName: "showSecondaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonExport: { classPropertyName: "showButtonExport", publicName: "showButtonExport", isSignal: true, isRequired: false, transformFunction: null }, exportButtonIcon: { classPropertyName: "exportButtonIcon", publicName: "exportButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, exportButtonLabel: { classPropertyName: "exportButtonLabel", publicName: "exportButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonBack: { classPropertyName: "showButtonBack", publicName: "showButtonBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", clearFilters: "clearFilters", filterButtonClicked: "filterButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", exportButtonClicked: "exportButtonClicked", clickButtonBack: "clickButtonBack" }, viewQueries: [{ propertyName: "filtersContainer", first: true, predicate: ["filtersContainer"], descendants: true, read: ElementRef }, { propertyName: "submitBtn", first: true, predicate: ["submitBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"header-container-table\">\n  <div class=\"filters-dashboard-table\">\n    <div class=\"left-title\">\n      @if(showButtonBack()) {\n      <div class=\"button-back\" (click)=\"clickButton()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\">\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path d=\"M5 12l14 0\" />\n          <path d=\"M5 12l6 6\" />\n          <path d=\"M5 12l6 -6\" />\n        </svg>\n      </div>\n      }\n      <div class=\"title-table\">{{ title() }}</div>\n    </div>\n\n    @if (buttonMode() === 'toggle') {\n    <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n        <path\n          d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n      </svg>\n      <div class=\"label\">Filtros</div>\n    </div>\n    }\n    @if (buttonMode() === 'action') {\n    <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n        <path fill=\"#fff\"\n          d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n        <path fill=\"#fff\"\n          d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n      </svg>\n      <div class=\"label\">Ir al Mapa</div>\n    </div>\n    }\n    @if (buttonMode() === 'click') {\n    <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n      @if (clickButtonIcon()) {\n      <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n      }\n      {{ clickButtonLabel() }}\n    </lib-button>\n    }\n    <div class=\"secondary-action-btn\">\n      @if (showSecondaryButton()) {\n      <lib-button variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n        @if (secondaryButtonIcon()) {\n        <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n        }\n        {{ secondaryButtonLabel() }}\n      </lib-button>\n      }\n      @if (showButtonExport()) {\n      <lib-button variant=\"outline\" (clicked)=\"exportButtonClicked.emit()\">\n        <span class=\"btn-icon {{exportButtonIcon()}}\"></span>\n        {{ exportButtonLabel() }}\n      </lib-button>\n      }\n      @if (buttonMode() === 'clickRight') {\n      <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n        @if (clickButtonIcon()) {\n        <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n        }\n        {{ clickButtonLabel() }}\n      </lib-button>\n      }\n    </div>\n  </div>\n\n  @if (filtersVisible) {\n  <div class=\"filters-container\" #filtersContainer>\n    <div class=\"filters-wrapper\">\n\n      @for (config of normalizedFiltersConfig(); track $index) {\n      @switch (config.type) {\n      @case ('text') {\n      <lib-input-text-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n        (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n      }\n      @case ('number') {\n      <lib-input-number-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n        (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n      }\n      @case ('select') {\n      <lib-input-select-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n        (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n      }\n      @case ('date') {\n      <lib-date-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n        (dateSelected)=\"onDateSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n      }\n      @case ('time') {\n      <lib-input-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n        (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n      }\n      }\n      }\n\n      <div class=\"actions\">\n        <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\"\n          (keydown.enter)=\"onApplyFilters()\">\n          Aplicar Filtros\n        </lib-button>\n\n        <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\">\n          Borrar Filtros\n        </lib-button>\n      </div>\n    </div>\n  </div>\n  }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:100}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;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-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon-tabler-filter{color:var(--schemes-on-primary, #ffffff);width:20px;height:20px}.secondary-action-btn{margin-left:auto;display:flex;gap:10px}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-filter{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .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, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: InputNumberFilter, selector: "lib-input-number-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputTextFilter, selector: "lib-input-text-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputSelectFilter, selector: "lib-input-select-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: DateTimeFilter, selector: "lib-date-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["dateSelected", "dateChange", "enterPressed"] }, { kind: "component", type: InputTimeFilter, selector: "lib-input-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: Button, selector: "lib-button", inputs: ["variant", "type", "disabled", "fullWidth", "size"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter, InputTimeFilter, Button], template: "<div class=\"header-container-table\">\n    <div class=\"filters-dashboard-table\">\n        <div class=\"left-title\">\n            @if(showButtonBack()) {\n                <div class=\"button-back\" (click)=\"clickButton()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M5 12l6 6\" /><path d=\"M5 12l6 -6\" /></svg>\n                </div>\n            }\n            <div class=\"title-table\">{{ title() }}</div>\n        </div>\n\n        @if (buttonMode() === 'toggle') {\n        <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n                <path\n                    d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n            </svg>\n            <div class=\"label\">Filtros</div>\n        </div>\n        }\n        @if (buttonMode() === 'action') {\n        <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n                <path fill=\"#fff\"\n                    d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n                <path fill=\"#fff\"\n                    d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n            </svg>\n            <div class=\"label\">Ir al Mapa</div>\n        </div>\n        }\n        @if (buttonMode() === 'click') {\n        <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n            @if (clickButtonIcon()) {\n                <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n            }\n            {{ clickButtonLabel() }}\n        </lib-button>\n        }\n        <div class=\"secondary-action-btn\">\n        @if (showSecondaryButton()) {\n        <lib-button variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n            @if (secondaryButtonIcon()) {\n                <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n            }\n            {{ secondaryButtonLabel() }}\n        </lib-button>\n        }\n        @if (showButtonExport()) {\n          <lib-button variant=\"outline\" (clicked)=\"exportButtonClicked.emit()\">\n            <span class=\"btn-icon {{exportButtonIcon()}}\"></span>\n            {{ exportButtonLabel() }}\n          </lib-button>\n        }\n        </div>\n    </div>\n\n    @if (filtersVisible) {\n    <div class=\"filters-container\" #filtersContainer>\n        <div class=\"filters-wrapper\">\n\n            @for (config of normalizedFiltersConfig(); track $index) {\n            @switch (config.type) {\n              @case ('text') {\n                <lib-input-text-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('number') {\n                <lib-input-number-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('select') {\n                <lib-input-select-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('date') {\n                <lib-date-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (dateSelected)=\"onDateSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('time') {\n                <lib-input-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n            }\n            }\n\n            <div class=\"actions\">\n              <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\" (keydown.enter)=\"onApplyFilters()\">\n                Aplicar Filtros\n              </lib-button>\n\n              <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\"> \n                Borrar Filtros \n              </lib-button>\n            </div>\n        </div>\n    </div>\n    }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:100}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;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-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon-tabler-filter{color:var(--schemes-on-primary, #ffffff);width:20px;height:20px}.secondary-action-btn{margin-left:auto;display:flex;gap:10px}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-filter{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .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, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
+            args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter, InputTimeFilter, Button], template: "<div class=\"header-container-table\">\n  <div class=\"filters-dashboard-table\">\n    <div class=\"left-title\">\n      @if(showButtonBack()) {\n      <div class=\"button-back\" (click)=\"clickButton()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\">\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path d=\"M5 12l14 0\" />\n          <path d=\"M5 12l6 6\" />\n          <path d=\"M5 12l6 -6\" />\n        </svg>\n      </div>\n      }\n      <div class=\"title-table\">{{ title() }}</div>\n    </div>\n\n    @if (buttonMode() === 'toggle') {\n    <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n        <path\n          d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n      </svg>\n      <div class=\"label\">Filtros</div>\n    </div>\n    }\n    @if (buttonMode() === 'action') {\n    <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n        <path fill=\"#fff\"\n          d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n        <path fill=\"#fff\"\n          d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n      </svg>\n      <div class=\"label\">Ir al Mapa</div>\n    </div>\n    }\n    @if (buttonMode() === 'click') {\n    <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n      @if (clickButtonIcon()) {\n      <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n      }\n      {{ clickButtonLabel() }}\n    </lib-button>\n    }\n    <div class=\"secondary-action-btn\">\n      @if (showSecondaryButton()) {\n      <lib-button variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n        @if (secondaryButtonIcon()) {\n        <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n        }\n        {{ secondaryButtonLabel() }}\n      </lib-button>\n      }\n      @if (showButtonExport()) {\n      <lib-button variant=\"outline\" (clicked)=\"exportButtonClicked.emit()\">\n        <span class=\"btn-icon {{exportButtonIcon()}}\"></span>\n        {{ exportButtonLabel() }}\n      </lib-button>\n      }\n      @if (buttonMode() === 'clickRight') {\n      <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n        @if (clickButtonIcon()) {\n        <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n        }\n        {{ clickButtonLabel() }}\n      </lib-button>\n      }\n    </div>\n  </div>\n\n  @if (filtersVisible) {\n  <div class=\"filters-container\" #filtersContainer>\n    <div class=\"filters-wrapper\">\n\n      @for (config of normalizedFiltersConfig(); track $index) {\n      @switch (config.type) {\n      @case ('text') {\n      <lib-input-text-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n        (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n      }\n      @case ('number') {\n      <lib-input-number-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n        (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n      }\n      @case ('select') {\n      <lib-input-select-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n        (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n      }\n      @case ('date') {\n      <lib-date-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n        (dateSelected)=\"onDateSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n      }\n      @case ('time') {\n      <lib-input-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n        (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n      }\n      }\n      }\n\n      <div class=\"actions\">\n        <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\"\n          (keydown.enter)=\"onApplyFilters()\">\n          Aplicar Filtros\n        </lib-button>\n\n        <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\">\n          Borrar Filtros\n        </lib-button>\n      </div>\n    </div>\n  </div>\n  }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:100}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;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-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon-tabler-filter{color:var(--schemes-on-primary, #ffffff);width:20px;height:20px}.secondary-action-btn{margin-left:auto;display:flex;gap:10px}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-filter{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .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, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
         }], propDecorators: { filtersContainer: [{
                 type: ViewChild,
                 args: ['filtersContainer', { read: ElementRef }]
@@ -4399,16 +4421,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], validateOnTabChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateOnTabChange", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], tabValidationFailed: [{ type: i0.Output, args: ["tabValidationFailed"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], childCards: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CardContent), { isSignal: true }] }] } });
 
 class NotFoundSection {
+    title = input('No hay datos', ...(ngDevMode ? [{ debugName: "title" }] : []));
     showButton = input(true, ...(ngDevMode ? [{ debugName: "showButton" }] : []));
     buttonLabel = input('Crear', ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
     openModal = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotFoundSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotFoundSection, isStandalone: true, selector: "lib-not-found-section", inputs: { showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModal: "openModal" }, ngImport: i0, template: "<div class=\"content-container\">\r\n    <div class=\"no-data-container\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-inbox\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M4 13h3l3 3h4l3 -3h3\" />\r\n      </svg>\r\n      <div class=\"title2\">No hay datos</div>\r\n      @if(showButton()){\r\n      <button class=\"button-medium-primary\" (click)=\"openModal.emit()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-plus\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M12 5l0 14\" />\r\n          <path d=\"M5 12l14 0\" />\r\n        </svg>\r\n        <div class=\"label\">{{ buttonLabel() }}</div>\r\n      </button>\r\n    }\r\n    </div>\r\n  </div>", styles: [".content-container{width:100%;height:100%;min-height:200px;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;flex-shrink:0;position:relative;padding:24px}.no-data-container{width:100%;max-width:280px;display:flex;flex-direction:column;justify-content:center;align-items:center}.title2{color:var(--schemes-on-surface, #171c1f);text-align:center;font-family:var(--headline-medium-font, \"Roboto-SemiBold\", sans-serif);font-size:24px;line-height:32px;font-weight:600;margin-bottom:24px;position:relative}.button-medium-primary{background-color:var(--primary, #596300);padding:16px 22px;width:100%;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-medium-primary:hover{background-color:var(--on-secondary-container, #61661f)}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.icon.icon-tabler-inbox{width:64px;height:64px;color:#171c1f}.label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotFoundSection, isStandalone: true, selector: "lib-not-found-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModal: "openModal" }, ngImport: i0, template: "<div class=\"content-container\">\r\n    <div class=\"no-data-container\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-inbox\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M4 13h3l3 3h4l3 -3h3\" />\r\n      </svg>\r\n      <div class=\"title2\">{{ title() }}</div>\r\n      @if(showButton()){\r\n      <button class=\"button-medium-primary\" (click)=\"openModal.emit()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-plus\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M12 5l0 14\" />\r\n          <path d=\"M5 12l14 0\" />\r\n        </svg>\r\n        <div class=\"label\">{{ buttonLabel() }}</div>\r\n      </button>\r\n    }\r\n    </div>\r\n  </div>", styles: [".content-container{width:100%;height:100%;min-height:200px;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;flex-shrink:0;position:relative;padding:24px}.no-data-container{width:100%;max-width:280px;display:flex;flex-direction:column;justify-content:center;align-items:center}.title2{color:var(--schemes-on-surface, #171c1f);text-align:center;font-family:var(--headline-medium-font, \"Roboto-SemiBold\", sans-serif);font-size:24px;line-height:32px;font-weight:600;margin-bottom:24px;position:relative}.button-medium-primary{background-color:var(--primary, #596300);padding:16px 22px;width:100%;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-medium-primary:hover{background-color:var(--on-secondary-container, #61661f)}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.icon.icon-tabler-inbox{width:64px;height:64px;color:#171c1f}.label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotFoundSection, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-not-found-section', imports: [], template: "<div class=\"content-container\">\r\n    <div class=\"no-data-container\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-inbox\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M4 13h3l3 3h4l3 -3h3\" />\r\n      </svg>\r\n      <div class=\"title2\">No hay datos</div>\r\n      @if(showButton()){\r\n      <button class=\"button-medium-primary\" (click)=\"openModal.emit()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-plus\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M12 5l0 14\" />\r\n          <path d=\"M5 12l14 0\" />\r\n        </svg>\r\n        <div class=\"label\">{{ buttonLabel() }}</div>\r\n      </button>\r\n    }\r\n    </div>\r\n  </div>", styles: [".content-container{width:100%;height:100%;min-height:200px;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;flex-shrink:0;position:relative;padding:24px}.no-data-container{width:100%;max-width:280px;display:flex;flex-direction:column;justify-content:center;align-items:center}.title2{color:var(--schemes-on-surface, #171c1f);text-align:center;font-family:var(--headline-medium-font, \"Roboto-SemiBold\", sans-serif);font-size:24px;line-height:32px;font-weight:600;margin-bottom:24px;position:relative}.button-medium-primary{background-color:var(--primary, #596300);padding:16px 22px;width:100%;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-medium-primary:hover{background-color:var(--on-secondary-container, #61661f)}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.icon.icon-tabler-inbox{width:64px;height:64px;color:#171c1f}.label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
-        }], propDecorators: { showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], openModal: [{ type: i0.Output, args: ["openModal"] }] } });
+            args: [{ selector: 'lib-not-found-section', imports: [], template: "<div class=\"content-container\">\r\n    <div class=\"no-data-container\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-inbox\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M4 13h3l3 3h4l3 -3h3\" />\r\n      </svg>\r\n      <div class=\"title2\">{{ title() }}</div>\r\n      @if(showButton()){\r\n      <button class=\"button-medium-primary\" (click)=\"openModal.emit()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-plus\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M12 5l0 14\" />\r\n          <path d=\"M5 12l14 0\" />\r\n        </svg>\r\n        <div class=\"label\">{{ buttonLabel() }}</div>\r\n      </button>\r\n    }\r\n    </div>\r\n  </div>", styles: [".content-container{width:100%;height:100%;min-height:200px;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;flex-shrink:0;position:relative;padding:24px}.no-data-container{width:100%;max-width:280px;display:flex;flex-direction:column;justify-content:center;align-items:center}.title2{color:var(--schemes-on-surface, #171c1f);text-align:center;font-family:var(--headline-medium-font, \"Roboto-SemiBold\", sans-serif);font-size:24px;line-height:32px;font-weight:600;margin-bottom:24px;position:relative}.button-medium-primary{background-color:var(--primary, #596300);padding:16px 22px;width:100%;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-medium-primary:hover{background-color:var(--on-secondary-container, #61661f)}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.icon.icon-tabler-inbox{width:64px;height:64px;color:#171c1f}.label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], openModal: [{ type: i0.Output, args: ["openModal"] }] } });
 
 class ToastService {
     currentToast = signal(null, ...(ngDevMode ? [{ debugName: "currentToast" }] : []));
@@ -4538,11 +4561,11 @@ class QuickAccessCards {
         this.clickAction.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickAccessCards, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: QuickAccessCards, isStandalone: true, selector: "lib-quick-access-cards", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickAction: "clickAction" }, ngImport: i0, template: "<h2 class=\"quick-access-title\">{{ title() }}</h2>\n<div class=\"quick-access-grid\">\n    @for (item of items(); track item.id) {\n        <lib-option-card [label]=\"item.label\" [description]=\"item.description\" [iconBg]=\"item.iconBg\"\n            [mode]=\"'quick-access'\" (clickAction)=\"onOptionClick(item)\">\n            <span icon [class]=\"item.icon\"></span>\n        </lib-option-card>\n    }\n</div>", styles: [":host{display:block}.quick-access-title{font-family:Manrope,sans-serif;font-weight:700;font-size:20px;color:var(--text, #454733);margin-bottom:20px;letter-spacing:.3px}.quick-access-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}::ng-deep .icon-settings,::ng-deep .icon-check,::ng-deep .icon-close,::ng-deep .icon-info,::ng-deep .icon-alert,::ng-deep .icon-star,::ng-deep .icon-users,::ng-deep .icon-building,::ng-deep .icon-car,::ng-deep .icon-shield,::ng-deep .icon-clipboard,::ng-deep .icon-map-pin,::ng-deep .icon-chart,::ng-deep .icon-file,::ng-deep .icon-refresh,::ng-deep .icon-edit,::ng-deep .icon-search{width:24px;height:24px;background-color:currentColor;display:inline-block;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat}::ng-deep .icon-settings{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>')}::ng-deep .icon-check{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10-10\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10-10\"/></svg>')}::ng-deep .icon-close{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></svg>')}::ng-deep .icon-info{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></svg>')}::ng-deep .icon-alert{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>')}::ng-deep .icon-star{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>')}::ng-deep .icon-users{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></svg>')}::ng-deep .icon-building{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></svg>')}::ng-deep .icon-car{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></svg>')}::ng-deep .icon-shield{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-clipboard{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-map-pin{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></svg>')}::ng-deep .icon-chart{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></svg>')}::ng-deep .icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></svg>')}::ng-deep .icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0-15.5-2m-.5-4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0-15.5-2m-.5-4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}::ng-deep .icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5-10.5a2.828 2.828 0 1 0-4-4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5-10.5a2.828 2.828 0 1 0-4-4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}::ng-deep .icon-search{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg>')}@media (max-width: 1200px){.quick-access-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.quick-access-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.quick-access-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "component", type: OptionCard, selector: "lib-option-card", inputs: ["mode", "label", "description", "buttonBg", "iconBg"], outputs: ["clickAction"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: QuickAccessCards, isStandalone: true, selector: "lib-quick-access-cards", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickAction: "clickAction" }, ngImport: i0, template: "<h2 class=\"quick-access-title\">{{ title() }}</h2>\n<div class=\"quick-access-grid\">\n    @for (item of items(); track item.id) {\n        <lib-option-card [label]=\"item.label\" [description]=\"item.description\" [iconBg]=\"item.iconBg\"\n            [mode]=\"'quick-access'\" (clickAction)=\"onOptionClick(item)\">\n            <span icon [class]=\"item.icon\"></span>\n        </lib-option-card>\n    }\n</div>", styles: [":host{display:block}.quick-access-title{font-family:Manrope,sans-serif;font-weight:700;font-size:24px;color:var(--text, #fff);margin-bottom:20px;letter-spacing:.3px}.quick-access-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}::ng-deep .icon-settings,::ng-deep .icon-check,::ng-deep .icon-close,::ng-deep .icon-info,::ng-deep .icon-alert,::ng-deep .icon-star,::ng-deep .icon-users,::ng-deep .icon-building,::ng-deep .icon-car,::ng-deep .icon-shield,::ng-deep .icon-clipboard,::ng-deep .icon-map-pin,::ng-deep .icon-chart,::ng-deep .icon-file,::ng-deep .icon-refresh,::ng-deep .icon-edit,::ng-deep .icon-search{width:24px;height:24px;background-color:currentColor;display:inline-block;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat}::ng-deep .icon-settings{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>')}::ng-deep .icon-check{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10-10\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10-10\"/></svg>')}::ng-deep .icon-close{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></svg>')}::ng-deep .icon-info{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></svg>')}::ng-deep .icon-alert{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>')}::ng-deep .icon-star{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>')}::ng-deep .icon-users{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></svg>')}::ng-deep .icon-building{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></svg>')}::ng-deep .icon-car{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></svg>')}::ng-deep .icon-shield{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-clipboard{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-map-pin{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></svg>')}::ng-deep .icon-chart{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></svg>')}::ng-deep .icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></svg>')}::ng-deep .icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0-15.5-2m-.5-4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0-15.5-2m-.5-4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}::ng-deep .icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5-10.5a2.828 2.828 0 1 0-4-4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5-10.5a2.828 2.828 0 1 0-4-4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}::ng-deep .icon-search{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg>')}@media (max-width: 1200px){.quick-access-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.quick-access-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.quick-access-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "component", type: OptionCard, selector: "lib-option-card", inputs: ["mode", "label", "description", "buttonBg", "iconBg"], outputs: ["clickAction"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickAccessCards, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-quick-access-cards', imports: [OptionCard], template: "<h2 class=\"quick-access-title\">{{ title() }}</h2>\n<div class=\"quick-access-grid\">\n    @for (item of items(); track item.id) {\n        <lib-option-card [label]=\"item.label\" [description]=\"item.description\" [iconBg]=\"item.iconBg\"\n            [mode]=\"'quick-access'\" (clickAction)=\"onOptionClick(item)\">\n            <span icon [class]=\"item.icon\"></span>\n        </lib-option-card>\n    }\n</div>", styles: [":host{display:block}.quick-access-title{font-family:Manrope,sans-serif;font-weight:700;font-size:20px;color:var(--text, #454733);margin-bottom:20px;letter-spacing:.3px}.quick-access-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}::ng-deep .icon-settings,::ng-deep .icon-check,::ng-deep .icon-close,::ng-deep .icon-info,::ng-deep .icon-alert,::ng-deep .icon-star,::ng-deep .icon-users,::ng-deep .icon-building,::ng-deep .icon-car,::ng-deep .icon-shield,::ng-deep .icon-clipboard,::ng-deep .icon-map-pin,::ng-deep .icon-chart,::ng-deep .icon-file,::ng-deep .icon-refresh,::ng-deep .icon-edit,::ng-deep .icon-search{width:24px;height:24px;background-color:currentColor;display:inline-block;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat}::ng-deep .icon-settings{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>')}::ng-deep .icon-check{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10-10\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10-10\"/></svg>')}::ng-deep .icon-close{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></svg>')}::ng-deep .icon-info{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></svg>')}::ng-deep .icon-alert{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>')}::ng-deep .icon-star{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>')}::ng-deep .icon-users{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></svg>')}::ng-deep .icon-building{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></svg>')}::ng-deep .icon-car{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></svg>')}::ng-deep .icon-shield{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-clipboard{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-map-pin{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></svg>')}::ng-deep .icon-chart{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></svg>')}::ng-deep .icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></svg>')}::ng-deep .icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0-15.5-2m-.5-4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0-15.5-2m-.5-4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}::ng-deep .icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5-10.5a2.828 2.828 0 1 0-4-4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5-10.5a2.828 2.828 0 1 0-4-4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}::ng-deep .icon-search{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg>')}@media (max-width: 1200px){.quick-access-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.quick-access-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.quick-access-grid{grid-template-columns:1fr}}\n"] }]
+            args: [{ selector: 'lib-quick-access-cards', imports: [OptionCard], template: "<h2 class=\"quick-access-title\">{{ title() }}</h2>\n<div class=\"quick-access-grid\">\n    @for (item of items(); track item.id) {\n        <lib-option-card [label]=\"item.label\" [description]=\"item.description\" [iconBg]=\"item.iconBg\"\n            [mode]=\"'quick-access'\" (clickAction)=\"onOptionClick(item)\">\n            <span icon [class]=\"item.icon\"></span>\n        </lib-option-card>\n    }\n</div>", styles: [":host{display:block}.quick-access-title{font-family:Manrope,sans-serif;font-weight:700;font-size:24px;color:var(--text, #fff);margin-bottom:20px;letter-spacing:.3px}.quick-access-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}::ng-deep .icon-settings,::ng-deep .icon-check,::ng-deep .icon-close,::ng-deep .icon-info,::ng-deep .icon-alert,::ng-deep .icon-star,::ng-deep .icon-users,::ng-deep .icon-building,::ng-deep .icon-car,::ng-deep .icon-shield,::ng-deep .icon-clipboard,::ng-deep .icon-map-pin,::ng-deep .icon-chart,::ng-deep .icon-file,::ng-deep .icon-refresh,::ng-deep .icon-edit,::ng-deep .icon-search{width:24px;height:24px;background-color:currentColor;display:inline-block;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat}::ng-deep .icon-settings{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37 1 .608 2.296.07 2.572-1.065z\"/><path d=\"M9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0\"/></svg>')}::ng-deep .icon-check{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10-10\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10-10\"/></svg>')}::ng-deep .icon-close{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M18 6l-12 12\"/><path d=\"M6 6l12 12\"/></svg>')}::ng-deep .icon-info{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0\"/><path d=\"M12 9h.01\"/><path d=\"M11 12h1v4h1\"/></svg>')}::ng-deep .icon-alert{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 9v4\"/><path d=\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z\"/><path d=\"M12 16h.01\"/></svg>')}::ng-deep .icon-star{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/></svg>')}::ng-deep .icon-users{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8z\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/><path d=\"M21 21v-2a4 4 0 0 0-3-3.85\"/></svg>')}::ng-deep .icon-building{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 21l18 0\"/><path d=\"M9 8l1 0\"/><path d=\"M9 12l1 0\"/><path d=\"M9 16l1 0\"/><path d=\"M14 8l1 0\"/><path d=\"M14 12l1 0\"/><path d=\"M14 16l1 0\"/><path d=\"M5 21v-16a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16\"/></svg>')}::ng-deep .icon-car{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0\"/><path d=\"M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6-6h15m-6 0v-5\"/></svg>')}::ng-deep .icon-shield{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-8.5 15a12 12 0 0 1-8.5-15a12 12 0 0 0 8.5-3\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-clipboard{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2\"/><path d=\"M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z\"/><path d=\"M9 12l2 2l4-4\"/></svg>')}::ng-deep .icon-map-pin{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/><path d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\"/></svg>')}::ng-deep .icon-chart{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M9 8m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M15 4m0 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><path d=\"M4 20h14\"/></svg>')}::ng-deep .icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"/></svg>')}::ng-deep .icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0-15.5-2m-.5-4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0-15.5-2m-.5-4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}::ng-deep .icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5-10.5a2.828 2.828 0 1 0-4-4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5-10.5a2.828 2.828 0 1 0-4-4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}::ng-deep .icon-search{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg>')}@media (max-width: 1200px){.quick-access-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.quick-access-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.quick-access-grid{grid-template-columns:1fr}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
 
 echarts.use([
@@ -4611,7 +4634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'lib-base-chart', imports: [NgxEchartsDirective], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\" (chartClick)=\"onChartClick($event)\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }] } });
 
-function buildBarChartOptions(data, multiSeries) {
+function buildBarChartOptions(data, multiSeries, horizontal = false) {
     const showScroll = data.length > 12;
     const zoomEnd = showScroll ? Math.floor((12 / data.length) * 100) : 100;
     const isMulti = !!multiSeries && multiSeries.length > 0;
@@ -4627,7 +4650,7 @@ function buildBarChartOptions(data, multiSeries) {
             },
             label: {
                 show: true,
-                position: 'top',
+                position: horizontal ? 'right' : 'top',
                 color: UI_CHART_TOKENS.muted,
                 fontSize: 10,
             },
@@ -4647,7 +4670,7 @@ function buildBarChartOptions(data, multiSeries) {
                 },
                 label: {
                     show: true,
-                    position: 'top',
+                    position: horizontal ? 'right' : 'top',
                     color: '#374151',
                     fontSize: 12,
                 },
@@ -4656,8 +4679,8 @@ function buildBarChartOptions(data, multiSeries) {
     return {
         animation: true,
         grid: {
-            left: 8,
-            right: 8,
+            left: horizontal ? 16 : 8,
+            right: horizontal ? 40 : 8,
             top: isMulti ? 40 : 16,
             bottom: showScroll ? 46 : 32,
             containLabel: true,
@@ -4677,18 +4700,16 @@ function buildBarChartOptions(data, multiSeries) {
             dataZoom: [
                 {
                     type: 'inside',
-                    xAxisIndex: [0],
+                    ...(horizontal ? { yAxisIndex: [0] } : { xAxisIndex: [0] }),
                     start: 0,
                     end: zoomEnd,
                 },
                 {
                     type: 'slider',
                     show: true,
-                    xAxisIndex: [0],
+                    ...(horizontal ? { yAxisIndex: [0], right: 10, width: 16 } : { xAxisIndex: [0], bottom: 10, height: 16 }),
                     start: 0,
                     end: zoomEnd,
-                    bottom: 10,
-                    height: 16,
                     fillerColor: 'rgba(97, 102, 31, 0.2)',
                     borderColor: 'transparent',
                     backgroundColor: 'rgba(97, 102, 31, 0.05)',
@@ -4742,57 +4763,72 @@ function buildBarChartOptions(data, multiSeries) {
         padding: 10px 12px;
       `,
         },
-        xAxis: {
-            type: 'category',
-            data: xAxisData,
-            axisLine: {
-                show: true,
-            },
-            axisTick: {
-                show: true,
-            },
-            splitLine: {
-                show: true,
-                lineStyle: {
+        xAxis: horizontal
+            ? {
+                type: 'value',
+                axisLine: { show: true },
+                axisTick: { show: true },
+                splitLine: {
+                    show: true,
+                    lineStyle: { color: UI_CHART_TOKENS.muted, type: 'dashed', width: 1, opacity: 0.1 },
+                },
+                axisLabel: {
                     color: UI_CHART_TOKENS.muted,
-                    type: 'dashed',
-                    width: 1,
-                    opacity: 0.1,
+                    fontSize: 12,
+                    fontFamily: UI_CHART_TOKENS.fontFamily,
                 },
-            },
-            axisLabel: {
-                color: UI_CHART_TOKENS.muted,
-                fontSize: 12,
-                fontFamily: UI_CHART_TOKENS.fontFamily,
-                interval: 0,
-                rotate: data.length > 6 ? 45 : 0,
-                width: 80,
-                overflow: 'truncate',
-            },
-        },
-        yAxis: {
-            type: 'value',
-            axisLine: {
-                show: true,
-            },
-            axisTick: {
-                show: true,
-            },
-            splitLine: {
-                show: true,
-                lineStyle: {
+            }
+            : {
+                type: 'category',
+                data: xAxisData,
+                axisLine: { show: true },
+                axisTick: { show: true },
+                splitLine: {
+                    show: true,
+                    lineStyle: { color: UI_CHART_TOKENS.muted, type: 'dashed', width: 1, opacity: 0.1 },
+                },
+                axisLabel: {
                     color: UI_CHART_TOKENS.muted,
-                    type: 'dashed',
-                    width: 1,
-                    opacity: 0.1,
+                    fontSize: 12,
+                    fontFamily: UI_CHART_TOKENS.fontFamily,
+                    interval: 0,
+                    rotate: data.length > 6 ? 45 : 0,
+                    width: 80,
+                    overflow: 'truncate',
                 },
             },
-            axisLabel: {
-                color: UI_CHART_TOKENS.muted,
-                fontSize: 12,
-                fontFamily: UI_CHART_TOKENS.fontFamily,
+        yAxis: horizontal
+            ? {
+                type: 'category',
+                data: xAxisData,
+                axisLine: { show: true },
+                axisTick: { show: true },
+                splitLine: {
+                    show: true,
+                    lineStyle: { color: UI_CHART_TOKENS.muted, type: 'dashed', width: 1, opacity: 0.1 },
+                },
+                axisLabel: {
+                    color: UI_CHART_TOKENS.muted,
+                    fontSize: 12,
+                    fontFamily: UI_CHART_TOKENS.fontFamily,
+                    width: 100,
+                    overflow: 'truncate',
+                },
+            }
+            : {
+                type: 'value',
+                axisLine: { show: true },
+                axisTick: { show: true },
+                splitLine: {
+                    show: true,
+                    lineStyle: { color: UI_CHART_TOKENS.muted, type: 'dashed', width: 1, opacity: 0.1 },
+                },
+                axisLabel: {
+                    color: UI_CHART_TOKENS.muted,
+                    fontSize: 12,
+                    fontFamily: UI_CHART_TOKENS.fontFamily,
+                },
             },
-        },
         series: series,
     };
 }
@@ -4800,18 +4836,20 @@ class BarChart {
     title = input('Bar Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
     multiSeries = input(...(ngDevMode ? [undefined, { debugName: "multiSeries" }] : []));
+    horizontal = input(false, ...(ngDevMode ? [{ debugName: "horizontal" }] : []));
     isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
     toggleExpand = () => this.isExpanded.update(v => !v);
-    options = computed(() => buildBarChartOptions(this.data(), this.multiSeries()), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    options = computed(() => buildBarChartOptions(this.data(), this.multiSeries(), this.horizontal()), ...(ngDevMode ? [{ debugName: "options" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"bar-chart-header\">\r\n    <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"bar-chart-header\">\r\n    <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, decorators: [{
             type: Component,
             args: [{ selector: 'lib-bar-chart', imports: [BaseChart], template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"bar-chart-header\">\r\n    <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], multiSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSeries", required: false }] }] } });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], multiSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSeries", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }] } });
 
-function buildLineChartOptions(data) {
+function buildLineChartOptions(data, multiSeries) {
+    const isMulti = !!multiSeries && multiSeries.length > 0;
     const showScroll = data.length > 12;
     const zoomEnd = showScroll ? Math.floor((12 / data.length) * 100) : 100;
     return {
@@ -4820,10 +4858,21 @@ function buildLineChartOptions(data) {
         grid: {
             left: 16,
             right: 16,
-            top: 20,
+            top: isMulti ? 40 : 20,
             bottom: showScroll ? 46 : 16,
             containLabel: true,
         },
+        legend: {
+            show: isMulti,
+            top: 0,
+            icon: 'circle',
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle: {
+                color: UI_CHART_TOKENS.muted,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
+            }
+        },
         ...(showScroll && {
             dataZoom: [
                 {
@@ -4957,43 +5006,69 @@ function buildLineChartOptions(data) {
                 },
             },
         },
-        series: [
-            {
+        series: isMulti
+            ? multiSeries.map((s, index) => ({
+                name: s.name,
                 type: 'line',
                 smooth: true,
-                symbol: data.length === 1 ? 'circle' : 'none',
-                symbolSize: 8,
-                data: data.map(item => item.value),
+                symbol: 'circle',
+                symbolSize: 6,
+                data: s.data,
                 itemStyle: {
-                    color: UI_CHART_TOKENS.secondary,
+                    color: s.color || UI_CHART_TOKENS.donutPalette[index % UI_CHART_TOKENS.donutPalette.length],
                 },
                 lineStyle: {
-                    color: UI_CHART_TOKENS.secondary,
+                    color: s.color || UI_CHART_TOKENS.donutPalette[index % UI_CHART_TOKENS.donutPalette.length],
                     width: 2,
                 },
-                areaStyle: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        { offset: 0, color: UI_CHART_TOKENS.areaTop },
-                        { offset: 1, color: UI_CHART_TOKENS.areaBottom },
-                    ]),
+                emphasis: {
+                    focus: 'series',
+                    itemStyle: {
+                        borderWidth: 2,
+                        borderColor: '#fff',
+                        shadowBlur: 6,
+                        shadowColor: 'rgba(0,0,0,0.15)',
+                    },
                 },
-            },
-        ],
+            }))
+            : [
+                {
+                    type: 'line',
+                    smooth: true,
+                    symbol: data.length === 1 ? 'circle' : 'none',
+                    symbolSize: 8,
+                    data: data.map(item => item.value),
+                    itemStyle: {
+                        color: UI_CHART_TOKENS.secondary,
+                    },
+                    lineStyle: {
+                        color: UI_CHART_TOKENS.secondary,
+                        width: 2,
+                    },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: UI_CHART_TOKENS.areaTop },
+                            { offset: 1, color: UI_CHART_TOKENS.areaBottom },
+                        ]),
+                    },
+                },
+            ],
     };
 }
 class LineChart {
     title = input('Line Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    multiSeries = input(...(ngDevMode ? [undefined, { debugName: "multiSeries" }] : []));
     isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
     toggleExpand = () => this.isExpanded.update(v => !v);
-    options = computed(() => buildLineChartOptions(this.data()), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    options = computed(() => buildLineChartOptions(this.data(), this.multiSeries()), ...(ngDevMode ? [{ debugName: "options" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LineChart, isStandalone: true, selector: "lib-line-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"line-chart-header\">\r\n    <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LineChart, isStandalone: true, selector: "lib-line-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"line-chart-header\">\r\n    <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, decorators: [{
             type: Component,
             args: [{ selector: 'lib-line-chart', imports: [BaseChart], template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"line-chart-header\">\r\n    <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], multiSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSeries", required: false }] }] } });
 
 function getTotal(data) {
     return data.reduce((acc, item) => acc + item.value, 0);
@@ -5223,6 +5298,7 @@ function buildHeatmapOptions(config) {
         xAxis: {
             type: 'category',
             data: xLabels,
+            position: 'top',
             splitArea: {
                 show: true,
                 areaStyle: {
@@ -5259,10 +5335,9 @@ function buildHeatmapOptions(config) {
         visualMap: {
             min: minVal,
             max: maxVal,
-            calculable: true,
-            orient: 'vertical',
-            right: 0,
-            top: 'center',
+            orient: 'horizontal',
+            left: 'center',
+            bottom: '0',
             itemWidth: 12,
             itemHeight: 120,
             textStyle: {
@@ -5315,11 +5390,11 @@ class Heatmap {
     }
     options = computed(() => buildHeatmapOptions(this.config()), ...(ngDevMode ? [{ debugName: "options" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Heatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Heatmap, isStandalone: true, selector: "lib-heatmap", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"heatmap-header\">\r\n    <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Heatmap, isStandalone: true, selector: "lib-heatmap", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"heatmap-header\">\r\n      <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Heatmap, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-heatmap', imports: [BaseChart], template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"heatmap-header\">\r\n    <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
+            args: [{ selector: 'lib-heatmap', imports: [BaseChart], template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"heatmap-header\">\r\n      <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
 class GeoAPIMaps {
@@ -5501,7 +5576,7 @@ class TableChart {
         this.localPage.set(page);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableChart, isStandalone: true, selector: "lib-table-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, collapsedRows: { classPropertyName: "collapsedRows", publicName: "collapsedRows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-chart-container\" [class.expanded]=\"isExpanded()\">\n    <div class=\"table-chart-header\">\n        <h3 class=\"table-chart-title\">{{ title() }}</h3>\n        <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\"\n            [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\n            @if (isExpanded()) {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"lucide lucide-minimize-2\">\n                <polyline points=\"4 14 10 14 10 20\" />\n                <polyline points=\"20 10 14 10 14 4\" />\n                <line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\" />\n                <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n            </svg>\n            } @else {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"lucide lucide-maximize-2\">\n                <polyline points=\"15 3 21 3 21 9\" />\n                <polyline points=\"9 21 3 21 3 15\" />\n                <line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\" />\n                <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n            </svg>\n            }\n        </button>\n    </div>\n    <div class=\"chart-wrapper\">\n        @if (data().length > 0) {\n        <lib-table [columns]=\"columns()\" [data]=\"displayedData()\" [showActions]=\"false\" />\n        @if (isExpanded() && totalItems() > itemsPerPage()) {\n        <lib-pagination [totalItems]=\"totalItems()\" [pageSize]=\"itemsPerPage()\" [(page)]=\"localPage\" />\n        }\n        } @else {\n        <div class=\"no-data\">\n            <lib-not-found-section [showButton]=\"false\" />\n        </div>\n        }\n    </div>\n</div>\n@if (isExpanded()) {\n<div class=\"overlay\" (click)=\"toggleExpand()\"></div>\n}", styles: [":host{display:block;width:100%;height:100%;min-width:0}.table-chart-container{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease;box-sizing:border-box}.table-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;min-width:0;overflow:auto}.table-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.table-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.table-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.no-data{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: Table, selector: "lib-table", inputs: ["columns", "data", "actions", "showActions", "statusToneMap", "statusEnumMap", "subColumns", "isRowExpandable", "expandedChildren", "rowIdKey", "showSelection", "showTotals"], outputs: ["optionSelected", "iconAction"] }, { kind: "component", type: NotFoundSection, selector: "lib-not-found-section", inputs: ["showButton", "buttonLabel"], outputs: ["openModal"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["page", "pageSize", "totalItems", "showPageSizeSelector", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableChart, isStandalone: true, selector: "lib-table-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, collapsedRows: { classPropertyName: "collapsedRows", publicName: "collapsedRows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-chart-container\" [class.expanded]=\"isExpanded()\">\n    <div class=\"table-chart-header\">\n        <h3 class=\"table-chart-title\">{{ title() }}</h3>\n        <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\"\n            [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\n            @if (isExpanded()) {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"lucide lucide-minimize-2\">\n                <polyline points=\"4 14 10 14 10 20\" />\n                <polyline points=\"20 10 14 10 14 4\" />\n                <line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\" />\n                <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n            </svg>\n            } @else {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"lucide lucide-maximize-2\">\n                <polyline points=\"15 3 21 3 21 9\" />\n                <polyline points=\"9 21 3 21 3 15\" />\n                <line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\" />\n                <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n            </svg>\n            }\n        </button>\n    </div>\n    <div class=\"chart-wrapper\">\n        @if (data().length > 0) {\n        <lib-table [columns]=\"columns()\" [data]=\"displayedData()\" [showActions]=\"false\" />\n        @if (isExpanded() && totalItems() > itemsPerPage()) {\n        <lib-pagination [totalItems]=\"totalItems()\" [pageSize]=\"itemsPerPage()\" [(page)]=\"localPage\" />\n        }\n        } @else {\n        <div class=\"no-data\">\n            <lib-not-found-section [showButton]=\"false\" />\n        </div>\n        }\n    </div>\n</div>\n@if (isExpanded()) {\n<div class=\"overlay\" (click)=\"toggleExpand()\"></div>\n}", styles: [":host{display:block;width:100%;height:100%;min-width:0}.table-chart-container{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease;box-sizing:border-box}.table-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;min-width:0;overflow:auto}.table-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.table-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.table-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.no-data{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: Table, selector: "lib-table", inputs: ["columns", "data", "actions", "showActions", "statusToneMap", "statusEnumMap", "subColumns", "isRowExpandable", "expandedChildren", "rowIdKey", "showSelection", "showTotals", "columnGroups"], outputs: ["optionSelected", "iconAction", "columnGroupChange"] }, { kind: "component", type: NotFoundSection, selector: "lib-not-found-section", inputs: ["title", "showButton", "buttonLabel"], outputs: ["openModal"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["page", "pageSize", "totalItems", "showPageSizeSelector", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableChart, decorators: [{
             type: Component,
@@ -5619,11 +5694,11 @@ class LoadImage {
         this.zoomScale = 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LoadImage, isStandalone: true, selector: "lib-load-image", inputs: { title: "title", description: "description", recommendedSize: "recommendedSize", titleIcon: "titleIcon", imageUrl: "imageUrl" }, outputs: { imageLoaded: "imageLoaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"load-image-container\">\n  <!-- Header Info -->\n  <div class=\"header-info\">\n    <div class=\"title-section\">\n      <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n      <div class=\"text-group\">\n        <h3 class=\"title\">\n          {{ title }}\n          @if (imageSrc) {\n            <span class=\"badge-cargado\">CARGADO</span>\n          }\n        </h3>\n        <p class=\"description\">{{ description }}</p>\n      </div>\n    </div>\n  </div>\n\n  <hr class=\"divider\" />\n\n  <!-- Upload / Preview Box -->\n  <div class=\"box-area\" \n       [class.empty]=\"!imageSrc\" \n       [class.dragging]=\"isDragging\"\n       (dragover)=\"onDragOver($event)\" \n       (dragleave)=\"onDragLeave($event)\" \n       (drop)=\"onDrop($event)\"\n       (click)=\"!imageSrc ? triggerFileInput() : null\">\n    \n    <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n    <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n    @if (!imageSrc) {\n      <div class=\"upload-state\">\n        <i class=\"icon-big icon-upload\"></i>\n        <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n        <p class=\"upload-hint\">{{ recommendedSize }}</p>\n      </div>\n    }\n\n    <!-- Estado: Cargado (Preview) -->\n    @if (imageSrc) {\n      <div class=\"preview-state\">\n        <img [src]=\"imageSrc\" alt=\"Preview\">\n        \n        <!-- Hover overlay de acciones -->\n        <div class=\"actions-overlay\">\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n            <i class=\"icon-small icon-expand\"></i> Ampliar\n          </button>\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n            <i class=\"icon-small icon-change\"></i> Cambiar\n          </button>\n          <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n            <i class=\"icon-small icon-delete\"></i> Eliminar\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions / Info -->\n  <div class=\"footer-area\">\n    @if (!imageSrc) {\n      <div class=\"footer-text\">\n      </div>\n      <button class=\"btn-subir\" (click)=\"triggerFileInput()\">\n        <i class=\"icon-small icon-upload\"></i> Subir\n      </button>\n    } @else {\n      <div class=\"footer-text-loaded\">\n        <span>Recomendado: 300x100 px</span>\n        <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n@if (isExpanded) {\n  <div class=\"lightbox-overlay\" (click)=\"closeLightbox()\">\n    <!-- Top Bar -->\n    <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <div class=\"zoom-controls\">\n        <button class=\"btn-icon\" (click)=\"zoomIn()\">\n          <i class=\"icon-small icon-plus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomOut()\">\n          <i class=\"icon-small icon-minus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomReset()\">\n          <i class=\"icon-small icon-expand\"></i>\n        </button>\n      </div>\n      <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n    </div>\n\n    <!-- Centro: Imagen Expandida -->\n    <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n      <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n    </div>\n    \n    <!-- Parte Inferior -->\n    <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <span class=\"lightbox-title\">{{ title }}</span>\n      <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n    </div>\n  </div>\n}\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LoadImage, isStandalone: true, selector: "lib-load-image", inputs: { title: "title", description: "description", recommendedSize: "recommendedSize", titleIcon: "titleIcon", imageUrl: "imageUrl" }, outputs: { imageLoaded: "imageLoaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"load-image-container\">\n  <!-- Header Info -->\n  <div class=\"header-info\">\n    <div class=\"title-section\">\n      <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n      <div class=\"text-group\">\n        <h3 class=\"title\">\n          {{ title }}\n          @if (imageSrc) {\n            <span class=\"badge-cargado\">CARGADO</span>\n          }\n        </h3>\n        <p class=\"description\">{{ description }}</p>\n      </div>\n    </div>\n  </div>\n\n  <hr class=\"divider\" />\n\n  <!-- Upload / Preview Box -->\n  <div class=\"box-area\" \n       [class.empty]=\"!imageSrc\" \n       [class.dragging]=\"isDragging\"\n       (dragover)=\"onDragOver($event)\" \n       (dragleave)=\"onDragLeave($event)\" \n       (drop)=\"onDrop($event)\"\n       (click)=\"!imageSrc ? triggerFileInput() : null\">\n    \n    <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n    <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n    @if (!imageSrc) {\n      <div class=\"upload-state\">\n        <i class=\"icon-big icon-upload\"></i>\n        <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n        <p class=\"upload-hint\">{{ recommendedSize }}</p>\n      </div>\n    }\n\n    <!-- Estado: Cargado (Preview) -->\n    @if (imageSrc) {\n      <div class=\"preview-state\">\n        <img [src]=\"imageSrc\" alt=\"Preview\">\n        \n        <!-- Hover overlay de acciones -->\n        <div class=\"actions-overlay\">\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n            <i class=\"icon-small icon-expand\"></i> <span class=\"action-text\">Ampliar</span>\n          </button>\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n            <i class=\"icon-small icon-change\"></i> <span class=\"action-text\">Cambiar</span>\n          </button>\n          <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n            <i class=\"icon-small icon-delete\"></i> <span class=\"action-text\">Eliminar</span>\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions / Info -->\n  <div class=\"footer-area\">\n    @if (!imageSrc) {\n      <div class=\"footer-text\">\n      </div>\n      <button class=\"btn-subir\" (click)=\"triggerFileInput()\">\n        <i class=\"icon-small icon-upload\"></i> Subir\n      </button>\n    } @else {\n      <div class=\"footer-text-loaded\">\n        <span>Recomendado: 300x100 px</span>\n        <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n@if (isExpanded) {\n  <div class=\"lightbox-overlay\" (click)=\"closeLightbox()\">\n    <!-- Top Bar -->\n    <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <div class=\"zoom-controls\">\n        <button class=\"btn-icon\" (click)=\"zoomIn()\">\n          <i class=\"icon-small icon-plus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomOut()\">\n          <i class=\"icon-small icon-minus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomReset()\">\n          <i class=\"icon-small icon-expand\"></i>\n        </button>\n      </div>\n      <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n    </div>\n\n    <!-- Centro: Imagen Expandida -->\n    <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n      <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n    </div>\n    \n    <!-- Parte Inferior -->\n    <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <span class=\"lightbox-title\">{{ title }}</span>\n      <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n    </div>\n  </div>\n}\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}@media (max-width: 360px){.actions-overlay .action-text{display:none}.actions-overlay .action-btn{padding:8px;gap:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadImage, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-load-image', imports: [CommonModule], template: "<div class=\"load-image-container\">\n  <!-- Header Info -->\n  <div class=\"header-info\">\n    <div class=\"title-section\">\n      <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n      <div class=\"text-group\">\n        <h3 class=\"title\">\n          {{ title }}\n          @if (imageSrc) {\n            <span class=\"badge-cargado\">CARGADO</span>\n          }\n        </h3>\n        <p class=\"description\">{{ description }}</p>\n      </div>\n    </div>\n  </div>\n\n  <hr class=\"divider\" />\n\n  <!-- Upload / Preview Box -->\n  <div class=\"box-area\" \n       [class.empty]=\"!imageSrc\" \n       [class.dragging]=\"isDragging\"\n       (dragover)=\"onDragOver($event)\" \n       (dragleave)=\"onDragLeave($event)\" \n       (drop)=\"onDrop($event)\"\n       (click)=\"!imageSrc ? triggerFileInput() : null\">\n    \n    <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n    <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n    @if (!imageSrc) {\n      <div class=\"upload-state\">\n        <i class=\"icon-big icon-upload\"></i>\n        <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n        <p class=\"upload-hint\">{{ recommendedSize }}</p>\n      </div>\n    }\n\n    <!-- Estado: Cargado (Preview) -->\n    @if (imageSrc) {\n      <div class=\"preview-state\">\n        <img [src]=\"imageSrc\" alt=\"Preview\">\n        \n        <!-- Hover overlay de acciones -->\n        <div class=\"actions-overlay\">\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n            <i class=\"icon-small icon-expand\"></i> Ampliar\n          </button>\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n            <i class=\"icon-small icon-change\"></i> Cambiar\n          </button>\n          <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n            <i class=\"icon-small icon-delete\"></i> Eliminar\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions / Info -->\n  <div class=\"footer-area\">\n    @if (!imageSrc) {\n      <div class=\"footer-text\">\n      </div>\n      <button class=\"btn-subir\" (click)=\"triggerFileInput()\">\n        <i class=\"icon-small icon-upload\"></i> Subir\n      </button>\n    } @else {\n      <div class=\"footer-text-loaded\">\n        <span>Recomendado: 300x100 px</span>\n        <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n@if (isExpanded) {\n  <div class=\"lightbox-overlay\" (click)=\"closeLightbox()\">\n    <!-- Top Bar -->\n    <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <div class=\"zoom-controls\">\n        <button class=\"btn-icon\" (click)=\"zoomIn()\">\n          <i class=\"icon-small icon-plus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomOut()\">\n          <i class=\"icon-small icon-minus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomReset()\">\n          <i class=\"icon-small icon-expand\"></i>\n        </button>\n      </div>\n      <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n    </div>\n\n    <!-- Centro: Imagen Expandida -->\n    <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n      <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n    </div>\n    \n    <!-- Parte Inferior -->\n    <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <span class=\"lightbox-title\">{{ title }}</span>\n      <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n    </div>\n  </div>\n}\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}\n"] }]
+            args: [{ selector: 'lib-load-image', imports: [CommonModule], template: "<div class=\"load-image-container\">\n  <!-- Header Info -->\n  <div class=\"header-info\">\n    <div class=\"title-section\">\n      <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n      <div class=\"text-group\">\n        <h3 class=\"title\">\n          {{ title }}\n          @if (imageSrc) {\n            <span class=\"badge-cargado\">CARGADO</span>\n          }\n        </h3>\n        <p class=\"description\">{{ description }}</p>\n      </div>\n    </div>\n  </div>\n\n  <hr class=\"divider\" />\n\n  <!-- Upload / Preview Box -->\n  <div class=\"box-area\" \n       [class.empty]=\"!imageSrc\" \n       [class.dragging]=\"isDragging\"\n       (dragover)=\"onDragOver($event)\" \n       (dragleave)=\"onDragLeave($event)\" \n       (drop)=\"onDrop($event)\"\n       (click)=\"!imageSrc ? triggerFileInput() : null\">\n    \n    <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n    <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n    @if (!imageSrc) {\n      <div class=\"upload-state\">\n        <i class=\"icon-big icon-upload\"></i>\n        <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n        <p class=\"upload-hint\">{{ recommendedSize }}</p>\n      </div>\n    }\n\n    <!-- Estado: Cargado (Preview) -->\n    @if (imageSrc) {\n      <div class=\"preview-state\">\n        <img [src]=\"imageSrc\" alt=\"Preview\">\n        \n        <!-- Hover overlay de acciones -->\n        <div class=\"actions-overlay\">\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n            <i class=\"icon-small icon-expand\"></i> <span class=\"action-text\">Ampliar</span>\n          </button>\n          <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n            <i class=\"icon-small icon-change\"></i> <span class=\"action-text\">Cambiar</span>\n          </button>\n          <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n            <i class=\"icon-small icon-delete\"></i> <span class=\"action-text\">Eliminar</span>\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions / Info -->\n  <div class=\"footer-area\">\n    @if (!imageSrc) {\n      <div class=\"footer-text\">\n      </div>\n      <button class=\"btn-subir\" (click)=\"triggerFileInput()\">\n        <i class=\"icon-small icon-upload\"></i> Subir\n      </button>\n    } @else {\n      <div class=\"footer-text-loaded\">\n        <span>Recomendado: 300x100 px</span>\n        <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n@if (isExpanded) {\n  <div class=\"lightbox-overlay\" (click)=\"closeLightbox()\">\n    <!-- Top Bar -->\n    <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <div class=\"zoom-controls\">\n        <button class=\"btn-icon\" (click)=\"zoomIn()\">\n          <i class=\"icon-small icon-plus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomOut()\">\n          <i class=\"icon-small icon-minus\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"zoomReset()\">\n          <i class=\"icon-small icon-expand\"></i>\n        </button>\n      </div>\n      <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n    </div>\n\n    <!-- Centro: Imagen Expandida -->\n    <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n      <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n    </div>\n    \n    <!-- Parte Inferior -->\n    <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n      <span class=\"lightbox-title\">{{ title }}</span>\n      <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n    </div>\n  </div>\n}\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}@media (max-width: 360px){.actions-overlay .action-text{display:none}.actions-overlay .action-btn{padding:8px;gap:0}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input$1
             }], description: [{
@@ -5641,6 +5716,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['fileInput']
             }] } });
 
+class PdfViewerService {
+    showModalDocuments = signal(false, ...(ngDevMode ? [{ debugName: "showModalDocuments" }] : []));
+    selectedPdf = signal(null, ...(ngDevMode ? [{ debugName: "selectedPdf" }] : []));
+    openModal() {
+        this.showModalDocuments.set(true);
+    }
+    closeModal() {
+        this.showModalDocuments.set(false);
+    }
+    setSelectedPdf(pdf) {
+        this.selectedPdf.set(pdf);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfViewerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfViewerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class PdfViewer {
+    pdfViewerService = inject(PdfViewerService);
+    sanitizer = inject(DomSanitizer);
+    get isShowModal() {
+        return this.pdfViewerService.showModalDocuments();
+    }
+    pdf = computed(() => this.pdfViewerService.selectedPdf(), ...(ngDevMode ? [{ debugName: "pdf" }] : []));
+    getSafePdfUrl(url) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+    closeModal() {
+        this.pdfViewerService.closeModal();
+        this.pdfViewerService.setSelectedPdf(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PdfViewer, isStandalone: true, selector: "lib-pdf-viewer", ngImport: i0, template: "@if (isShowModal) {\r\n<section class=\"modal-container\" (click)=\"closeModal()\">\r\n  <div class=\"modal-content\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <h1>{{ pdf()?.name || 'Documento' }}</h1>\r\n      <button type=\"button\" class=\"close-btn\" (click)=\"closeModal()\">\r\n        &times;\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      @if (pdf(); as doc) {\r\n      <iframe [src]=\"getSafePdfUrl(doc.url)\" class=\"pdf-viewer\" frameborder=\"0\" width=\"100%\" height=\"700px\"></iframe>\r\n      } @else {\r\n      <p>No hay documento disponible</p>\r\n      }\r\n    </div>\r\n  </div>\r\n</section>\r\n}", styles: [".modal-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background-color:#00000080;display:flex;justify-content:center;align-items:center;opacity:1;transition:opacity .3s ease}.modal-content{width:80%;height:80%;background-color:#ebe8d6;border-radius:20px;box-shadow:0 4px 20px #0000004d;margin:20px;display:flex;flex-direction:column;overflow:hidden;animation:slideIn .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #c7c7ad;border-radius:20px 20px 0 0;flex-shrink:0}.modal-header h1{margin:0;font-size:2rem;color:#333}.close-btn{background:none;border:none;font-size:2rem;cursor:pointer;color:#666;transition:color .2s ease;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.close-btn:hover{color:#333;background-color:#0000001a}.modal-body{padding:20px;overflow:auto;flex:1;display:flex;flex-direction:column}.pdf-viewer{width:100%;height:100%;border:none;border-radius:0}@media (max-width: 850px){.modal-content{width:95vw;height:90vh;margin:10px}.modal-header h1{font-size:1.4rem}}@media (max-width: 480px){.modal-content{width:95vw;height:90vh}.modal-header h1{font-size:1.2rem}}@keyframes slideIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfViewer, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-pdf-viewer', imports: [CommonModule], template: "@if (isShowModal) {\r\n<section class=\"modal-container\" (click)=\"closeModal()\">\r\n  <div class=\"modal-content\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"modal-header\">\r\n      <h1>{{ pdf()?.name || 'Documento' }}</h1>\r\n      <button type=\"button\" class=\"close-btn\" (click)=\"closeModal()\">\r\n        &times;\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      @if (pdf(); as doc) {\r\n      <iframe [src]=\"getSafePdfUrl(doc.url)\" class=\"pdf-viewer\" frameborder=\"0\" width=\"100%\" height=\"700px\"></iframe>\r\n      } @else {\r\n      <p>No hay documento disponible</p>\r\n      }\r\n    </div>\r\n  </div>\r\n</section>\r\n}", styles: [".modal-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background-color:#00000080;display:flex;justify-content:center;align-items:center;opacity:1;transition:opacity .3s ease}.modal-content{width:80%;height:80%;background-color:#ebe8d6;border-radius:20px;box-shadow:0 4px 20px #0000004d;margin:20px;display:flex;flex-direction:column;overflow:hidden;animation:slideIn .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #c7c7ad;border-radius:20px 20px 0 0;flex-shrink:0}.modal-header h1{margin:0;font-size:2rem;color:#333}.close-btn{background:none;border:none;font-size:2rem;cursor:pointer;color:#666;transition:color .2s ease;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.close-btn:hover{color:#333;background-color:#0000001a}.modal-body{padding:20px;overflow:auto;flex:1;display:flex;flex-direction:column}.pdf-viewer{width:100%;height:100%;border:none;border-radius:0}@media (max-width: 850px){.modal-content{width:95vw;height:90vh;margin:10px}.modal-header h1{font-size:1.4rem}}@media (max-width: 480px){.modal-content{width:95vw;height:90vh}.modal-header h1{font-size:1.2rem}}@keyframes slideIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}\n"] }]
+        }] });
+
 // src/app/components/public-api.ts
 // Exportar los componentes
 
@@ -5648,5 +5767,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
+export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, PdfViewer, PdfViewerService, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map