sapenlinea-components 0.9.75 → 0.9.77

package/fesm2022/sapenlinea-components.mjs

@@ -8,7 +8,7 @@ import PubSub from 'pubsub-js';
 import { BarChart as BarChart$1, LineChart as LineChart$1, PieChart, HeatmapChart } from 'echarts/charts';
 import * as echarts from 'echarts/core';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
-import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent, VisualMapComponent, LegendComponent } from 'echarts/components';
+import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent, VisualMapComponent, LegendComponent, TitleComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -584,9 +584,10 @@ class DateTimePicker {
     // Estado AM/PM
     selectedAmPm = signal('AM', ...(ngDevMode ? [{ debugName: "selectedAmPm" }] : []));
     documentClickListener;
+    resizeListener;
     /**
      * Valor que se muestra en el campo de texto.
-     * Siempre muestra la fecha en formato DD/MM/YYYY.
+     * Modo 'date': DD/MM/YYYY. Modo 'datetime': DD/MM/YYYY HH:MM (24h).
      */
     displayValue = computed(() => {
         const text = this.inputTextValue().trim();
@@ -596,10 +597,7 @@ class DateTimePicker {
         const date = this.selectedDate();
         if (!date)
             return '';
-        const day = date.getDate().toString().padStart(2, '0');
-        const month = (date.getMonth() + 1).toString().padStart(2, '0');
-        const year = date.getFullYear();
-        return `${day}/${month}/${year}`;
+        return this.formatDateForInput(date);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
     monthName = computed(() => {
         const months = [
@@ -654,6 +652,7 @@ class DateTimePicker {
     }
     ngOnDestroy() {
         this.removeDocumentListener();
+        this.removePositioningListeners();
     }
     writeValue(value) {
         let date = null;
@@ -698,11 +697,10 @@ class DateTimePicker {
         if (this.isBlocked())
             return;
         this.markAsTouched();
-        const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        const spaceBelow = window.innerHeight - rect.bottom;
-        this.openUpward.set(spaceBelow < 420);
+        this.updatePosition();
         this.isOpen.set(true);
         this.addDocumentListener();
+        this.addPositioningListeners();
         // Si hay fecha seleccionada, navegar a ese mes/año
         const selected = this.selectedDate();
         if (selected) {
@@ -712,9 +710,34 @@ class DateTimePicker {
     }
     close() {
         this.isOpen.set(false);
+        this.openUpward.set(false);
         this.removeDocumentListener();
+        this.removePositioningListeners();
         this.markAsTouched();
     }
+    updatePosition() {
+        const scrollY = window.scrollY;
+        const maxScrollY = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
+        const canScrollDown = scrollY < maxScrollY - 1;
+        this.openUpward.set(!canScrollDown);
+    }
+    addPositioningListeners() {
+        this.removePositioningListeners();
+        this.ngZone.runOutsideAngular(() => {
+            this.resizeListener = () => {
+                if (this.isOpen()) {
+                    this.ngZone.run(() => this.updatePosition());
+                }
+            };
+            window.addEventListener('resize', this.resizeListener);
+        });
+    }
+    removePositioningListeners() {
+        if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+            this.resizeListener = undefined;
+        }
+    }
     selectDay(day) {
         if (!day || this.isBlocked())
             return;
@@ -868,17 +891,19 @@ class DateTimePicker {
         this.markAsTouched();
         this.dateChange.emit(newDate);
     }
-    // Manejo de input de texto (DD/MM/YYYY)
+    // Manejo de input de texto (DD/MM/YYYY o DD/MM/YYYY HH:MM)
     onInputChange(event) {
         if (this.isBlocked())
             return;
         const input = event.target;
-        let value = input.value;
+        const value = input.value;
+        const isDateTime = this.mode() === 'datetime';
         // Eliminar todo lo que no sea número
         const numbersOnly = value.replace(/\D/g, '');
-        // Limitar a 8 dígitos (DDMMYYYY)
-        const limitedNumbers = numbersOnly.slice(0, 8);
-        // Formatear con barras: DD/MM/YYYY
+        // Limitar a 8 dígitos para fecha o 12 para datetime
+        const maxDigits = isDateTime ? 12 : 8;
+        const limitedNumbers = numbersOnly.slice(0, maxDigits);
+        // Formatear con separadores: DD/MM/YYYY [ HH:MM]
         let formatted = '';
         if (limitedNumbers.length > 0) {
             formatted = limitedNumbers.slice(0, 2);
@@ -888,12 +913,18 @@ class DateTimePicker {
             if (limitedNumbers.length > 4) {
                 formatted += '/' + limitedNumbers.slice(4, 8);
             }
+            if (isDateTime && limitedNumbers.length > 8) {
+                formatted += ' ' + limitedNumbers.slice(8, 10);
+            }
+            if (isDateTime && limitedNumbers.length > 10) {
+                formatted += ':' + limitedNumbers.slice(10, 12);
+            }
         }
         this.inputTextValue.set(formatted);
         input.value = formatted;
         this.markAsTouched();
-        // Solo intentamos parsear cuando tenemos DD/MM/YYYY completo (10 caracteres)
-        if (formatted.length === 10) {
+        const completeLength = isDateTime ? 16 : 10;
+        if (formatted.length === completeLength) {
             const parsedDate = this.parseDateInput(formatted);
             if (parsedDate) {
                 if (this.isDateDisabled(parsedDate)) {
@@ -913,9 +944,8 @@ class DateTimePicker {
         }
     }
     /**
-     * Selects the date segment (DD, MM, or YYYY) under the cursor on click,
-     * mimicking native date-input block-editing behavior.
-     * Format: DD/MM/YYYY → segments at positions 0-1, 3-4, 6-9
+     * Selects the date/time segment under the cursor on click.
+     * Format: DD/MM/YYYY [HH:MM] → DD=0-1, MM=3-4, YYYY=6-9, HH=11-12, MM=14-15
      */
     onInputClick(event) {
         event.stopPropagation();
@@ -924,29 +954,31 @@ class DateTimePicker {
         const input = event.target;
         const pos = input.selectionStart ?? 0;
         const value = input.value;
-        // Only do segment selection when the value looks like a date (has slashes)
         if (!value || !value.includes('/'))
             return;
-        // Determine which segment the cursor is in
-        // DD = 0..1, slash at 2, MM = 3..4, slash at 5, YYYY = 6..9
+        const hasTime = this.mode() === 'datetime' && value.includes(':');
         let start;
         let end;
         if (pos <= 2) {
-            // Day segment
             start = 0;
             end = 2;
         }
         else if (pos <= 5) {
-            // Month segment
             start = 3;
             end = 5;
         }
-        else {
-            // Year segment
+        else if (pos <= 10 || !hasTime) {
             start = 6;
             end = 10;
         }
-        // Use setTimeout to override the browser's default selection behavior
+        else if (pos <= 13) {
+            start = 11;
+            end = 13;
+        }
+        else {
+            start = 14;
+            end = 16;
+        }
         setTimeout(() => {
             input.setSelectionRange(start, end);
         }, 0);
@@ -959,16 +991,27 @@ class DateTimePicker {
     parseDateInput(input) {
         if (!input || input.trim() === '')
             return null;
-        const match = input.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
-        if (match) {
-            const day = parseInt(match[1], 10);
-            const month = parseInt(match[2], 10) - 1;
-            const year = parseInt(match[3], 10);
-            if (day >= 1 && day <= 31 && month >= 0 && month <= 11 && year >= 1900 && year <= 2100) {
-                const date = new Date(year, month, day);
-                if (date.getDate() === day && date.getMonth() === month && date.getFullYear() === year) {
-                    return date;
-                }
+        const trimmed = input.trim();
+        const dateTimeMatch = trimmed.match(/^(\d{2})\/(\d{2})\/(\d{4})\s(\d{2}):(\d{2})$/);
+        const dateMatch = trimmed.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+        const match = dateTimeMatch || dateMatch;
+        if (!match)
+            return null;
+        const day = parseInt(match[1], 10);
+        const month = parseInt(match[2], 10) - 1;
+        const year = parseInt(match[3], 10);
+        const hour = match[4] ? parseInt(match[4], 10) : 0;
+        const minute = match[5] ? parseInt(match[5], 10) : 0;
+        if (day >= 1 && day <= 31 &&
+            month >= 0 && month <= 11 &&
+            year >= 1900 && year <= 2100 &&
+            hour >= 0 && hour <= 23 &&
+            minute >= 0 && minute <= 59) {
+            const date = new Date(year, month, day, hour, minute);
+            if (date.getDate() === day &&
+                date.getMonth() === month &&
+                date.getFullYear() === year) {
+                return date;
             }
         }
         return null;
@@ -977,7 +1020,13 @@ class DateTimePicker {
         const day = date.getDate().toString().padStart(2, '0');
         const month = (date.getMonth() + 1).toString().padStart(2, '0');
         const year = date.getFullYear();
-        return `${day}/${month}/${year}`;
+        const dateStr = `${day}/${month}/${year}`;
+        if (this.mode() === 'datetime') {
+            const hour = date.getHours().toString().padStart(2, '0');
+            const minute = date.getMinutes().toString().padStart(2, '0');
+            return `${dateStr} ${hour}:${minute}`;
+        }
+        return dateStr;
     }
     updateInternalState(date) {
         this.selectedDate.set(date);
@@ -2360,9 +2409,13 @@ class SelectCustomSearch {
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
     onChange = (value) => { };
     onTouched = () => { };
+    resizeListener;
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
+    ngOnDestroy() {
+        this.removePositioningListeners();
+    }
     writeValue(value) {
         this.selectedValue.set(value);
     }
@@ -2388,20 +2441,41 @@ class SelectCustomSearch {
     open() {
         if (this.isBlocked())
             return;
-        const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        const spaceBelow = window.innerHeight - rect.bottom;
-        this.openUpward.set(spaceBelow < 260);
+        this.updatePosition();
         this.isOpen.set(true);
         this.searchTerm.set('');
-        setTimeout(() => {
+        requestAnimationFrame(() => {
             const input = this.elementRef.nativeElement.querySelector('.search-input');
             if (input)
-                input.focus();
+                input.focus({ preventScroll: true });
         });
+        this.addPositioningListeners();
     }
     close() {
         this.isOpen.set(false);
         this.searchTerm.set('');
+        this.openUpward.set(false);
+        this.removePositioningListeners();
+    }
+    updatePosition() {
+        const scrollY = window.scrollY;
+        const maxScrollY = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
+        const canScrollDown = scrollY < maxScrollY - 1;
+        this.openUpward.set(!canScrollDown);
+    }
+    addPositioningListeners() {
+        this.removePositioningListeners();
+        this.resizeListener = () => {
+            if (this.isOpen())
+                this.updatePosition();
+        };
+        window.addEventListener('resize', this.resizeListener);
+    }
+    removePositioningListeners() {
+        if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+            this.resizeListener = undefined;
+        }
     }
     selectOption(option) {
         if (this.isBlocked())
@@ -2717,11 +2791,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 (['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"] }] });
+    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;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a9a97f transparent}.textarea::-webkit-scrollbar{width:8px}.textarea::-webkit-scrollbar-track{background:transparent;margin:4px 0}.textarea::-webkit-scrollbar-thumb{background:#a9a97f;border-radius:4px}.textarea::-webkit-scrollbar-thumb:hover{background:#787861}.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 (['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"] }]
+            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;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a9a97f transparent}.textarea::-webkit-scrollbar{width:8px}.textarea::-webkit-scrollbar-track{background:transparent;margin:4px 0}.textarea::-webkit-scrollbar-thumb{background:#a9a97f;border-radius:4px}.textarea::-webkit-scrollbar-thumb:hover{background:#787861}.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 {
@@ -2973,6 +3047,7 @@ class DialogAlertComponent {
                             key: "observations",
                             label: "Observaciones",
                             type: "textarea",
+                            readonly: true,
                             placeholder: "Escriba las observaciones...",
                             col: 12,
                         }
@@ -4638,7 +4713,8 @@ echarts.use([
     GraphicComponent,
     DataZoomComponent,
     VisualMapComponent,
-    LegendComponent
+    LegendComponent,
+    TitleComponent
 ]);
 const UI_CHART_TOKENS = {
     fontFamily: 'Inter, sans-serif',
@@ -4682,20 +4758,25 @@ const UI_CHART_TOKENS = {
 class BaseChart {
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
     chartClick = output();
+    chartInit = output();
     onChartClick(event) {
         this.chartClick.emit(event);
     }
+    onChartInit(chart) {
+        this.chartInit.emit(chart);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BaseChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: BaseChart, isStandalone: true, selector: "lib-base-chart", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { chartClick: "chartClick" }, providers: [provideEchartsCore({ echarts })], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: BaseChart, isStandalone: true, selector: "lib-base-chart", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, providers: [provideEchartsCore({ echarts })], ngImport: i0, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\" (chartClick)=\"onChartClick($event)\" (chartInit)=\"onChartInit($event)\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BaseChart, decorators: [{
             type: Component,
-            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"] }] } });
+            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)\" (chartInit)=\"onChartInit($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"] }], chartInit: [{ type: i0.Output, args: ["chartInit"] }] } });
 
 function buildBarChartOptions(data, multiSeries, horizontal = false) {
-    const showScroll = data.length > 12;
-    const zoomEnd = showScroll ? Math.floor((12 / data.length) * 100) : 100;
+    const threshold = horizontal ? 6 : 12;
+    const showScroll = data.length > threshold;
+    const zoomEnd = showScroll ? Math.floor((threshold / data.length) * 100) : 100;
     const isMulti = !!multiSeries && multiSeries.length > 0;
     const xAxisData = data.map(item => item.label);
     const series = isMulti
@@ -4900,7 +4981,7 @@ class BarChart {
     toggleExpand = () => this.isExpanded.update(v => !v);
     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 }, 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"] }] });
+    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", "chartInit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, decorators: [{
             type: Component,
@@ -5122,7 +5203,7 @@ class LineChart {
     toggleExpand = () => this.isExpanded.update(v => !v);
     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 }, 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"] }] });
+    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", "chartInit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, decorators: [{
             type: Component,
@@ -5135,6 +5216,104 @@ function getTotal(data) {
 function buildDonutChartOptions(data) {
     const total = getTotal(data);
     const showLegend = data.length > 10;
+    const splitLegend = data.length > 14;
+    // Legend tooltip: shows name + value on hover
+    const dataMap = new Map(data.map(d => [d.label, d.value]));
+    const legendTooltip = {
+        show: true,
+        backgroundColor: '#ffffff',
+        borderColor: '#d9dcc7',
+        borderWidth: 1,
+        textStyle: {
+            color: UI_CHART_TOKENS.text,
+            fontSize: 12,
+            fontFamily: UI_CHART_TOKENS.fontFamily,
+        },
+        extraCssText: 'border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.10);padding:8px 10px;',
+        formatter: (params) => {
+            const name = typeof params === 'string' ? params : params?.name;
+            const val = dataMap.get(name);
+            return val !== undefined ? `${name}: <b>${val}</b>` : name;
+        },
+    };
+    let legendConfig = {};
+    if (showLegend) {
+        if (splitLegend) {
+            const half = Math.ceil(data.length / 2);
+            const leftData = data.slice(0, half).map(d => d.label);
+            const rightData = data.slice(half).map(d => d.label);
+            legendConfig = {
+                legend: [
+                    {
+                        data: leftData,
+                        type: 'scroll',
+                        orient: 'vertical',
+                        left: '5%',
+                        top: 'center',
+                        itemWidth: 12,
+                        itemHeight: 12,
+                        itemGap: 10,
+                        tooltip: legendTooltip,
+                        textStyle: {
+                            fontSize: 11,
+                            fontFamily: UI_CHART_TOKENS.fontFamily,
+                            color: UI_CHART_TOKENS.muted,
+                        },
+                        pageTextStyle: { color: UI_CHART_TOKENS.muted },
+                        pageIconColor: UI_CHART_TOKENS.centerText,
+                        pageIconInactiveColor: '#ccc',
+                    },
+                    {
+                        data: rightData,
+                        type: 'scroll',
+                        orient: 'vertical',
+                        right: '5%',
+                        top: 'center',
+                        itemWidth: 12,
+                        itemHeight: 12,
+                        itemGap: 10,
+                        tooltip: legendTooltip,
+                        textStyle: {
+                            fontSize: 11,
+                            fontFamily: UI_CHART_TOKENS.fontFamily,
+                            color: UI_CHART_TOKENS.muted,
+                        },
+                        pageTextStyle: { color: UI_CHART_TOKENS.muted },
+                        pageIconColor: UI_CHART_TOKENS.centerText,
+                        pageIconInactiveColor: '#ccc',
+                    }
+                ]
+            };
+        }
+        else {
+            legendConfig = {
+                legend: {
+                    type: 'scroll',
+                    orient: 'vertical',
+                    right: '5%',
+                    top: 'center',
+                    itemWidth: 12,
+                    itemHeight: 12,
+                    itemGap: 10,
+                    tooltip: legendTooltip,
+                    textStyle: {
+                        fontSize: 11,
+                        fontFamily: UI_CHART_TOKENS.fontFamily,
+                        color: UI_CHART_TOKENS.muted,
+                    },
+                    pageTextStyle: {
+                        color: UI_CHART_TOKENS.muted,
+                    },
+                    pageIconColor: UI_CHART_TOKENS.centerText,
+                    pageIconInactiveColor: '#ccc',
+                }
+            };
+        }
+    }
+    let centerX = '50%';
+    if (showLegend) {
+        centerX = splitLegend ? '50%' : '35%';
+    }
     return {
         animation: true,
         backgroundColor: 'transparent',
@@ -5164,32 +5343,12 @@ function buildDonutChartOptions(data) {
       `,
             formatter: (params) => `${params.name}: ${params.value}`,
         },
-        ...(showLegend ? {
-            legend: {
-                type: 'scroll',
-                orient: 'horizontal',
-                bottom: 0,
-                left: 'center',
-                itemWidth: 12,
-                itemHeight: 12,
-                itemGap: 10,
-                textStyle: {
-                    fontSize: 11,
-                    fontFamily: UI_CHART_TOKENS.fontFamily,
-                    color: UI_CHART_TOKENS.muted,
-                },
-                pageTextStyle: {
-                    color: UI_CHART_TOKENS.muted,
-                },
-                pageIconColor: UI_CHART_TOKENS.centerText,
-                pageIconInactiveColor: '#ccc',
-            },
-        } : {}),
+        ...legendConfig,
         series: [
             {
                 type: 'pie',
                 radius: ['44%', '72%'],
-                center: ['50%', showLegend ? '46%' : '52%'],
+                center: [centerX, '50%'],
                 avoidLabelOverlap: true,
                 minAngle: 4,
                 itemStyle: {
@@ -5242,21 +5401,19 @@ function buildDonutChartOptions(data) {
                 })),
             },
         ],
-        graphic: [
-            {
-                type: 'text',
-                left: 'center',
-                top: showLegend ? '42%' : '48%',
-                style: {
-                    text: `${total}`,
-                    textAlign: 'center',
-                    fill: UI_CHART_TOKENS.centerText,
-                    fontSize: 24,
-                    fontWeight: 700,
-                    fontFamily: UI_CHART_TOKENS.fontFamily,
-                },
+        title: {
+            text: `${total}`,
+            left: centerX,
+            top: '48%',
+            textAlign: 'center',
+            textVerticalAlign: 'middle',
+            textStyle: {
+                color: UI_CHART_TOKENS.centerText,
+                fontSize: 24,
+                fontWeight: 700,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
             },
-        ],
+        },
     };
 }
 class DonutChart {
@@ -5303,15 +5460,29 @@ class DonutChart {
             this.drilledGroup.set(clickedItem.label);
         }
     }
+    chartInstance = null;
+    onChartInit(chart) {
+        this.chartInstance = chart;
+        chart.on('legendselectchanged', (event) => {
+            const selected = event.selected;
+            const currentData = this.displayData();
+            const visibleTotal = currentData
+                .filter(item => selected[item.label] !== false)
+                .reduce((sum, item) => sum + item.value, 0);
+            chart.setOption({
+                title: { text: `${visibleTotal}` }
+            });
+        });
+    }
     resetDrillDown() {
         this.drilledGroup.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DonutChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DonutChart, isStandalone: true, selector: "lib-donut-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, drillDown: { classPropertyName: "drillDown", publicName: "drillDown", isSignal: true, isRequired: false, transformFunction: null }, groupByPrefix: { classPropertyName: "groupByPrefix", publicName: "groupByPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sectionClick: "sectionClick" }, ngImport: i0, template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"donut-chart-header\">\r\n    <h3 class=\"donut-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()\" (chartClick)=\"onChartClick($event)\" class=\"chart-wrapper\" />\r\n  \r\n  @if (drilledGroup()) {\r\n    <button class=\"back-btn\" (click)=\"resetDrillDown()\" type=\"button\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>\r\n      <span>Volver</span>\r\n    </button>\r\n  }\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}.donut-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}.donut-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}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-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}.back-btn{position:absolute;top:24px;right:60px;display:flex;align-items:center;gap:6px;background-color:#d9df88;border:1px solid rgba(97,102,31,.2);padding:6px 12px;border-radius:12px;cursor:pointer;color:#61661f;font-family:Inter,sans-serif;font-size:13px;font-weight:500;box-shadow:0 4px 12px #0000000d;transition:all .2s ease;z-index:100}.back-btn:hover{background-color:#61661f;color:#fff;box-shadow:0 6px 14px #61661f33;transform:translateY(-1px)}.back-btn:active{transform:translateY(0)}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }, { kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DonutChart, isStandalone: true, selector: "lib-donut-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, drillDown: { classPropertyName: "drillDown", publicName: "drillDown", isSignal: true, isRequired: false, transformFunction: null }, groupByPrefix: { classPropertyName: "groupByPrefix", publicName: "groupByPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sectionClick: "sectionClick" }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"donut-chart-header\">\r\n    <h3 class=\"donut-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()\" (chartClick)=\"onChartClick($event)\" (chartInit)=\"onChartInit($event)\" class=\"chart-wrapper\" />\r\n  \r\n  @if (drilledGroup()) {\r\n    <button class=\"back-btn\" (click)=\"resetDrillDown()\" type=\"button\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>\r\n      <span>Volver</span>\r\n    </button>\r\n  }\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}.donut-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}.donut-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}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-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}.back-btn{position:absolute;top:24px;right:60px;display:flex;align-items:center;gap:6px;background-color:#d9df88;border:1px solid rgba(97,102,31,.2);padding:6px 12px;border-radius:12px;cursor:pointer;color:#61661f;font-family:Inter,sans-serif;font-size:13px;font-weight:500;box-shadow:0 4px 12px #0000000d;transition:all .2s ease;z-index:100}.back-btn:hover{background-color:#61661f;color:#fff;box-shadow:0 6px 14px #61661f33;transform:translateY(-1px)}.back-btn:active{transform:translateY(0)}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick", "chartInit"] }, { kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DonutChart, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-donut-chart', standalone: true, imports: [BaseChart, CommonModule], template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"donut-chart-header\">\r\n    <h3 class=\"donut-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()\" (chartClick)=\"onChartClick($event)\" class=\"chart-wrapper\" />\r\n  \r\n  @if (drilledGroup()) {\r\n    <button class=\"back-btn\" (click)=\"resetDrillDown()\" type=\"button\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>\r\n      <span>Volver</span>\r\n    </button>\r\n  }\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}.donut-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}.donut-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}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-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}.back-btn{position:absolute;top:24px;right:60px;display:flex;align-items:center;gap:6px;background-color:#d9df88;border:1px solid rgba(97,102,31,.2);padding:6px 12px;border-radius:12px;cursor:pointer;color:#61661f;font-family:Inter,sans-serif;font-size:13px;font-weight:500;box-shadow:0 4px 12px #0000000d;transition:all .2s ease;z-index:100}.back-btn:hover{background-color:#61661f;color:#fff;box-shadow:0 6px 14px #61661f33;transform:translateY(-1px)}.back-btn:active{transform:translateY(0)}\n"] }]
+            args: [{ selector: 'lib-donut-chart', standalone: true, imports: [BaseChart, CommonModule], host: { '[attr.title]': 'null' }, template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"donut-chart-header\">\r\n    <h3 class=\"donut-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()\" (chartClick)=\"onChartClick($event)\" (chartInit)=\"onChartInit($event)\" class=\"chart-wrapper\" />\r\n  \r\n  @if (drilledGroup()) {\r\n    <button class=\"back-btn\" (click)=\"resetDrillDown()\" type=\"button\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>\r\n      <span>Volver</span>\r\n    </button>\r\n  }\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}.donut-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}.donut-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}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-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}.back-btn{position:absolute;top:24px;right:60px;display:flex;align-items:center;gap:6px;background-color:#d9df88;border:1px solid rgba(97,102,31,.2);padding:6px 12px;border-radius:12px;cursor:pointer;color:#61661f;font-family:Inter,sans-serif;font-size:13px;font-weight:500;box-shadow:0 4px 12px #0000000d;transition:all .2s ease;z-index:100}.back-btn:hover{background-color:#61661f;color:#fff;box-shadow:0 6px 14px #61661f33;transform:translateY(-1px)}.back-btn:active{transform:translateY(0)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], drillDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "drillDown", required: false }] }], groupByPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupByPrefix", required: false }] }], sectionClick: [{ type: i0.Output, args: ["sectionClick"] }] } });
 
 function buildHeatmapOptions(config) {
@@ -5392,17 +5563,24 @@ function buildHeatmapOptions(config) {
             },
         },
         visualMap: {
+            type: 'piecewise',
             min: minVal,
             max: maxVal,
+            splitNumber: 5,
             orient: 'horizontal',
             left: 'center',
             bottom: '0',
-            itemWidth: 12,
-            itemHeight: 120,
+            itemWidth: 14,
+            itemHeight: 14,
+            itemGap: 8,
+            itemSymbol: 'rect',
+            showLabel: false, // Hide the "10-20" piece labels
+            text: ['Más', 'Menos'], // Labels at the max and min ends
             textStyle: {
                 color: UI_CHART_TOKENS.muted,
-                fontSize: 11,
+                fontSize: 12,
                 fontFamily: UI_CHART_TOKENS.fontFamily,
+                fontWeight: 500
             },
             inRange: {
                 color: [
@@ -5449,7 +5627,7 @@ 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", "chartInit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Heatmap, decorators: [{
             type: Component,
@@ -5458,21 +5636,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class GeoAPIMaps {
     points = input([], ...(ngDevMode ? [{ debugName: "points" }] : []));
+    cameras = input([], ...(ngDevMode ? [{ debugName: "cameras" }] : []));
+    mapContainer;
     map;
     markers = [];
+    cameraMarkers = [];
     constructor() {
+        // Reactivo a cambios de puntos
         effect(() => {
             const pts = this.points();
             if (this.map && pts.length > 0) {
                 this.renderPoints(pts);
             }
         });
+        // Reactivo a cambios de cámaras
+        effect(() => {
+            const cams = this.cameras();
+            if (this.map && cams.length > 0) {
+                this.renderCameras(cams);
+            }
+        });
     }
     ngAfterViewInit() {
         this.initMap();
     }
     initMap() {
-        const mapElement = document.getElementById('map');
+        const mapElement = this.mapContainer?.nativeElement;
         if (!mapElement)
             return;
         this.map = new google.maps.Map(mapElement, {
@@ -5494,6 +5683,10 @@ class GeoAPIMaps {
         if (this.points().length > 0) {
             this.renderPoints(this.points());
         }
+        // Render cameras if they already exist when map is ready
+        if (this.cameras().length > 0) {
+            this.renderCameras(this.cameras());
+        }
     }
     goToLocation(lat, lng) {
         if (!this.map)
@@ -5528,33 +5721,42 @@ class GeoAPIMaps {
                 map: this.map,
                 content: dot,
             });
+            const statusColor = point.immobilized ? '#ef4444' : '#3b82f6';
             const content = `
-        <div style="padding: 0 12px 12px 12px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; min-width: 200px; color: #374151;">
-          <div style="font-weight: 700; font-size: 15px; color: #111827; margin-bottom: 8px; line-height: 1.2;">
-            ${point.subpoenaNumber}
+      <div style="padding:0 12px 12px 12px;font-family:'Inter',-apple-system,sans-serif;
+                  min-width:200px;color:#374151;">
+        <div style="font-weight:700;font-size:15px;color:#111827;">
+          ${point.subpoenaNumber}
+          ${point.immobilized ? '<span style="font-size:11px;background:#ef4444;color:white;border-radius:4px;padding:1px 6px;margin-bottom:8px;vertical-align:middle;">Inmovilizado</span>' : ''}
+        </div>
+
+        <div style="font-size:12px;color:#9ca3af;margin-bottom:10px;display:flex;gap:8px;">
+          <span>📍 ${point.locationLabel}</span>
+        </div>
+
+        <div style="display:flex;flex-direction:column;gap:4px;">
+          <div style="display:flex;justify-content:space-between;gap:16px;font-size:13px;">
+            <span style="color:#9ca3af;">Fecha</span>
+            <span style="font-weight:600;color:#374151;">${new Date(point.dateTime).toLocaleString('es-CO', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })}</span>
           </div>
-          <div style="font-size: 14px; color: #4b5563; margin-bottom: 4px;">
-            ${point.locationLabel}
+          <div style="display:flex;justify-content:space-between;gap:16px;font-size:13px;">
+            <span style="color:#9ca3af;">Infracción</span>
+            <span style="font-weight:600;color:#374151;">${point.infractionCode}</span>
           </div>
-          <div style="font-size: 14px; color: #6b7280; margin-bottom: 4px;">
-            ${point.dateTime.replace('T', ' - ').substring(0, 18)}
+          <div style="display:flex;justify-content:space-between;gap:16px;font-size:13px;">
+            <span style="color:#9ca3af;">Placa</span>
+            <span style="font-weight:600;color:#374151;">${point.plate}</span>
           </div>
-          <div style="display: flex; flex-direction: column; gap: 4px; margin-top: 4px;">
-            <div style="font-size: 13px;">
-              <span style="color: #9ca3af;">Infracción:</span> 
-              <span style="font-weight: 500; color: #374151;">${point.infractionCode}</span>
-            </div>
-            <div style="font-size: 13px;">
-              <span style="color: #9ca3af;">Placa:</span> 
-              <span style="font-weight: 500; color: #374151;">${point.plate}</span>
-            </div>
-            <div style="display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-top: 4px; color: ${point.immobilized ? '#ef4444' : '#3b82f6'};">
-              <span style="width: 8px; height: 8px; border-radius: 50%; background-color: ${point.immobilized ? '#ef4444' : '#3b82f6'};"></span>
+          <div style="border-top:1px solid #e5e7eb;margin-top:6px;padding-top:6px;
+                      display:flex;justify-content:space-between;font-size:13px;font-weight:700;">
+            <span style="color:${statusColor};">Estado</span>
+            <span style="display:flex;align-items:center;gap:6px;color:${statusColor};">
+              <span style="width:8px;height:8px;border-radius:50%;background-color:${statusColor};"></span>
               ${point.immobilized ? 'Inmovilizado' : 'Normal'}
-            </div>
+            </span>
           </div>
         </div>
-      `;
+      </div>`;
             marker.addListener('mouseover', () => {
                 if (!lockedMarker) {
                     infoWindow.setContent(content);
@@ -5583,28 +5785,124 @@ class GeoAPIMaps {
             this.map.fitBounds(bounds);
         }
     }
+    // ─── GeoPointCameras markers ─────────────────────────────────────────────────
+    clearCameraMarkers() {
+        this.cameraMarkers.forEach(m => (m.map = null));
+        this.cameraMarkers = [];
+    }
+    renderCameras(cameras) {
+        this.clearCameraMarkers();
+        const infoWindow = new google.maps.InfoWindow();
+        let lockedMarker = null;
+        // 1. Encontrar el total mayor para destacarlo
+        const maxTotal = Math.max(...cameras.map(c => c.total));
+        // 2. Centrar el mapa para que se vean todas las cámaras al inicio
+        if (cameras.length > 0) {
+            const bounds = new google.maps.LatLngBounds();
+            cameras.forEach(c => bounds.extend({ lat: c.latitude, lng: c.longitude }));
+            this.map.fitBounds(bounds);
+        }
+        cameras.forEach(cam => {
+            // 3. Color diferente si es el de mayor total
+            const isTop = cam.total === maxTotal;
+            const bgColor = isTop ? '#dc2626' : '#7c3aed'; // rojo para el top, morado para el resto
+            const pin = document.createElement('div');
+            pin.innerHTML = `
+      <div style="
+        background:${bgColor}; color:white; border-radius:8px;
+        padding:4px 8px; font-size:12px; font-weight:700;
+        border:2px solid white; box-shadow:0 2px 6px rgba(0,0,0,.3);
+        display:flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap;">
+        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
+             fill="white">
+          <path d="M15 8v8H5V8h10m1-2H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0
+                   1-1v-3.5l4 4v-11l-4 4V7a1 1 0 0 0-1-1z"/>
+        </svg>
+        ${cam.total}
+      </div>`;
+            const marker = new google.maps.marker.AdvancedMarkerElement({
+                position: { lat: cam.latitude, lng: cam.longitude },
+                map: this.map,
+                content: pin,
+                title: cam.name,
+            });
+            const codesHtml = Object.entries(cam.by_code)
+                .map(([code, count]) => `
+        <div style="display:flex;justify-content:space-between;gap:16px;font-size:13px;">
+          <span style="color:#9ca3af;">${code}</span>
+          <span style="font-weight:600;color:#374151;">${count}</span>
+        </div>`)
+                .join('');
+            const content = `
+      <div style="padding:0 12px 12px 12px;font-family:'Inter',-apple-system,sans-serif;
+                  min-width:200px;color:#374151;">
+        <div style="font-weight:700;font-size:15px;color:#111827;">
+          ${cam.name}
+          ${isTop ? '<span style="font-size:11px;background:#dc2626;color:white;border-radius:4px;padding:1px 6px;margin-bottom:8px;vertical-align:middle;">Más Infracciones</span>' : ''}
+        </div>
+        <!-- <div style="font-size:12px;color:#9ca3af;margin-bottom:4px;">ID: ${cam.id}</div> -->
+
+        <!-- 4. Coordenadas en el tooltip -->
+        <div style="font-size:12px;color:#9ca3af;margin-bottom:10px;display:flex;gap:8px;">
+          <span>📍 ${cam.locationLabel}</span>
+        </div>
+
+        <div style="display:flex;flex-direction:column;gap:4px;">
+          <div style="margin-top:8px;font-size:14px;color:#6b7280;">Código(s) de Infracciones</div>
+          ${codesHtml}
+          <div style="border-top:1px solid #e5e7eb;margin-top:6px;padding-top:6px;
+                      display:flex;justify-content:space-between;font-size:13px;font-weight:700;">
+            <span style="color:${bgColor};">Total</span>
+            <span style="color:${bgColor};">${cam.total}</span>
+          </div>
+        </div>
+      </div>`;
+            marker.addListener('mouseover', () => {
+                if (!lockedMarker) {
+                    infoWindow.setContent(content);
+                    infoWindow.open(this.map, marker);
+                }
+            });
+            marker.addListener('mouseout', () => { if (!lockedMarker)
+                infoWindow.close(); });
+            marker.addListener('click', () => {
+                lockedMarker = marker;
+                infoWindow.setContent(content);
+                infoWindow.open(this.map, marker);
+            });
+            infoWindow.addListener('closeclick', () => { lockedMarker = null; });
+            this.cameraMarkers.push(marker);
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GeoAPIMaps, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: GeoAPIMaps, isStandalone: true, selector: "lib-geo-api-maps", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div id=\"map\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative}#map{position:absolute;inset:0;z-index:1;border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: GeoAPIMaps, isStandalone: true, selector: "lib-geo-api-maps", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null }, cameras: { classPropertyName: "cameras", publicName: "cameras", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true, static: true }], ngImport: i0, template: "<div #mapContainer class=\"map\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative}.map{position:absolute;inset:0;z-index:1;border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GeoAPIMaps, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-geo-api-maps', standalone: true, imports: [CommonModule], template: "<div id=\"map\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative}#map{position:absolute;inset:0;z-index:1;border-radius:12px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }] } });
+            args: [{ selector: 'lib-geo-api-maps', standalone: true, imports: [CommonModule], template: "<div #mapContainer class=\"map\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative}.map{position:absolute;inset:0;z-index:1;border-radius:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }], cameras: [{ type: i0.Input, args: [{ isSignal: true, alias: "cameras", required: false }] }], mapContainer: [{
+                type: ViewChild,
+                args: ['mapContainer', { static: true }]
+            }] } });
 
 class MapGeo {
     title = input('Mapa Geográfico', ...(ngDevMode ? [{ debugName: "title" }] : []));
     isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
     points = input([], ...(ngDevMode ? [{ debugName: "points" }] : []));
+    cameras = input([], ...(ngDevMode ? [{ debugName: "cameras" }] : []));
+    immobilizedCount = computed(() => this.points().filter(p => p.immobilized).length, ...(ngDevMode ? [{ debugName: "immobilizedCount" }] : []));
+    normalCount = computed(() => this.points().filter(p => !p.immobilized).length, ...(ngDevMode ? [{ debugName: "normalCount" }] : []));
+    totalCameras = computed(() => this.cameras().length, ...(ngDevMode ? [{ debugName: "totalCameras" }] : []));
     toggleExpand() {
         this.isExpanded.update((value) => !value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MapGeo, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MapGeo, isStandalone: true, selector: "lib-map-geo", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"map-geo-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"map-geo-header\">\r\n    <h3 class=\"map-geo-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  <div class=\"chart-wrapper\">\r\n    <lib-geo-api-maps [points]=\"points()\" />\r\n  </div>\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}.map-geo-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}.map-geo-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{position:relative;width:100%;height:450px;min-height:450px;display:block;min-width:0}.map-geo-container.expanded .chart-wrapper{flex:1;height:auto;min-height:0}.map-geo-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.map-geo-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: GeoAPIMaps, selector: "lib-geo-api-maps", inputs: ["points"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MapGeo, isStandalone: true, selector: "lib-map-geo", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null }, cameras: { classPropertyName: "cameras", publicName: "cameras", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"map-geo-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"map-geo-header\">\r\n    <h3 class=\"map-geo-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  <div class=\"chart-wrapper\">\r\n    <lib-geo-api-maps [points]=\"points()\" [cameras]=\"cameras()\" />\r\n  </div>\r\n  @if (points().length > 0) {\r\n    <div class=\"map-summary\">\r\n      <span class=\"map-badge blue\">\r\n        <span class=\"map-dot blue\"></span>\r\n        Normal: {{ normalCount() }}\r\n      </span>\r\n      <span class=\"map-badge red\">\r\n        <span class=\"map-dot red\"></span>\r\n        Inmovilizado: {{ immobilizedCount() }}\r\n      </span>\r\n      <span class=\"map-badge total\">Total: {{ points().length }}</span>\r\n    </div>\r\n  }\r\n  @if (cameras().length > 0) {\r\n    <div class=\"map-summary\">\r\n      <span class=\"map-badge purple\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n          <path d=\"M15 8v8H5V8h10m1-2H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4V7a1 1 0 0 0-1-1z\"/>\r\n        </svg>\r\n        C\u00E1maras: {{ totalCameras() }}\r\n      </span>\r\n    </div>\r\n  }\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}.map-geo-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}.map-geo-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{position:relative;width:100%;height:450px;min-height:450px;display:block;min-width:0}.map-geo-container.expanded .chart-wrapper{flex:1;height:auto;min-height:0}.map-geo-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.map-geo-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}.map-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.map-badge{display:inline-flex;align-items:center;gap:5px;font-family:Inter,sans-serif;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap}.map-badge.blue{background-color:#3b82f61f;color:#2563eb}.map-badge.red{background-color:#ef44441f;color:#dc2626}.map-badge.purple{background-color:#7c3aed1f;color:#7c3aed}.map-badge.total{background-color:#3741511a;color:#374151}.map-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.map-dot.blue{background-color:#3b82f6}.map-dot.red{background-color:#ef4444}\n"], dependencies: [{ kind: "component", type: GeoAPIMaps, selector: "lib-geo-api-maps", inputs: ["points", "cameras"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MapGeo, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-map-geo', imports: [GeoAPIMaps], template: "<div class=\"map-geo-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"map-geo-header\">\r\n    <h3 class=\"map-geo-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  <div class=\"chart-wrapper\">\r\n    <lib-geo-api-maps [points]=\"points()\" />\r\n  </div>\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}.map-geo-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}.map-geo-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{position:relative;width:100%;height:450px;min-height:450px;display:block;min-width:0}.map-geo-container.expanded .chart-wrapper{flex:1;height:auto;min-height:0}.map-geo-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.map-geo-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 }] }], points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }] } });
+            args: [{ selector: 'lib-map-geo', imports: [GeoAPIMaps], template: "<div class=\"map-geo-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"map-geo-header\">\r\n    <h3 class=\"map-geo-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  <div class=\"chart-wrapper\">\r\n    <lib-geo-api-maps [points]=\"points()\" [cameras]=\"cameras()\" />\r\n  </div>\r\n  @if (points().length > 0) {\r\n    <div class=\"map-summary\">\r\n      <span class=\"map-badge blue\">\r\n        <span class=\"map-dot blue\"></span>\r\n        Normal: {{ normalCount() }}\r\n      </span>\r\n      <span class=\"map-badge red\">\r\n        <span class=\"map-dot red\"></span>\r\n        Inmovilizado: {{ immobilizedCount() }}\r\n      </span>\r\n      <span class=\"map-badge total\">Total: {{ points().length }}</span>\r\n    </div>\r\n  }\r\n  @if (cameras().length > 0) {\r\n    <div class=\"map-summary\">\r\n      <span class=\"map-badge purple\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n          <path d=\"M15 8v8H5V8h10m1-2H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4V7a1 1 0 0 0-1-1z\"/>\r\n        </svg>\r\n        C\u00E1maras: {{ totalCameras() }}\r\n      </span>\r\n    </div>\r\n  }\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}.map-geo-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}.map-geo-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{position:relative;width:100%;height:450px;min-height:450px;display:block;min-width:0}.map-geo-container.expanded .chart-wrapper{flex:1;height:auto;min-height:0}.map-geo-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.map-geo-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}.map-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.map-badge{display:inline-flex;align-items:center;gap:5px;font-family:Inter,sans-serif;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap}.map-badge.blue{background-color:#3b82f61f;color:#2563eb}.map-badge.red{background-color:#ef44441f;color:#dc2626}.map-badge.purple{background-color:#7c3aed1f;color:#7c3aed}.map-badge.total{background-color:#3741511a;color:#374151}.map-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.map-dot.blue{background-color:#3b82f6}.map-dot.red{background-color:#ef4444}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }], cameras: [{ type: i0.Input, args: [{ isSignal: true, alias: "cameras", required: false }] }] } });
 
 class TableChart {
     title = input('Table Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));