sapenlinea-components 0.8.73 → 0.9.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/sapenlinea-components.mjs +182 -85
  2. package/fesm2022/sapenlinea-components.mjs.map +1 -1
  3. package/index.d.ts +161 -25
  4. package/package.json +1 -1
package/fesm2022/sapenlinea-components.mjs CHANGED
@@ -10,6 +10,7 @@ import * as echarts from 'echarts/core';
10
10
  import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
11
11
  import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent, VisualMapComponent, LegendComponent } from 'echarts/components';
12
12
  import { CanvasRenderer } from 'echarts/renderers';
13
+ import { DomSanitizer } from '@angular/platform-browser';
13
14
 
14
15
  class PaginationComponent {
15
16
  // Inputs as Models/Signals
@@ -4051,11 +4052,11 @@ class TitleFilters {
4051
4052
  this.clickButtonBack.emit();
4052
4053
  }
4053
4054
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, deps: [], target: i0.ɵɵFactoryTarget.Component });
4054
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, clickButtonIcon: { classPropertyName: "clickButtonIcon", publicName: "clickButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, clickButtonLabel: { classPropertyName: "clickButtonLabel", publicName: "clickButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowFilters: { classPropertyName: "alwaysShowFilters", publicName: "alwaysShowFilters", isSignal: true, isRequired: false, transformFunction: null }, showSecondaryButton: { classPropertyName: "showSecondaryButton", publicName: "showSecondaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonExport: { classPropertyName: "showButtonExport", publicName: "showButtonExport", isSignal: true, isRequired: false, transformFunction: null }, exportButtonIcon: { classPropertyName: "exportButtonIcon", publicName: "exportButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, exportButtonLabel: { classPropertyName: "exportButtonLabel", publicName: "exportButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonBack: { classPropertyName: "showButtonBack", publicName: "showButtonBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", clearFilters: "clearFilters", filterButtonClicked: "filterButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", exportButtonClicked: "exportButtonClicked", clickButtonBack: "clickButtonBack" }, viewQueries: [{ propertyName: "filtersContainer", first: true, predicate: ["filtersContainer"], descendants: true, read: ElementRef }, { propertyName: "submitBtn", first: true, predicate: ["submitBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"header-container-table\">\n <div class=\"filters-dashboard-table\">\n <div class=\"left-title\">\n @if(showButtonBack()) {\n <div class=\"button-back\" (click)=\"clickButton()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M5 12l6 6\" /><path d=\"M5 12l6 -6\" /></svg>\n </div>\n }\n <div class=\"title-table\">{{ title() }}</div>\n </div>\n\n @if (buttonMode() === 'toggle') {\n <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n </svg>\n <div class=\"label\">Filtros</div>\n </div>\n }\n @if (buttonMode() === 'action') {\n <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path fill=\"#fff\"\n d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n <path fill=\"#fff\"\n d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n </svg>\n <div class=\"label\">Ir al Mapa</div>\n </div>\n }\n @if (buttonMode() === 'click') {\n <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n @if (clickButtonIcon()) {\n <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n }\n {{ clickButtonLabel() }}\n </lib-button>\n }\n <div class=\"secondary-action-btn\">\n @if (showSecondaryButton()) {\n <lib-button variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n @if (secondaryButtonIcon()) {\n <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n }\n {{ secondaryButtonLabel() }}\n </lib-button>\n }\n @if (showButtonExport()) {\n <lib-button variant=\"outline\" (clicked)=\"exportButtonClicked.emit()\">\n <span class=\"btn-icon {{exportButtonIcon()}}\"></span>\n {{ exportButtonLabel() }}\n </lib-button>\n }\n </div>\n </div>\n\n @if (filtersVisible) {\n <div class=\"filters-container\" #filtersContainer>\n <div class=\"filters-wrapper\">\n\n @for (config of normalizedFiltersConfig(); track $index) {\n @switch (config.type) {\n @case ('text') {\n <lib-input-text-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('number') {\n <lib-input-number-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('select') {\n <lib-input-select-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('date') {\n <lib-date-time-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (dateSelected)=\"onDateSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('time') {\n <lib-input-time-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n }\n }\n\n <div class=\"actions\">\n <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\" (keydown.enter)=\"onApplyFilters()\">\n Aplicar Filtros\n </lib-button>\n\n <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\"> \n Borrar Filtros \n </lib-button>\n </div>\n </div>\n </div>\n }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:100}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon-tabler-filter{color:var(--schemes-on-primary, #ffffff);width:20px;height:20px}.secondary-action-btn{margin-left:auto;display:flex;gap:10px}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-filter{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: InputNumberFilter, selector: "lib-input-number-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputTextFilter, selector: "lib-input-text-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputSelectFilter, selector: "lib-input-select-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: DateTimeFilter, selector: "lib-date-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["dateSelected", "dateChange", "enterPressed"] }, { kind: "component", type: InputTimeFilter, selector: "lib-input-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: Button, selector: "lib-button", inputs: ["variant", "type", "disabled", "fullWidth", "size"], outputs: ["clicked"] }] });
4055
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, clickButtonIcon: { classPropertyName: "clickButtonIcon", publicName: "clickButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, clickButtonLabel: { classPropertyName: "clickButtonLabel", publicName: "clickButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowFilters: { classPropertyName: "alwaysShowFilters", publicName: "alwaysShowFilters", isSignal: true, isRequired: false, transformFunction: null }, showSecondaryButton: { classPropertyName: "showSecondaryButton", publicName: "showSecondaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonExport: { classPropertyName: "showButtonExport", publicName: "showButtonExport", isSignal: true, isRequired: false, transformFunction: null }, exportButtonIcon: { classPropertyName: "exportButtonIcon", publicName: "exportButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, exportButtonLabel: { classPropertyName: "exportButtonLabel", publicName: "exportButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonBack: { classPropertyName: "showButtonBack", publicName: "showButtonBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", clearFilters: "clearFilters", filterButtonClicked: "filterButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", exportButtonClicked: "exportButtonClicked", clickButtonBack: "clickButtonBack" }, viewQueries: [{ propertyName: "filtersContainer", first: true, predicate: ["filtersContainer"], descendants: true, read: ElementRef }, { propertyName: "submitBtn", first: true, predicate: ["submitBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"header-container-table\">\n <div class=\"filters-dashboard-table\">\n <div class=\"left-title\">\n @if(showButtonBack()) {\n <div class=\"button-back\" (click)=\"clickButton()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M5 12l14 0\" />\n <path d=\"M5 12l6 6\" />\n <path d=\"M5 12l6 -6\" />\n </svg>\n </div>\n }\n <div class=\"title-table\">{{ title() }}</div>\n </div>\n\n @if (buttonMode() === 'toggle') {\n <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n </svg>\n <div class=\"label\">Filtros</div>\n </div>\n }\n @if (buttonMode() === 'action') {\n <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path fill=\"#fff\"\n d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n <path fill=\"#fff\"\n d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n </svg>\n <div class=\"label\">Ir al Mapa</div>\n </div>\n }\n @if (buttonMode() === 'click') {\n <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n @if (clickButtonIcon()) {\n <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n }\n {{ clickButtonLabel() }}\n </lib-button>\n }\n <div class=\"secondary-action-btn\">\n @if (showSecondaryButton()) {\n <lib-button variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n @if (secondaryButtonIcon()) {\n <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n }\n {{ secondaryButtonLabel() }}\n </lib-button>\n }\n @if (showButtonExport()) {\n <lib-button variant=\"outline\" (clicked)=\"exportButtonClicked.emit()\">\n <span class=\"btn-icon {{exportButtonIcon()}}\"></span>\n {{ exportButtonLabel() }}\n </lib-button>\n }\n @if (buttonMode() === 'clickRight') {\n <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n @if (clickButtonIcon()) {\n <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n }\n {{ clickButtonLabel() }}\n </lib-button>\n }\n </div>\n </div>\n\n @if (filtersVisible) {\n <div class=\"filters-container\" #filtersContainer>\n <div class=\"filters-wrapper\">\n\n @for (config of normalizedFiltersConfig(); track $index) {\n @switch (config.type) {\n @case ('text') {\n <lib-input-text-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n }\n @case ('number') {\n <lib-input-number-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n }\n @case ('select') {\n <lib-input-select-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n }\n @case ('date') {\n <lib-date-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n (dateSelected)=\"onDateSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n }\n @case ('time') {\n <lib-input-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n }\n }\n }\n\n <div class=\"actions\">\n <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\"\n (keydown.enter)=\"onApplyFilters()\">\n Aplicar Filtros\n </lib-button>\n\n <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\">\n Borrar Filtros\n </lib-button>\n </div>\n </div>\n </div>\n }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:100}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon-tabler-filter{color:var(--schemes-on-primary, #ffffff);width:20px;height:20px}.secondary-action-btn{margin-left:auto;display:flex;gap:10px}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-filter{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: InputNumberFilter, selector: "lib-input-number-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputTextFilter, selector: "lib-input-text-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputSelectFilter, selector: "lib-input-select-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: DateTimeFilter, selector: "lib-date-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["dateSelected", "dateChange", "enterPressed"] }, { kind: "component", type: InputTimeFilter, selector: "lib-input-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: Button, selector: "lib-button", inputs: ["variant", "type", "disabled", "fullWidth", "size"], outputs: ["clicked"] }] });
4055
4056
  }
