sapenlinea-components 0.7.70 → 0.8.72

package/README.md

@@ -1349,3 +1349,86 @@ La paleta compartida por todas las gráficas incluye: olive green, lime soft, bu
 
 **Eventos Globales:**
 Todos los componentes de gráficas emiten el evento `chartClick`, permitiendo capturar clics en secciones específicas para lógicas personalizadas en el padre.
+
+---
+
+### 37. `lib-quick-access-cards` (QuickAccessCards)
+
+**Qué hace**  
+Componente de **accesos rápidos** que renderiza un grid de tarjetas (`lib-option-card` en modo `quick-access`) con hasta **4 columnas** por fila. Si hay más de 4 items, los restantes se posicionan en la siguiente fila. Los íconos se definen mediante un **nombre de clase CSS** en lugar de SVG inline, simplificando la configuración significativamente.
+
+**Selector:** `lib-quick-access-cards`
+
+**Inputs:**
+
+| Input | Tipo | Default | Descripción |
+|---|---|---|---|
+| `title` | `string` | `'Accesos Rápidos'` | Título visible sobre el grid de tarjetas |
+| `items` | `QuickAccessItem[]` | `[]` | Lista de accesos rápidos a renderizar |
+
+**Outputs:**
+
+- `clickAction: EventEmitter<QuickAccessItem>` – Emite el item completo al hacer clic en una tarjeta.
+
+**Interfaz:**
+
+```ts
+export interface QuickAccessItem {
+  id: string;
+  label: string;
+  description: string;
+  icon: string;       // Nombre de clase CSS del ícono, ej. 'icon-building'
+  iconBg?: string;    // Color de fondo del contenedor del ícono
+}
+```
+
+**Íconos disponibles:**
+
+| Clase | Descripción |
+|---|---|
+| `icon-settings` | Configuración / engranaje |
+| `icon-check` | Check / verificado |
+| `icon-close` | Cerrar / X |
+| `icon-info` | Información |
+| `icon-alert` | Alerta / triángulo |
+| `icon-star` | Estrella |
+| `icon-users` | Usuarios / personas |
+| `icon-building` | Edificio / organismo |
+| `icon-car` | Vehículo |
+| `icon-shield` | Escudo / seguridad |
+| `icon-clipboard` | Portapapeles |
+| `icon-map-pin` | Ubicación / mapa |
+| `icon-chart` | Gráfica de barras |
+| `icon-file` | Documento / archivo |
+| `icon-refresh` | Refrescar / recargar |
+| `icon-edit` | Editar / lápiz |
+| `icon-search` | Buscar / lupa |
+
+**Ejemplo de uso:**
+
+```ts
+import { QuickAccessCards, QuickAccessItem } from 'sapenlinea-components';
+
+quickAccessItems: QuickAccessItem[] = [
+  { id: '1', label: 'Organismo de tránsito', description: 'Información del organismo', icon: 'icon-building', iconBg: '#00695c' },
+  { id: '2', label: 'Usuarios', description: 'Administración de usuarios', icon: 'icon-users', iconBg: '#0d47a1' },
+  { id: '3', label: 'Roles', description: 'Administración de roles', icon: 'icon-shield', iconBg: '#f57f17' },
+  { id: '4', label: 'Reportes', description: 'Generación de reportes', icon: 'icon-chart', iconBg: '#b71c1c' },
+];
+```
+
+```html
+<lib-quick-access-cards
+  [title]="'Accesos Rápidos'"
+  [items]="quickAccessItems"
+  (clickAction)="onQuickAccess($event)" />
+```
+
+**Comportamiento responsive:**
+
+| Ancho de pantalla | Columnas |
+|---|---|
+| > 1200px | 4 columnas |
+| 900px – 1200px | 3 columnas |
+| 600px – 900px | 2 columnas |
+| < 600px | 1 columna |

package/fesm2022/sapenlinea-components.mjs

