sapenlinea-components 0.4.62 → 0.5.62

package/fesm2022/sapenlinea-components.mjs

@@ -5,6 +5,11 @@ import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
 import PubSub from 'pubsub-js';
+import { BarChart as BarChart$1, LineChart as LineChart$1, PieChart } from 'echarts/charts';
+import * as echarts from 'echarts/core';
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
 
 class PaginationComponent {
     // Inputs as Models/Signals
@@ -191,6 +196,8 @@ class Table {
                 return `${value}%`;
             case 'date':
                 return this.formatDateValue(value);
+            case 'datetime':
+                return this.formatDateTimeValue(value);
             case 'email':
                 return String(value).toLowerCase();
             default:
@@ -248,7 +255,7 @@ class Table {
                 year = slashMatch[3];
             }
             else {
-                // 4️⃣ Fallback: intentar con Date
+                // Fallback: intentar con Date
                 const d = new Date(str);
                 if (isNaN(d.getTime()))
                     return str;
@@ -262,6 +269,79 @@ class Table {
         const yyyy = String(year);
         return `${dd}/${mm}/${yyyy}`;
     }
+    formatDateTimeValue(value) {
+        if (!value)
+            return '';
+        const str = String(value).trim();
+        // Si ya está exactamente en formato dd/mm/yyyy hh:mm AM/PM → no tocar
+        const alreadyFormattedDt = /^\d{2}\/\d{2}\/\d{4} \d{2}:\d{2} (AM|PM)$/i;
+        // Si viene exactamente como fecha sin hora → no tocar tampoco
+        const alreadyFormattedDate = /^\d{2}\/\d{2}\/\d{4}$/;
+        if (alreadyFormattedDt.test(str) || alreadyFormattedDate.test(str)) {
+            return str;
+        }
+        let day;
+        let month;
+        let year;
+        let hours = 0;
+        let minutes = 0;
+        let hasTime = false;
+        // Matches 'YYYY-MM-DD' taking optional ' HH:mm' or 'THH:mm'
+        const isoMatch = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:[\sT](\d{1,2}):(\d{1,2})(?::\d{1,2})?(?:\.\d+Z?)?)?$/.exec(str);
+        // Matches 'D/M/YYYY' with optional ' HH:mm'
+        const slashMatch = /^(\d{1,2})\/(\d{1,2})\/(\d{4})(?:[\s](\d{1,2}):(\d{1,2})(?::\d{1,2})?)?$/.exec(str);
+        if (isoMatch) {
+            year = isoMatch[1];
+            month = isoMatch[2];
+            day = isoMatch[3];
+            if (isoMatch[4]) {
+                hours = parseInt(isoMatch[4], 10);
+                minutes = parseInt(isoMatch[5], 10);
+                hasTime = true;
+            }
+        }
+        else if (slashMatch) {
+            day = slashMatch[1];
+            month = slashMatch[2];
+            year = slashMatch[3];
+            if (slashMatch[4]) {
+                hours = parseInt(slashMatch[4], 10);
+                minutes = parseInt(slashMatch[5], 10);
+                hasTime = true;
+            }
+        }
+        else {
+            // Fallback: intentar con Date puro
+            let d = new Date(value);
+            if (isNaN(d.getTime()) && typeof value === 'string') {
+                d = new Date(value.replace(' ', 'T'));
+            }
+            if (isNaN(d.getTime()))
+                return str;
+            day = d.getDate();
+            month = d.getMonth() + 1;
+            year = d.getFullYear();
+            hours = d.getHours();
+            minutes = d.getMinutes();
+            // Try to determine if the purely parsed date had any time component. If hours/min are zero, 
+            // assume it didn't unless proven otherwise, though standard behavior is to just print it.
+            // But we will print the time portion anyway to be safe.
+            hasTime = true;
+        }
+        const dd = String(day).padStart(2, '0');
+        const mm = String(month).padStart(2, '0');
+        const yyyy = String(year);
+        if (!hasTime) {
+            return `${dd}/${mm}/${yyyy}`;
+        }
+        let h = Number(hours);
+        const m = String(minutes).padStart(2, '0');
+        const ampm = h >= 12 ? 'PM' : 'AM';
+        h = h % 12;
+        h = h ? h : 12; // 0 becomes 12
+        const hh = String(h).padStart(2, '0');
+        return `${dd}/${mm}/${yyyy} ${hh}:${m} ${ampm}`;
+    }
     /**
      * Devuelve las acciones para una fila.
      * Puede ser que `actions` sea un arreglo (se muestra tal cual) o una función
@@ -3591,11 +3671,11 @@ class TitleFilters {
         this.clickButtonBack.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, clickButtonIcon: { classPropertyName: "clickButtonIcon", publicName: "clickButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, clickButtonLabel: { classPropertyName: "clickButtonLabel", publicName: "clickButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowFilters: { classPropertyName: "alwaysShowFilters", publicName: "alwaysShowFilters", isSignal: true, isRequired: false, transformFunction: null }, showSecondaryButton: { classPropertyName: "showSecondaryButton", publicName: "showSecondaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonBack: { classPropertyName: "showButtonBack", publicName: "showButtonBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", clearFilters: "clearFilters", filterButtonClicked: "filterButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", clickButtonBack: "clickButtonBack" }, viewQueries: [{ propertyName: "filtersContainer", first: true, predicate: ["filtersContainer"], descendants: true, read: ElementRef }, { propertyName: "submitBtn", first: true, predicate: ["submitBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"header-container-table\">\n    <div class=\"filters-dashboard-table\">\n        <div class=\"left-title\">\n            @if(showButtonBack()) {\n                <div class=\"button-back\" (click)=\"clickButton()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M5 12l6 6\" /><path d=\"M5 12l6 -6\" /></svg>\n                </div>\n            }\n            <div class=\"title-table\">{{ title() }}</div>\n        </div>\n\n        @if (buttonMode() === 'toggle') {\n        <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n                <path\n                    d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n            </svg>\n            <div class=\"label\">Filtros</div>\n        </div>\n        }\n        @if (buttonMode() === 'action') {\n        <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n                <path fill=\"#fff\"\n                    d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n                <path fill=\"#fff\"\n                    d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n            </svg>\n            <div class=\"label\">Ir al Mapa</div>\n        </div>\n        }\n        @if (buttonMode() === 'click') {\n        <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n            @if (clickButtonIcon()) {\n                <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n            }\n            {{ clickButtonLabel() }}\n        </lib-button>\n        }\n        @if (showSecondaryButton()) {\n        <lib-button class=\"secondary-action-btn\" variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n            @if (secondaryButtonIcon()) {\n                <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n            }\n            {{ secondaryButtonLabel() }}\n        </lib-button>\n        }\n    </div>\n\n    @if (filtersVisible) {\n    <div class=\"filters-container\" #filtersContainer>\n        <div class=\"filters-wrapper\">\n\n            @for (config of normalizedFiltersConfig(); track $index) {\n            @switch (config.type) {\n              @case ('text') {\n                <lib-input-text-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('number') {\n                <lib-input-number-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('select') {\n                <lib-input-select-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('date') {\n                <lib-date-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (dateSelected)=\"onDateSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('time') {\n                <lib-input-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n            }\n            }\n\n            <div class=\"actions\">\n              <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\" (keydown.enter)=\"onApplyFilters()\">\n                Aplicar Filtros\n              </lib-button>\n\n              <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\"> \n                Borrar Filtros \n              </lib-button>\n            </div>\n        </div>\n    </div>\n    }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:0}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.secondary-action-btn{margin-left:auto}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: InputNumberFilter, selector: "lib-input-number-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputTextFilter, selector: "lib-input-text-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputSelectFilter, selector: "lib-input-select-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: DateTimeFilter, selector: "lib-date-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["dateSelected", "dateChange", "enterPressed"] }, { kind: "component", type: InputTimeFilter, selector: "lib-input-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: Button, selector: "lib-button", inputs: ["variant", "type", "disabled", "fullWidth", "size"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, clickButtonIcon: { classPropertyName: "clickButtonIcon", publicName: "clickButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, clickButtonLabel: { classPropertyName: "clickButtonLabel", publicName: "clickButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowFilters: { classPropertyName: "alwaysShowFilters", publicName: "alwaysShowFilters", isSignal: true, isRequired: false, transformFunction: null }, showSecondaryButton: { classPropertyName: "showSecondaryButton", publicName: "showSecondaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonBack: { classPropertyName: "showButtonBack", publicName: "showButtonBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", clearFilters: "clearFilters", filterButtonClicked: "filterButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", clickButtonBack: "clickButtonBack" }, viewQueries: [{ propertyName: "filtersContainer", first: true, predicate: ["filtersContainer"], descendants: true, read: ElementRef }, { propertyName: "submitBtn", first: true, predicate: ["submitBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"header-container-table\">\n    <div class=\"filters-dashboard-table\">\n        <div class=\"left-title\">\n            @if(showButtonBack()) {\n                <div class=\"button-back\" (click)=\"clickButton()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M5 12l6 6\" /><path d=\"M5 12l6 -6\" /></svg>\n                </div>\n            }\n            <div class=\"title-table\">{{ title() }}</div>\n        </div>\n\n        @if (buttonMode() === 'toggle') {\n        <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n                <path\n                    d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n            </svg>\n            <div class=\"label\">Filtros</div>\n        </div>\n        }\n        @if (buttonMode() === 'action') {\n        <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n                <path fill=\"#fff\"\n                    d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n                <path fill=\"#fff\"\n                    d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n            </svg>\n            <div class=\"label\">Ir al Mapa</div>\n        </div>\n        }\n        @if (buttonMode() === 'click') {\n        <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n            @if (clickButtonIcon()) {\n                <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n            }\n            {{ clickButtonLabel() }}\n        </lib-button>\n        }\n        @if (showSecondaryButton()) {\n        <lib-button class=\"secondary-action-btn\" variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n            @if (secondaryButtonIcon()) {\n                <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n            }\n            {{ secondaryButtonLabel() }}\n        </lib-button>\n        }\n    </div>\n\n    @if (filtersVisible) {\n    <div class=\"filters-container\" #filtersContainer>\n        <div class=\"filters-wrapper\">\n\n            @for (config of normalizedFiltersConfig(); track $index) {\n            @switch (config.type) {\n              @case ('text') {\n                <lib-input-text-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('number') {\n                <lib-input-number-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('select') {\n                <lib-input-select-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('date') {\n                <lib-date-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (dateSelected)=\"onDateSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('time') {\n                <lib-input-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n            }\n            }\n\n            <div class=\"actions\">\n              <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\" (keydown.enter)=\"onApplyFilters()\">\n                Aplicar Filtros\n              </lib-button>\n\n              <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\"> \n                Borrar Filtros \n              </lib-button>\n            </div>\n        </div>\n    </div>\n    }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:0}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon-tabler-filter{color:var(--schemes-on-primary, #ffffff);width:20px;height:20px}.secondary-action-btn{margin-left:auto}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-filter{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: InputNumberFilter, selector: "lib-input-number-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputTextFilter, selector: "lib-input-text-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputSelectFilter, selector: "lib-input-select-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: DateTimeFilter, selector: "lib-date-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["dateSelected", "dateChange", "enterPressed"] }, { kind: "component", type: InputTimeFilter, selector: "lib-input-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: Button, selector: "lib-button", inputs: ["variant", "type", "disabled", "fullWidth", "size"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter, InputTimeFilter, Button], template: "<div class=\"header-container-table\">\n    <div class=\"filters-dashboard-table\">\n        <div class=\"left-title\">\n            @if(showButtonBack()) {\n                <div class=\"button-back\" (click)=\"clickButton()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M5 12l6 6\" /><path d=\"M5 12l6 -6\" /></svg>\n                </div>\n            }\n            <div class=\"title-table\">{{ title() }}</div>\n        </div>\n\n        @if (buttonMode() === 'toggle') {\n        <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n                <path\n                    d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n            </svg>\n            <div class=\"label\">Filtros</div>\n        </div>\n        }\n        @if (buttonMode() === 'action') {\n        <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n                <path fill=\"#fff\"\n                    d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n                <path fill=\"#fff\"\n                    d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n            </svg>\n            <div class=\"label\">Ir al Mapa</div>\n        </div>\n        }\n        @if (buttonMode() === 'click') {\n        <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n            @if (clickButtonIcon()) {\n                <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n            }\n            {{ clickButtonLabel() }}\n        </lib-button>\n        }\n        @if (showSecondaryButton()) {\n        <lib-button class=\"secondary-action-btn\" variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n            @if (secondaryButtonIcon()) {\n                <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n            }\n            {{ secondaryButtonLabel() }}\n        </lib-button>\n        }\n    </div>\n\n    @if (filtersVisible) {\n    <div class=\"filters-container\" #filtersContainer>\n        <div class=\"filters-wrapper\">\n\n            @for (config of normalizedFiltersConfig(); track $index) {\n            @switch (config.type) {\n              @case ('text') {\n                <lib-input-text-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('number') {\n                <lib-input-number-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('select') {\n                <lib-input-select-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('date') {\n                <lib-date-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (dateSelected)=\"onDateSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('time') {\n                <lib-input-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n            }\n            }\n\n            <div class=\"actions\">\n              <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\" (keydown.enter)=\"onApplyFilters()\">\n                Aplicar Filtros\n              </lib-button>\n\n              <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\"> \n                Borrar Filtros \n              </lib-button>\n            </div>\n        </div>\n    </div>\n    }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:0}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.secondary-action-btn{margin-left:auto}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
+            args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter, InputTimeFilter, Button], template: "<div class=\"header-container-table\">\n    <div class=\"filters-dashboard-table\">\n        <div class=\"left-title\">\n            @if(showButtonBack()) {\n                <div class=\"button-back\" (click)=\"clickButton()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M5 12l6 6\" /><path d=\"M5 12l6 -6\" /></svg>\n                </div>\n            }\n            <div class=\"title-table\">{{ title() }}</div>\n        </div>\n\n        @if (buttonMode() === 'toggle') {\n        <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n                <path\n                    d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n            </svg>\n            <div class=\"label\">Filtros</div>\n        </div>\n        }\n        @if (buttonMode() === 'action') {\n        <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n                <path fill=\"#fff\"\n                    d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n                <path fill=\"#fff\"\n                    d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n            </svg>\n            <div class=\"label\">Ir al Mapa</div>\n        </div>\n        }\n        @if (buttonMode() === 'click') {\n        <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n            @if (clickButtonIcon()) {\n                <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n            }\n            {{ clickButtonLabel() }}\n        </lib-button>\n        }\n        @if (showSecondaryButton()) {\n        <lib-button class=\"secondary-action-btn\" variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n            @if (secondaryButtonIcon()) {\n                <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n            }\n            {{ secondaryButtonLabel() }}\n        </lib-button>\n        }\n    </div>\n\n    @if (filtersVisible) {\n    <div class=\"filters-container\" #filtersContainer>\n        <div class=\"filters-wrapper\">\n\n            @for (config of normalizedFiltersConfig(); track $index) {\n            @switch (config.type) {\n              @case ('text') {\n                <lib-input-text-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('number') {\n                <lib-input-number-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('select') {\n                <lib-input-select-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('date') {\n                <lib-date-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (dateSelected)=\"onDateSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n              @case ('time') {\n                <lib-input-time-filter\n                  [filters]=\"config.filters\"\n                  [clearTrigger]=\"clearFilterTrigger()\"\n                  (filterSelected)=\"onFilterSelected($event)\"\n                  (enterPressed)=\"focusNextFilter()\"\n                />\n              }\n            }\n            }\n\n            <div class=\"actions\">\n              <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\" (keydown.enter)=\"onApplyFilters()\">\n                Aplicar Filtros\n              </lib-button>\n\n              <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\"> \n                Borrar Filtros \n              </lib-button>\n            </div>\n        </div>\n    </div>\n    }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:0}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon-tabler-filter{color:var(--schemes-on-primary, #ffffff);width:20px;height:20px}.secondary-action-btn{margin-left:auto}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-filter{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
         }], propDecorators: { filtersContainer: [{
                 type: ViewChild,
                 args: ['filtersContainer', { read: ElementRef }]
@@ -4086,12 +4166,557 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'lib-option-card', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  type=\"button\"\r\n  class=\"option-btn\"\r\n  (click)=\"onClick()\"\r\n  [style.--btn-bg]=\"buttonBg()\"\r\n  [style.--icon-bg]=\"iconBg()\"\r\n>\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-icon\">\r\n    <ng-content select=\"[icon]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Contenido -->\r\n  <div class=\"option-btn-content\">\r\n    <div class=\"option-btn-header\">\r\n      <h3 class=\"option-btn-title\">\r\n        {{ label() }}\r\n      </h3>\r\n\r\n      <span class=\"option-btn-chevron\">\u203A</span>\r\n    </div>\r\n\r\n    @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n    }\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #eef4d3);color:var(--icon-color, #596300)}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], buttonBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonBg", required: false }] }], iconBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBg", required: false }] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
 
+echarts.use([
+    BarChart$1,
+    LineChart$1,
+    PieChart,
+    GridComponent,
+    TooltipComponent,
+    CanvasRenderer,
+    GraphicComponent,
+    DataZoomComponent
+]);
+const UI_CHART_TOKENS = {
+    fontFamily: 'Inter, sans-serif',
+    text: '#1f2937',
+    muted: '#6b7280',
+    grid: '#e5e7eb',
+    tooltipBg: '#ffffff',
+    tooltipBorder: '#e5e7eb',
+    primary: '#596300',
+    primarySoft: '#eef4d3',
+    secondary: '#61661F',
+    secondarySoft: '#eef4d3',
+    axis: '#8f948d',
+    areaTop: 'rgba(201, 214, 108, 0.50)',
+    areaBottom: 'rgba(201, 214, 108, 0.05)',
+    labelLine: '#7f8572',
+    centerText: '#202020',
+    donutPalette: [
+        '#6b7319',
+        '#d9df88',
+        '#92001f',
+        '#003f55',
+        '#7c7d63',
+        '#c4d600',
+        '#37add1',
+        '#9fc6da',
+    ],
+};
+class BaseChart {
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    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 } }, providers: [provideEchartsCore({ echarts })], ngImport: i0, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\">\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\">\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 }] }] } });
+
+function buildBarChartOptions(data) {
+    const showScroll = data.length > 12;
+    const zoomEnd = showScroll ? Math.floor((12 / data.length) * 100) : 100;
+    return {
+        animation: true,
+        grid: {
+            left: 8,
+            right: 8,
+            top: 16,
+            bottom: showScroll ? 46 : 32,
+            containLabel: true,
+        },
+        ...(showScroll && {
+            dataZoom: [
+                {
+                    type: 'inside',
+                    xAxisIndex: [0],
+                    start: 0,
+                    end: zoomEnd,
+                },
+                {
+                    type: 'slider',
+                    show: true,
+                    xAxisIndex: [0],
+                    start: 0,
+                    end: zoomEnd,
+                    bottom: 10,
+                    height: 16,
+                    fillerColor: 'rgba(97, 102, 31, 0.2)',
+                    borderColor: 'transparent',
+                    backgroundColor: 'rgba(97, 102, 31, 0.05)',
+                    dataBackground: {
+                        lineStyle: { color: UI_CHART_TOKENS.muted, opacity: 0.4 },
+                        areaStyle: { color: UI_CHART_TOKENS.muted, opacity: 0.1 }
+                    },
+                    selectedDataBackground: {
+                        lineStyle: { color: UI_CHART_TOKENS.secondary, opacity: 0.8 },
+                        areaStyle: { color: UI_CHART_TOKENS.secondary, opacity: 0.3 }
+                    },
+                    handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z',
+                    handleSize: '120%',
+                    handleStyle: {
+                        color: '#fff',
+                        borderColor: UI_CHART_TOKENS.secondary,
+                        borderWidth: 1.5,
+                        shadowBlur: 3,
+                        shadowColor: 'rgba(97, 102, 31, 0.3)',
+                        shadowOffsetX: 1,
+                        shadowOffsetY: 1
+                    },
+                    moveHandleStyle: {
+                        color: UI_CHART_TOKENS.secondary,
+                        opacity: 0.6
+                    },
+                    textStyle: {
+                        color: UI_CHART_TOKENS.secondary,
+                        fontFamily: UI_CHART_TOKENS.fontFamily,
+                        fontWeight: 500
+                    }
+                }
+            ]
+        }),
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+            backgroundColor: UI_CHART_TOKENS.tooltipBg,
+            borderColor: UI_CHART_TOKENS.tooltipBorder,
+            borderWidth: 1,
+            textStyle: {
+                color: UI_CHART_TOKENS.text,
+                fontSize: 12,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
+            },
+            extraCssText: `
+        border-radius: 12px;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+        padding: 10px 12px;
+      `,
+        },
+        xAxis: {
+            type: 'category',
+            data: data.map(item => item.label),
+            axisLine: {
+                show: true,
+            },
+            axisTick: {
+                show: true,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: UI_CHART_TOKENS.muted,
+                    type: 'dashed',
+                    width: 1,
+                    opacity: 0.1,
+                },
+            },
+            axisLabel: {
+                color: UI_CHART_TOKENS.muted,
+                fontSize: 12,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
+                interval: 0,
+                rotate: data.length > 6 ? 45 : 0,
+                width: 80,
+                overflow: 'truncate',
+            },
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: true,
+            },
+            axisTick: {
+                show: true,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: UI_CHART_TOKENS.muted,
+                    type: 'dashed',
+                    width: 1,
+                    opacity: 0.1,
+                },
+            },
+            axisLabel: {
+                color: UI_CHART_TOKENS.muted,
+                fontSize: 12,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
+            },
+        },
+        series: [
+            {
+                type: 'bar',
+                data: data.map(item => item.value),
+                barWidth: 32,
+                itemStyle: {
+                    color: UI_CHART_TOKENS.secondary,
+                },
+                emphasis: {
+                    itemStyle: {
+                        color: UI_CHART_TOKENS.secondary,
+                    },
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    color: '#374151',
+                    fontSize: 12,
+                },
+            },
+        ],
+    };
+}
+class BarChart {
+    title = input('Bar Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    toggleExpand = () => this.isExpanded.update(v => !v);
+    options = computed(() => buildBarChartOptions(this.data()), ...(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 } }, 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: [".bar-chart-container{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}.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:999}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-bar-chart', imports: [BaseChart], template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"bar-chart-header\">\r\n    <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [".bar-chart-container{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}.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:999}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
+function buildLineChartOptions(data) {
+    const showScroll = data.length > 12;
+    const zoomEnd = showScroll ? Math.floor((12 / data.length) * 100) : 100;
+    return {
+        animation: true,
+        backgroundColor: 'transparent',
+        grid: {
+            left: 16,
+            right: 16,
+            top: 20,
+            bottom: showScroll ? 46 : 16,
+            containLabel: true,
+        },
+        ...(showScroll && {
+            dataZoom: [
+                {
+                    type: 'inside',
+                    xAxisIndex: [0],
+                    start: 0,
+                    end: zoomEnd,
+                },
+                {
+                    type: 'slider',
+                    show: true,
+                    xAxisIndex: [0],
+                    start: 0,
+                    end: zoomEnd,
+                    bottom: 10,
+                    height: 16,
+                    fillerColor: 'rgba(97, 102, 31, 0.2)',
+                    borderColor: 'transparent',
+                    backgroundColor: 'rgba(97, 102, 31, 0.05)',
+                    dataBackground: {
+                        lineStyle: { color: UI_CHART_TOKENS.muted, opacity: 0.4 },
+                        areaStyle: { color: UI_CHART_TOKENS.muted, opacity: 0.1 }
+                    },
+                    selectedDataBackground: {
+                        lineStyle: { color: UI_CHART_TOKENS.secondary, opacity: 0.8 },
+                        areaStyle: { color: UI_CHART_TOKENS.secondary, opacity: 0.3 }
+                    },
+                    handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z',
+                    handleSize: '120%',
+                    handleStyle: {
+                        color: '#fff',
+                        borderColor: UI_CHART_TOKENS.secondary,
+                        borderWidth: 1.5,
+                        shadowBlur: 3,
+                        shadowColor: 'rgba(97, 102, 31, 0.3)',
+                        shadowOffsetX: 1,
+                        shadowOffsetY: 1
+                    },
+                    moveHandleStyle: {
+                        color: UI_CHART_TOKENS.secondary,
+                        opacity: 0.6
+                    },
+                    textStyle: {
+                        color: UI_CHART_TOKENS.secondary,
+                        fontFamily: UI_CHART_TOKENS.fontFamily,
+                        fontWeight: 500
+                    }
+                }
+            ]
+        }),
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: UI_CHART_TOKENS.tooltipBg,
+            borderColor: UI_CHART_TOKENS.tooltipBorder,
+            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;
+      `,
+            axisPointer: {
+                type: 'line',
+                lineStyle: {
+                    color: '#bfc4a6',
+                    width: 1,
+                    type: 'dashed',
+                },
+            },
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: data.map(item => item.label),
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: UI_CHART_TOKENS.axis,
+                    width: 1,
+                },
+            },
+            axisTick: {
+                show: true,
+            },
+            axisLabel: {
+                color: UI_CHART_TOKENS.muted,
+                fontSize: 12,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
+                interval: 0,
+                rotate: data.length > 6 ? 45 : 0,
+                width: 80,
+                overflow: 'truncate',
+                margin: 10,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: UI_CHART_TOKENS.muted,
+                    type: 'dotted',
+                    width: 1,
+                    opacity: 0.1,
+                },
+            },
+        },
+        yAxis: {
+            type: 'value',
+            min: 0,
+            axisLine: {
+                show: true,
+            },
+            axisTick: {
+                show: true,
+            },
+            axisLabel: {
+                color: UI_CHART_TOKENS.muted,
+                fontSize: 12,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
+                margin: 8,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: UI_CHART_TOKENS.muted,
+                    type: 'dotted',
+                    width: 1,
+                    opacity: 0.1,
+                },
+            },
+        },
+        series: [
+            {
+                type: 'line',
+                smooth: true,
+                symbol: 'none',
+                data: data.map(item => item.value),
+                itemStyle: {
+                    color: UI_CHART_TOKENS.secondary,
+                },
+                lineStyle: {
+                    color: UI_CHART_TOKENS.secondary,
+                    width: 2,
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: UI_CHART_TOKENS.areaTop },
+                        { offset: 1, color: UI_CHART_TOKENS.areaBottom },
+                    ]),
+                },
+            },
+        ],
+    };
+}
+class LineChart {
+    title = input('Line Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    toggleExpand = () => this.isExpanded.update(v => !v);
+    options = computed(() => buildLineChartOptions(this.data()), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LineChart, isStandalone: true, selector: "lib-line-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"line-chart-header\">\r\n    <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [".line-chart-container{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}.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:999}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-line-chart', imports: [BaseChart], template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"line-chart-header\">\r\n    <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [".line-chart-container{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}.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:999}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+function getTotal(data) {
+    return data.reduce((acc, item) => acc + item.value, 0);
+}
+function buildDonutChartOptions(data) {
+    const total = getTotal(data);
+    return {
+        animation: true,
+        backgroundColor: 'transparent',
+        color: UI_CHART_TOKENS.donutPalette,
+        dataZoom: [
+            {
+                type: 'inside',
+                xAxisIndex: [0],
+                start: 0,
+                end: 100,
+            },
+        ],
+        tooltip: {
+            trigger: 'item',
+            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) => `${params.name}: ${params.value}`,
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['44%', '72%'],
+                center: ['50%', '52%'],
+                avoidLabelOverlap: true,
+                minAngle: 4,
+                itemStyle: {
+                    borderWidth: 0,
+                },
+                label: {
+                    show: true,
+                    position: 'outside',
+                    formatter: (params) => {
+                        return `{label|${params.name}}\n{value|${params.value}}`;
+                    },
+                    rich: {
+                        label: {
+                            fontSize: 12,
+                            fontFamily: UI_CHART_TOKENS.fontFamily,
+                            color: UI_CHART_TOKENS.muted,
+                            lineHeight: 16,
+                        },
+                        value: {
+                            fontSize: 14,
+                            fontWeight: 700,
+                            fontFamily: UI_CHART_TOKENS.fontFamily,
+                            lineHeight: 18,
+                        },
+                    },
+                },
+                labelLine: {
+                    show: true,
+                    length: 12,
+                    length2: 20,
+                    lineStyle: {
+                        color: UI_CHART_TOKENS.labelLine,
+                        width: 1,
+                    },
+                },
+                data: data.map((item, index) => ({
+                    name: item.label,
+                    value: item.value,
+                    label: {
+                        rich: {
+                            value: {
+                                fontSize: 14,
+                                fontWeight: 700,
+                                fontFamily: UI_CHART_TOKENS.fontFamily,
+                                color: UI_CHART_TOKENS.donutPalette[index % UI_CHART_TOKENS.donutPalette.length],
+                                lineHeight: 18,
+                            },
+                        },
+                    },
+                })),
+            },
+        ],
+        graphic: [
+            {
+                type: 'text',
+                left: 'center',
+                top: '48%',
+                style: {
+                    text: `${total}`,
+                    textAlign: 'center',
+                    fill: UI_CHART_TOKENS.centerText,
+                    fontSize: 24,
+                    fontWeight: 700,
+                    fontFamily: UI_CHART_TOKENS.fontFamily,
+                },
+            },
+        ],
+    };
+}
+class DonutChart {
+    title = input('Donut Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    toggleExpand = () => this.isExpanded.update(v => !v);
+    options = computed(() => buildDonutChartOptions(this.data()), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    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 } }, 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()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [".donut-chart-container{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}.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:999}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DonutChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-donut-chart', imports: [BaseChart], 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()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [".donut-chart-container{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}.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:999}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+const Colors = {
+    primary: '#4B5E05',
+    secondary: '#063546',
+    tertiary: '#6B0518',
+    quaternary: '#F57C00',
+};
+class KpiCard {
+    title = input('Titulo', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = input('Descripción', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    value = input('0', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    iconColor = input('primary', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    resolvedIconColor = computed(() => {
+        const color = this.iconColor();
+        // Revisa si es un predeterminado, si no, lo asume como hex code.
+        return Colors[color] || color;
+    }, ...(ngDevMode ? [{ debugName: "resolvedIconColor" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KpiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: KpiCard, isStandalone: true, selector: "lib-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kpi-card\">\n  <div class=\"kpi-card-text\">\n    <h3 class=\"kpi-title\">{{ title() }}</h3>\n    <p class=\"kpi-description\">{{ description() }}</p>\n    <h2 class=\"kpi-value\">{{ value() }}</h2>\n  </div>\n  <div class=\"kpi-icon-container\" [style.--kpi-base-color]=\"resolvedIconColor()\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [".kpi-card{background-color:#f0f0db;border-radius:20px;padding:24px;display:flex;justify-content:space-between;font-family:Roboto,sans-serif;min-width:260px}.kpi-card-text{display:flex;flex-direction:column}.kpi-title{font-size:20px;font-weight:700;color:#37474f;margin:0 0 4px}.kpi-description{font-size:15px;font-weight:500;color:#546e7a;margin:0 0 16px}.kpi-value{font-size:28px;font-weight:800;color:#10161a;margin:0;line-height:1}.kpi-icon-container{width:72px;height:72px;background-color:var(--kpi-base-color, #4B5E05);color:color-mix(in srgb,var(--kpi-base-color, #4B5E05) 35%,white);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 4px 6px #0000000d}::ng-deep .kpi-icon-container svg{width:32px;height:32px;stroke:currentColor;stroke-width:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KpiCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-kpi-card', imports: [CommonModule], template: "<div class=\"kpi-card\">\n  <div class=\"kpi-card-text\">\n    <h3 class=\"kpi-title\">{{ title() }}</h3>\n    <p class=\"kpi-description\">{{ description() }}</p>\n    <h2 class=\"kpi-value\">{{ value() }}</h2>\n  </div>\n  <div class=\"kpi-icon-container\" [style.--kpi-base-color]=\"resolvedIconColor()\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [".kpi-card{background-color:#f0f0db;border-radius:20px;padding:24px;display:flex;justify-content:space-between;font-family:Roboto,sans-serif;min-width:260px}.kpi-card-text{display:flex;flex-direction:column}.kpi-title{font-size:20px;font-weight:700;color:#37474f;margin:0 0 4px}.kpi-description{font-size:15px;font-weight:500;color:#546e7a;margin:0 0 16px}.kpi-value{font-size:28px;font-weight:800;color:#10161a;margin:0;line-height:1}.kpi-icon-container{width:72px;height:72px;background-color:var(--kpi-base-color, #4B5E05);color:color-mix(in srgb,var(--kpi-base-color, #4B5E05) 35%,white);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 4px 6px #0000000d}::ng-deep .kpi-icon-container svg{width:32px;height:32px;stroke:currentColor;stroke-width:2}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }] } });
+
 // src/app/components/public-api.ts
-// Exportar el componente
+// Exportar los componentes
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Button, ButtonCards, CARD_BG, CardContent, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, Footer, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, Loader, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, WizardForm };
+export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, Loader, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map