4056
4057
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, decorators: [{
4057
4058
  type: Component,
4058
- args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter, InputTimeFilter, Button], template: "<div class=\"header-container-table\">\n <div class=\"filters-dashboard-table\">\n <div class=\"left-title\">\n @if(showButtonBack()) {\n <div class=\"button-back\" (click)=\"clickButton()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M5 12l6 6\" /><path d=\"M5 12l6 -6\" /></svg>\n </div>\n }\n <div class=\"title-table\">{{ title() }}</div>\n </div>\n\n @if (buttonMode() === 'toggle') {\n <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n </svg>\n <div class=\"label\">Filtros</div>\n </div>\n }\n @if (buttonMode() === 'action') {\n <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path fill=\"#fff\"\n d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n <path fill=\"#fff\"\n d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n </svg>\n <div class=\"label\">Ir al Mapa</div>\n </div>\n }\n @if (buttonMode() === 'click') {\n <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n @if (clickButtonIcon()) {\n <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n }\n {{ clickButtonLabel() }}\n </lib-button>\n }\n <div class=\"secondary-action-btn\">\n @if (showSecondaryButton()) {\n <lib-button variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n @if (secondaryButtonIcon()) {\n <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n }\n {{ secondaryButtonLabel() }}\n </lib-button>\n }\n @if (showButtonExport()) {\n <lib-button variant=\"outline\" (clicked)=\"exportButtonClicked.emit()\">\n <span class=\"btn-icon {{exportButtonIcon()}}\"></span>\n {{ exportButtonLabel() }}\n </lib-button>\n }\n </div>\n </div>\n\n @if (filtersVisible) {\n <div class=\"filters-container\" #filtersContainer>\n <div class=\"filters-wrapper\">\n\n @for (config of normalizedFiltersConfig(); track $index) {\n @switch (config.type) {\n @case ('text') {\n <lib-input-text-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('number') {\n <lib-input-number-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('select') {\n <lib-input-select-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('date') {\n <lib-date-time-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (dateSelected)=\"onDateSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('time') {\n <lib-input-time-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n }\n }\n\n <div class=\"actions\">\n <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\" (keydown.enter)=\"onApplyFilters()\">\n Aplicar Filtros\n </lib-button>\n\n <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\"> \n Borrar Filtros \n </lib-button>\n </div>\n </div>\n </div>\n }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:100}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon-tabler-filter{color:var(--schemes-on-primary, #ffffff);width:20px;height:20px}.secondary-action-btn{margin-left:auto;display:flex;gap:10px}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-filter{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
4059
+ args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter, InputTimeFilter, Button], template: "<div class=\"header-container-table\">\n <div class=\"filters-dashboard-table\">\n <div class=\"left-title\">\n @if(showButtonBack()) {\n <div class=\"button-back\" (click)=\"clickButton()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M5 12l14 0\" />\n <path d=\"M5 12l6 6\" />\n <path d=\"M5 12l6 -6\" />\n </svg>\n </div>\n }\n <div class=\"title-table\">{{ title() }}</div>\n </div>\n\n @if (buttonMode() === 'toggle') {\n <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n </svg>\n <div class=\"label\">Filtros</div>\n </div>\n }\n @if (buttonMode() === 'action') {\n <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path fill=\"#fff\"\n d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n <path fill=\"#fff\"\n d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n </svg>\n <div class=\"label\">Ir al Mapa</div>\n </div>\n }\n @if (buttonMode() === 'click') {\n <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n @if (clickButtonIcon()) {\n <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n }\n {{ clickButtonLabel() }}\n </lib-button>\n }\n <div class=\"secondary-action-btn\">\n @if (showSecondaryButton()) {\n <lib-button variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n @if (secondaryButtonIcon()) {\n <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n }\n {{ secondaryButtonLabel() }}\n </lib-button>\n }\n @if (showButtonExport()) {\n <lib-button variant=\"outline\" (clicked)=\"exportButtonClicked.emit()\">\n <span class=\"btn-icon {{exportButtonIcon()}}\"></span>\n {{ exportButtonLabel() }}\n </lib-button>\n }\n @if (buttonMode() === 'clickRight') {\n <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n @if (clickButtonIcon()) {\n <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n }\n {{ clickButtonLabel() }}\n </lib-button>\n }\n </div>\n </div>\n\n @if (filtersVisible) {\n <div class=\"filters-container\" #filtersContainer>\n <div class=\"filters-wrapper\">\n\n @for (config of normalizedFiltersConfig(); track $index) {\n @switch (config.type) {\n @case ('text') {\n <lib-input-text-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n }\n @case ('number') {\n <lib-input-number-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n }\n @case ('select') {\n <lib-input-select-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n }\n @case ('date') {\n <lib-date-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n (dateSelected)=\"onDateSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n }\n @case ('time') {\n <lib-input-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\n }\n }\n }\n\n <div class=\"actions\">\n <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\"\n (keydown.enter)=\"onApplyFilters()\">\n Aplicar Filtros\n </lib-button>\n\n <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\">\n Borrar Filtros\n </lib-button>\n </div>\n </div>\n </div>\n }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index:100}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.left-title{display:flex;flex-direction:row;gap:8px}.button-back{display:flex;align-items:center;justify-content:center;cursor:pointer}.button-back svg{width:28px;height:28px;color:#171c1f}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:99;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon-tabler-filter{color:var(--schemes-on-primary, #ffffff);width:20px;height:20px}.secondary-action-btn{margin-left:auto;display:flex;gap:10px}.btn-icon{flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;display:inline-block}.icon-filter{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-download{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 11l5 5l5 -5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-upload{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\" /><path d=\"M7 9l5 -5l5 5\" /><path d=\"M12 4l0 12\" /></svg>')}.icon-export{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\" /><path d=\"M3 10h18\" /><path d=\"M10 3v18\" /><path d=\"M16 19h6\" /><path d=\"M19 16l3 3l-3 3\" /></svg>')}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
4059
4060
  }], propDecorators: { filtersContainer: [{
4060
4061
  type: ViewChild,
4061
4062
  args: ['filtersContainer', { read: ElementRef }]
@@ -4633,7 +4634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
4633
4634
  args: [{ selector: 'lib-base-chart', imports: [NgxEchartsDirective], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\" (chartClick)=\"onChartClick($event)\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"] }]
4634
4635
  }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }] } });