@@ -4513,6 +4513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }] });
 
 class OptionCard {
+    mode = input('default', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
     buttonBg = input(...(ngDevMode ? [undefined, { debugName: "buttonBg" }] : []));
@@ -4522,12 +4523,27 @@ class OptionCard {
         this.clickAction.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OptionCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: OptionCard, isStandalone: true, selector: "lib-option-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonBg: { classPropertyName: "buttonBg", publicName: "buttonBg", isSignal: true, isRequired: false, transformFunction: null }, iconBg: { classPropertyName: "iconBg", publicName: "iconBg", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickAction: "clickAction" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"option-btn\"\r\n  (click)=\"onClick()\"\r\n  [style.--btn-bg]=\"buttonBg()\"\r\n  [style.--icon-bg]=\"iconBg()\"\r\n>\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-icon\">\r\n    <ng-content select=\"[icon]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Contenido -->\r\n  <div class=\"option-btn-content\">\r\n    <div class=\"option-btn-header\">\r\n      <h3 class=\"option-btn-title\">\r\n        {{ label() }}\r\n      </h3>\r\n\r\n      <span class=\"option-btn-chevron\">\u203A</span>\r\n    </div>\r\n\r\n    @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n    }\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #596300);color:var(--surface, #ffffff)}.option-btn-icon ::ng-deep svg{stroke:currentColor}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: OptionCard, isStandalone: true, selector: "lib-option-card", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonBg: { classPropertyName: "buttonBg", publicName: "buttonBg", isSignal: true, isRequired: false, transformFunction: null }, iconBg: { classPropertyName: "iconBg", publicName: "iconBg", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickAction: "clickAction" }, ngImport: i0, template: "<button type=\"button\" class=\"option-btn\" (click)=\"onClick()\" [style.--btn-bg]=\"buttonBg()\" [style.--icon-bg]=\"iconBg()\">\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-wrapper\" [class.option-btn-wrapper--quick-access]=\"mode() === 'quick-access'\">\r\n    <div class=\"option-btn-icon\">\r\n      <ng-content select=\"[icon]\"></ng-content>\r\n    </div>\r\n\r\n\r\n    <!-- Contenido -->\r\n    <div class=\"option-btn-content\">\r\n      <div class=\"option-btn-header\">\r\n        <h3 class=\"option-btn-title\">\r\n          {{ label() }}\r\n        </h3>\r\n\r\n        @if (mode() === 'default') {\r\n        <span class=\"option-btn-chevron\">\u203A</span>\r\n        }\r\n      </div>\r\n\r\n      @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n      }\r\n    </div>\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-wrapper{display:flex;align-items:flex-start;gap:16px}.option-btn-wrapper--quick-access{display:flex;flex-direction:column;gap:16px;padding:8px}.option-btn-wrapper--quick-access .option-btn-icon svg{width:24px;height:24px}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #596300);color:var(--surface, #ffffff)}.option-btn-icon ::ng-deep svg{stroke:currentColor}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OptionCard, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-option-card', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  type=\"button\"\r\n  class=\"option-btn\"\r\n  (click)=\"onClick()\"\r\n  [style.--btn-bg]=\"buttonBg()\"\r\n  [style.--icon-bg]=\"iconBg()\"\r\n>\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-icon\">\r\n    <ng-content select=\"[icon]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Contenido -->\r\n  <div class=\"option-btn-content\">\r\n    <div class=\"option-btn-header\">\r\n      <h3 class=\"option-btn-title\">\r\n        {{ label() }}\r\n      </h3>\r\n\r\n      <span class=\"option-btn-chevron\">\u203A</span>\r\n    </div>\r\n\r\n    @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n    }\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #596300);color:var(--surface, #ffffff)}.option-btn-icon ::ng-deep svg{stroke:currentColor}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], buttonBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonBg", required: false }] }], iconBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBg", required: false }] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
+            args: [{ selector: 'lib-option-card', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"option-btn\" (click)=\"onClick()\" [style.--btn-bg]=\"buttonBg()\" [style.--icon-bg]=\"iconBg()\">\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-wrapper\" [class.option-btn-wrapper--quick-access]=\"mode() === 'quick-access'\">\r\n    <div class=\"option-btn-icon\">\r\n      <ng-content select=\"[icon]\"></ng-content>\r\n    </div>\r\n\r\n\r\n    <!-- Contenido -->\r\n    <div class=\"option-btn-content\">\r\n      <div class=\"option-btn-header\">\r\n        <h3 class=\"option-btn-title\">\r\n          {{ label() }}\r\n        </h3>\r\n\r\n        @if (mode() === 'default') {\r\n        <span class=\"option-btn-chevron\">\u203A</span>\r\n        }\r\n      </div>\r\n\r\n      @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n      }\r\n    </div>\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-wrapper{display:flex;align-items:flex-start;gap:16px}.option-btn-wrapper--quick-access{display:flex;flex-direction:column;gap:16px;padding:8px}.option-btn-wrapper--quick-access .option-btn-icon svg{width:24px;height:24px}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #596300);color:var(--surface, #ffffff)}.option-btn-icon ::ng-deep svg{stroke:currentColor}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], buttonBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonBg", required: false }] }], iconBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBg", required: false }] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
+
+class QuickAccessCards {
+    title = input('Accesos Rápidos', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    clickAction = output();
+    onOptionClick(item) {
+        this.clickAction.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickAccessCards, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: QuickAccessCards, isStandalone: true, selector: "lib-quick-access-cards", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickAction: "clickAction" }, ngImport: i0, template: "<h2 class=\"quick-access-title\">{{ title() }}</h2>\n<div class=\"quick-access-grid\">\n    @for (item of items(); track item.id) {\n        <lib-option-card [label]=\"item.label\" [description]=\"item.description\" [iconBg]=\"item.iconBg\"\n            [mode]=\"'quick-access'\" (clickAction)=\"onOptionClick(item)\">\n            <span icon [class]=\"item.icon\"></span>\n        </lib-option-card>\n    }\n</div>", styles: [":host{display:block}.quick-access-title{font-family:Manrope,sans-serif;font-weight:700;font-size: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"] }] });
+}
+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"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
 
 echarts.use([
     BarChart$1,
@@ -5462,19 +5478,20 @@ class TableChart {
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
     totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
     itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : []));
+    collapsedRows = input(7, ...(ngDevMode ? [{ debugName: "collapsedRows" }] : []));
     isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
     localPage = signal(1, ...(ngDevMode ? [{ debugName: "localPage" }] : []));
     toggleExpand() {
         this.isExpanded.update((value) => !value);
         if (!this.isExpanded()) {
-            this.localPage.set(1); // Reset page on collapse
+            this.localPage.set(1);
         }
     }
     displayedData = computed(() => {
         const isExpanded = this.isExpanded();
         const data = this.data();
         if (!isExpanded) {
-            return data.slice(0, 8);
+            return data.slice(0, this.collapsedRows());
         }
         const pageSize = this.itemsPerPage();
         const start = (this.localPage() - 1) * pageSize;
@@ -5484,12 +5501,12 @@ 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 } }, 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"], 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableChart, decorators: [{
             type: Component,
             args: [{ selector: 'lib-table-chart', imports: [Table, NotFoundSection, PaginationComponent], 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"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }] } });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], collapsedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedRows", required: false }] }] } });
 
 const Colors = {
     primary: '#4B5E05',
@@ -5631,5 +5648,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
+export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map