4635
4636
 
4636
- function buildBarChartOptions(data, multiSeries) {
4637
+ function buildBarChartOptions(data, multiSeries, horizontal = false) {
4637
4638
  const showScroll = data.length > 12;
4638
4639
  const zoomEnd = showScroll ? Math.floor((12 / data.length) * 100) : 100;
4639
4640
  const isMulti = !!multiSeries && multiSeries.length > 0;
@@ -4649,7 +4650,7 @@ function buildBarChartOptions(data, multiSeries) {
4649
4650
  },
4650
4651
  label: {
4651
4652
  show: true,
4652
- position: 'top',
4653
+ position: horizontal ? 'right' : 'top',
4653
4654
  color: UI_CHART_TOKENS.muted,
4654
4655
  fontSize: 10,
4655
4656
  },
@@ -4669,7 +4670,7 @@ function buildBarChartOptions(data, multiSeries) {
4669
4670
  },
4670
4671
  label: {
4671
4672
  show: true,
4672
- position: 'top',
4673
+ position: horizontal ? 'right' : 'top',
4673
4674
  color: '#374151',
4674
4675
  fontSize: 12,
4675
4676
  },
@@ -4678,8 +4679,8 @@ function buildBarChartOptions(data, multiSeries) {
4678
4679
  return {
4679
4680
  animation: true,
4680
4681
  grid: {
4681
- left: 8,
4682
- right: 8,
4682
+ left: horizontal ? 16 : 8,
4683
+ right: horizontal ? 40 : 8,
4683
4684
  top: isMulti ? 40 : 16,
4684
4685
  bottom: showScroll ? 46 : 32,
4685
4686
  containLabel: true,
@@ -4699,18 +4700,16 @@ function buildBarChartOptions(data, multiSeries) {
4699
4700
  dataZoom: [
4700
4701
  {
4701
4702
  type: 'inside',
4702
- xAxisIndex: [0],
4703
+ ...(horizontal ? { yAxisIndex: [0] } : { xAxisIndex: [0] }),
4703
4704
  start: 0,
4704
4705
  end: zoomEnd,
4705
4706
  },
4706
4707
  {
4707
4708
  type: 'slider',
4708
4709
  show: true,
4709
- xAxisIndex: [0],
4710
+ ...(horizontal ? { yAxisIndex: [0], right: 10, width: 16 } : { xAxisIndex: [0], bottom: 10, height: 16 }),
4710
4711
  start: 0,
4711
4712
  end: zoomEnd,
4712
- bottom: 10,
4713
- height: 16,
4714
4713
  fillerColor: 'rgba(97, 102, 31, 0.2)',
4715
4714
  borderColor: 'transparent',
4716
4715
  backgroundColor: 'rgba(97, 102, 31, 0.05)',
@@ -4764,57 +4763,72 @@ function buildBarChartOptions(data, multiSeries) {
4764
4763
  padding: 10px 12px;
4765
4764
  `,
4766
4765
  },
4767
- xAxis: {
4768
- type: 'category',
4769
- data: xAxisData,
4770
- axisLine: {
4771
- show: true,
4772
- },
4773
- axisTick: {
4774
- show: true,
4775
- },
4776
- splitLine: {
4777
- show: true,
4778
- lineStyle: {
4766
+ xAxis: horizontal
4767
+ ? {
4768
+ type: 'value',
4769
+ axisLine: { show: true },
4770
+ axisTick: { show: true },
4771
+ splitLine: {
4772
+ show: true,
4773
+ lineStyle: { color: UI_CHART_TOKENS.muted, type: 'dashed', width: 1, opacity: 0.1 },
4774
+ },
4775
+ axisLabel: {
4779
4776
  color: UI_CHART_TOKENS.muted,
4780
- type: 'dashed',
4781
- width: 1,
4782
- opacity: 0.1,
4777
+ fontSize: 12,
4778
+ fontFamily: UI_CHART_TOKENS.fontFamily,
4783
4779
  },
4784
- },
4785
- axisLabel: {
4786
- color: UI_CHART_TOKENS.muted,
4787
- fontSize: 12,
4788
- fontFamily: UI_CHART_TOKENS.fontFamily,
4789
- interval: 0,
4790
- rotate: data.length > 6 ? 45 : 0,
4791
- width: 80,
4792
- overflow: 'truncate',
4793
- },
4794
- },
4795
- yAxis: {
4796
- type: 'value',
4797
- axisLine: {
4798
- show: true,
4799
- },
4800
- axisTick: {
4801
- show: true,
4802
- },
4803
- splitLine: {
4804
- show: true,
4805
- lineStyle: {
4780
+ }
4781
+ : {
4782
+ type: 'category',
4783
+ data: xAxisData,
4784
+ axisLine: { show: true },
4785
+ axisTick: { show: true },
4786
+ splitLine: {
4787
+ show: true,
4788
+ lineStyle: { color: UI_CHART_TOKENS.muted, type: 'dashed', width: 1, opacity: 0.1 },
4789
+ },
4790
+ axisLabel: {
4806
4791
  color: UI_CHART_TOKENS.muted,
4807
- type: 'dashed',
4808
- width: 1,
4809
- opacity: 0.1,
4792
+ fontSize: 12,
4793
+ fontFamily: UI_CHART_TOKENS.fontFamily,
4794
+ interval: 0,
4795
+ rotate: data.length > 6 ? 45 : 0,
4796
+ width: 80,
4797
+ overflow: 'truncate',
4810
4798
  },
4811
4799
  },
4812
- axisLabel: {
4813
- color: UI_CHART_TOKENS.muted,
4814
- fontSize: 12,
4815
- fontFamily: UI_CHART_TOKENS.fontFamily,
4800
+ yAxis: horizontal
4801
+ ? {
4802
+ type: 'category',
4803
+ data: xAxisData,
4804
+ axisLine: { show: true },
4805
+ axisTick: { show: true },
4806
+ splitLine: {
4807
+ show: true,
4808
+ lineStyle: { color: UI_CHART_TOKENS.muted, type: 'dashed', width: 1, opacity: 0.1 },
4809
+ },
4810
+ axisLabel: {
4811
+ color: UI_CHART_TOKENS.muted,
4812
+ fontSize: 12,
4813
+ fontFamily: UI_CHART_TOKENS.fontFamily,
4814
+ width: 100,
4815
+ overflow: 'truncate',
4816
+ },
4817
+ }
4818
+ : {
4819
+ type: 'value',
4820
+ axisLine: { show: true },
4821
+ axisTick: { show: true },
4822
+ splitLine: {
4823
+ show: true,
4824
+ lineStyle: { color: UI_CHART_TOKENS.muted, type: 'dashed', width: 1, opacity: 0.1 },
4825
+ },
4826
+ axisLabel: {
4827
+ color: UI_CHART_TOKENS.muted,
4828
+ fontSize: 12,
4829
+ fontFamily: UI_CHART_TOKENS.fontFamily,
4830
+ },
4816
4831
  },
4817
- },
4818
4832
  series: series,
4819
4833
  };
4820
4834
  }
@@ -4822,18 +4836,20 @@ class BarChart {
4822
4836
  title = input('Bar Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
4823
4837
  data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
4824
4838
  multiSeries = input(...(ngDevMode ? [undefined, { debugName: "multiSeries" }] : []));
4839
+ horizontal = input(false, ...(ngDevMode ? [{ debugName: "horizontal" }] : []));
4825
4840
  isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
4826
4841
  toggleExpand = () => this.isExpanded.update(v => !v);
4827
- options = computed(() => buildBarChartOptions(this.data(), this.multiSeries()), ...(ngDevMode ? [{ debugName: "options" }] : []));
4842
+ options = computed(() => buildBarChartOptions(this.data(), this.multiSeries(), this.horizontal()), ...(ngDevMode ? [{ debugName: "options" }] : []));
4828
4843
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
4829
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"bar-chart-header\">\r\n <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
4844
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"bar-chart-header\">\r\n <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
4830
4845
  }
4831
4846
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, decorators: [{
4832
4847
  type: Component,
4833
4848
  args: [{ selector: 'lib-bar-chart', imports: [BaseChart], template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"bar-chart-header\">\r\n <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
4834
- }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], multiSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSeries", required: false }] }] } });
4849
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], multiSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSeries", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }] } });
4835
4850
 
4836
- function buildLineChartOptions(data) {
4851
+ function buildLineChartOptions(data, multiSeries) {
4852
+ const isMulti = !!multiSeries && multiSeries.length > 0;
4837
4853
  const showScroll = data.length > 12;
4838
4854
  const zoomEnd = showScroll ? Math.floor((12 / data.length) * 100) : 100;
4839
4855
  return {
@@ -4842,10 +4858,21 @@ function buildLineChartOptions(data) {
4842
4858
  grid: {
4843
4859
  left: 16,
4844
4860
  right: 16,
4845
- top: 20,
4861
+ top: isMulti ? 40 : 20,
4846
4862
  bottom: showScroll ? 46 : 16,
4847
4863
  containLabel: true,
4848
4864
  },
4865
+ legend: {
4866
+ show: isMulti,
4867
+ top: 0,
4868
+ icon: 'circle',
4869
+ itemWidth: 10,
4870
+ itemHeight: 10,
4871
+ textStyle: {
4872
+ color: UI_CHART_TOKENS.muted,
4873
+ fontFamily: UI_CHART_TOKENS.fontFamily,
4874
+ }
4875
+ },
4849
4876
  ...(showScroll && {
4850
4877
  dataZoom: [
4851
4878
  {
@@ -4979,43 +5006,69 @@ function buildLineChartOptions(data) {
4979
5006
  },
4980
5007
  },
4981
5008
  },
4982
- series: [
4983
- {
5009
+ series: isMulti
5010
+ ? multiSeries.map((s, index) => ({
5011
+ name: s.name,
4984
5012
  type: 'line',
4985
5013
  smooth: true,
4986
- symbol: data.length === 1 ? 'circle' : 'none',
4987
- symbolSize: 8,
4988
- data: data.map(item => item.value),
5014
+ symbol: 'circle',
5015
+ symbolSize: 6,
5016
+ data: s.data,
4989
5017
  itemStyle: {
4990
- color: UI_CHART_TOKENS.secondary,
5018
+ color: s.color || UI_CHART_TOKENS.donutPalette[index % UI_CHART_TOKENS.donutPalette.length],
4991
5019
  },
4992
5020
  lineStyle: {
4993
- color: UI_CHART_TOKENS.secondary,
5021
+ color: s.color || UI_CHART_TOKENS.donutPalette[index % UI_CHART_TOKENS.donutPalette.length],
4994
5022
  width: 2,
4995
5023
  },
4996
- areaStyle: {
4997
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
4998
- { offset: 0, color: UI_CHART_TOKENS.areaTop },
4999
- { offset: 1, color: UI_CHART_TOKENS.areaBottom },
5000
- ]),
5024
+ emphasis: {
5025
+ focus: 'series',
5026
+ itemStyle: {
5027
+ borderWidth: 2,
5028
+ borderColor: '#fff',
5029
+ shadowBlur: 6,
5030
+ shadowColor: 'rgba(0,0,0,0.15)',
5031
+ },
5001
5032
  },
5002
- },
5003
- ],
5033
+ }))
5034
+ : [
5035
+ {
5036
+ type: 'line',
5037
+ smooth: true,
5038
+ symbol: data.length === 1 ? 'circle' : 'none',
5039
+ symbolSize: 8,
5040
+ data: data.map(item => item.value),
5041
+ itemStyle: {
5042
+ color: UI_CHART_TOKENS.secondary,
5043
+ },
5044
+ lineStyle: {
5045
+ color: UI_CHART_TOKENS.secondary,
5046
+ width: 2,
5047
+ },
5048
+ areaStyle: {
5049
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
5050
+ { offset: 0, color: UI_CHART_TOKENS.areaTop },
5051
+ { offset: 1, color: UI_CHART_TOKENS.areaBottom },
5052
+ ]),
5053
+ },
5054
+ },
5055
+ ],
5004
5056
  };
5005
5057
  }
5006
5058
  class LineChart {
5007
5059
  title = input('Line Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
5008
5060
  data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
5061
+ multiSeries = input(...(ngDevMode ? [undefined, { debugName: "multiSeries" }] : []));
5009
5062
  isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
5010
5063
  toggleExpand = () => this.isExpanded.update(v => !v);
5011
- options = computed(() => buildLineChartOptions(this.data()), ...(ngDevMode ? [{ debugName: "options" }] : []));
5064
+ options = computed(() => buildLineChartOptions(this.data(), this.multiSeries()), ...(ngDevMode ? [{ debugName: "options" }] : []));
5012
5065
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
5013
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LineChart, isStandalone: true, selector: "lib-line-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"line-chart-header\">\r\n <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
5066
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LineChart, isStandalone: true, selector: "lib-line-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"line-chart-header\">\r\n <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
5014
5067
  }
5015
5068
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, decorators: [{
5016
5069
  type: Component,
5017
5070
  args: [{ selector: 'lib-line-chart', imports: [BaseChart], template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"line-chart-header\">\r\n <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
5018
- }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
5071
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], multiSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSeries", required: false }] }] } });
5019
5072
 
5020
5073
  function getTotal(data) {
5021
5074
  return data.reduce((acc, item) => acc + item.value, 0);
@@ -5245,6 +5298,7 @@ function buildHeatmapOptions(config) {
5245
5298
  xAxis: {
5246
5299
  type: 'category',
5247
5300
  data: xLabels,
5301
+ position: 'top',
5248
5302
  splitArea: {
5249
5303
  show: true,
5250
5304
  areaStyle: {
@@ -5281,10 +5335,9 @@ function buildHeatmapOptions(config) {
5281
5335
  visualMap: {
5282
5336
  min: minVal,
5283
5337
  max: maxVal,
5284
- calculable: true,
5285
- orient: 'vertical',
5286
- right: 0,
5287
- top: 'center',
5338
+ orient: 'horizontal',
5339
+ left: 'center',
5340
+ bottom: '0',
5288
5341
  itemWidth: 12,
5289
5342
  itemHeight: 120,
5290
5343
  textStyle: {
@@ -5337,11 +5390,11 @@ class Heatmap {
5337
5390
  }
5338
5391
  options = computed(() => buildHeatmapOptions(this.config()), ...(ngDevMode ? [{ debugName: "options" }] : []));
5339
5392
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Heatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
5340
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Heatmap, isStandalone: true, selector: "lib-heatmap", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"heatmap-header\">\r\n <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
5393
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Heatmap, isStandalone: true, selector: "lib-heatmap", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"heatmap-header\">\r\n <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
5341
5394
  }
5342
5395
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Heatmap, decorators: [{
5343
5396
  type: Component,
5344
- args: [{ selector: 'lib-heatmap', imports: [BaseChart], template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"heatmap-header\">\r\n <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
5397
+ args: [{ selector: 'lib-heatmap', imports: [BaseChart], template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"heatmap-header\">\r\n <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
5345
5398
  }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
5346
5399
 
5347
5400
  class GeoAPIMaps {
@@ -5663,6 +5716,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5663
5716
  args: ['fileInput']
5664
5717
  }] } });
5665
5718
 
5719
+ class PdfViewerService {
5720
+ showModalDocuments = signal(false, ...(ngDevMode ? [{ debugName: "showModalDocuments" }] : []));
5721
+ selectedPdf = signal(null, ...(ngDevMode ? [{ debugName: "selectedPdf" }] : []));
5722
+ openModal() {
5723
+ this.showModalDocuments.set(true);
5724
+ }
5725
+ closeModal() {
5726
+ this.showModalDocuments.set(false);
5727
+ }
5728
+ setSelectedPdf(pdf) {
5729
+ this.selectedPdf.set(pdf);
5730
+ }
5731
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
5732
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfViewerService, providedIn: 'root' });
5733
+ }
5734
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfViewerService, decorators: [{
5735
+ type: Injectable,
5736
+ args: [{
5737
+ providedIn: 'root',
5738
+ }]
5739
+ }] });
5740
+
5741
+ class PdfViewer {
5742
+ pdfViewerService = inject(PdfViewerService);
5743
+ sanitizer = inject(DomSanitizer);
5744
+ get isShowModal() {
5745
+ return this.pdfViewerService.showModalDocuments();
5746
+ }
5747
+ pdf = computed(() => this.pdfViewerService.selectedPdf(), ...(ngDevMode ? [{ debugName: "pdf" }] : []));
5748
+ getSafePdfUrl(url) {
5749
+ return this.sanitizer.bypassSecurityTrustResourceUrl(url);
5750
+ }
5751
+ closeModal() {
5752
+ this.pdfViewerService.closeModal();
5753
+ this.pdfViewerService.setSelectedPdf(null);
5754
+ }
5755
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
5756
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PdfViewer, isStandalone: true, selector: "lib-pdf-viewer", ngImport: i0, template: "@if (isShowModal) {\r\n<section class=\"modal-container\" (click)=\"closeModal()\">\r\n <div class=\"modal-content\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"modal-header\">\r\n <h1>{{ pdf()?.name || 'Documento' }}</h1>\r\n <button type=\"button\" class=\"close-btn\" (click)=\"closeModal()\">\r\n &times;\r\n </button>\r\n </div>\r\n <div class=\"modal-body\">\r\n @if (pdf(); as doc) {\r\n <iframe [src]=\"getSafePdfUrl(doc.url)\" class=\"pdf-viewer\" frameborder=\"0\" width=\"100%\" height=\"700px\"></iframe>\r\n } @else {\r\n <p>No hay documento disponible</p>\r\n }\r\n </div>\r\n </div>\r\n</section>\r\n}", styles: [".modal-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background-color:#00000080;display:flex;justify-content:center;align-items:center;opacity:1;transition:opacity .3s ease}.modal-content{width:80%;height:80%;background-color:#ebe8d6;border-radius:20px;box-shadow:0 4px 20px #0000004d;margin:20px;display:flex;flex-direction:column;overflow:hidden;animation:slideIn .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #c7c7ad;border-radius:20px 20px 0 0;flex-shrink:0}.modal-header h1{margin:0;font-size:2rem;color:#333}.close-btn{background:none;border:none;font-size:2rem;cursor:pointer;color:#666;transition:color .2s ease;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.close-btn:hover{color:#333;background-color:#0000001a}.modal-body{padding:20px;overflow:auto;flex:1;display:flex;flex-direction:column}.pdf-viewer{width:100%;height:100%;border:none;border-radius:0}@media (max-width: 850px){.modal-content{width:95vw;height:90vh;margin:10px}.modal-header h1{font-size:1.4rem}}@media (max-width: 480px){.modal-content{width:95vw;height:90vh}.modal-header h1{font-size:1.2rem}}@keyframes slideIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
5757
+ }
5758
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfViewer, decorators: [{
5759
+ type: Component,
5760
+ args: [{ selector: 'lib-pdf-viewer', imports: [CommonModule], template: "@if (isShowModal) {\r\n<section class=\"modal-container\" (click)=\"closeModal()\">\r\n <div class=\"modal-content\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"modal-header\">\r\n <h1>{{ pdf()?.name || 'Documento' }}</h1>\r\n <button type=\"button\" class=\"close-btn\" (click)=\"closeModal()\">\r\n &times;\r\n </button>\r\n </div>\r\n <div class=\"modal-body\">\r\n @if (pdf(); as doc) {\r\n <iframe [src]=\"getSafePdfUrl(doc.url)\" class=\"pdf-viewer\" frameborder=\"0\" width=\"100%\" height=\"700px\"></iframe>\r\n } @else {\r\n <p>No hay documento disponible</p>\r\n }\r\n </div>\r\n </div>\r\n</section>\r\n}", styles: [".modal-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background-color:#00000080;display:flex;justify-content:center;align-items:center;opacity:1;transition:opacity .3s ease}.modal-content{width:80%;height:80%;background-color:#ebe8d6;border-radius:20px;box-shadow:0 4px 20px #0000004d;margin:20px;display:flex;flex-direction:column;overflow:hidden;animation:slideIn .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #c7c7ad;border-radius:20px 20px 0 0;flex-shrink:0}.modal-header h1{margin:0;font-size:2rem;color:#333}.close-btn{background:none;border:none;font-size:2rem;cursor:pointer;color:#666;transition:color .2s ease;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.close-btn:hover{color:#333;background-color:#0000001a}.modal-body{padding:20px;overflow:auto;flex:1;display:flex;flex-direction:column}.pdf-viewer{width:100%;height:100%;border:none;border-radius:0}@media (max-width: 850px){.modal-content{width:95vw;height:90vh;margin:10px}.modal-header h1{font-size:1.4rem}}@media (max-width: 480px){.modal-content{width:95vw;height:90vh}.modal-header h1{font-size:1.2rem}}@keyframes slideIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}\n"] }]
5761
+ }] });
5762
+
5666
5763
  // src/app/components/public-api.ts
5667
5764
  // Exportar los componentes
5668
5765
 
@@ -5670,5 +5767,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5670
5767
  * Generated bundle index. Do not edit.
5671
5768
  */
5672
5769
 
5673
- export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
5770
+ export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, PdfViewer, PdfViewerService, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
5674
5771
  //# sourceMappingURL=sapenlinea-components.mjs.map