sapenlinea-components 0.7.69 → 0.7.70

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 (5) hide show
  1. package/README.md +77 -19
  2. package/fesm2022/sapenlinea-components.mjs +13 -11
  3. package/fesm2022/sapenlinea-components.mjs.map +1 -1
  4. package/index.d.ts +8 -10
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -448,10 +448,36 @@ Componente de **tabla dinámica** con soporte de ordenamiento, acciones por fila
448
448
  - `statusToneMap: StatusToneMap` – Mapa de estado normalizado → tono visual (`success`, `error`, `warning`, `info`, `neutral`).
449
449
  - `statusEnumMap: Record<string, string>` – Traduce el valor crudo del estado (ej. `'ACTIVE'`) a la etiqueta que se muestra (ej. `'Activo'`). La resolución del tono usa la etiqueta traducida.
450
450
 
451
+ **Tipos de columna (`type`):**
452
+
453
+ | Tipo | Descripción |
454
+ |---|---|
455
+ | `text` | Texto plano (default) |
456
+ | `number` | Número formateado |
457
+ | `money` | Valor monetario con formato |
458
+ | `date` | Fecha formateada |
459
+ | `datetime` | Fecha y hora |
460
+ | `percentage` | Porcentaje |
461
+ | `status` | Chip de estado con color basado en `statusToneMap` |
462
+ | `grade` | Chip de grado con color semáforo automático (verde ≤0.9, naranja ≤2.9, rojo ≤4, gris >4). Muestra el valor con sufijo `°` |
463
+ | `icon-button` | Botón con ícono clicable |
464
+ | `email` | Email en minúsculas |
465
+
451
466
  **Outputs:**
452
467
 
453
468
  - `optionSelected: EventEmitter<{ action: string; row: TableRow }>` – Emite la acción seleccionada y la fila.
454
469
 
470
+ **Ejemplo con columna `grade`:**
471
+
472
+ ```ts
473
+ columns: TableColumn[] = [
474
+ { key: 'numero', label: 'N° COMPARENDO', align: 'center' },
475
+ { key: 'fecha', label: 'FECHA', align: 'center', type: 'date' },
476
+ { key: 'grado', label: 'GRADO', align: 'center', type: 'grade' },
477
+ { key: 'medicion', label: 'MEDICIÓN', align: 'center' }
478
+ ];
479
+ ```
480
+
455
481
  **Uso con estados en inglés (enum):**
456
482
 
457
483
  ```ts
@@ -805,11 +831,16 @@ Encabezado de sección con título, botones de acción configurables y grupo de
805
831
  - `clickButtonLabel: string = 'Acción'` — texto del botón en modo `click`
806
832
  - `clickButtonIcon: string = ''` — clase CSS del ícono en modo `click`
807
833
  - `alwaysShowFilters: boolean = false` — muestra los filtros permanentemente sin necesidad de toggle
808
- - `showSecondaryButton: boolean = false` — muestra un botón secundario al final de la fila del título
809
- - `secondaryButtonLabel: string = 'Exportar'`
810
- - `secondaryButtonIcon: string = ''`
834
+ - `showSecondaryButton: boolean = false` — muestra un botón secundario (ej. "Exportar PDF")
835
+ - `secondaryButtonLabel: string = 'Exportar PDF'`
836
+ - `secondaryButtonIcon: string = 'icon-download'`
837
+ - `showButtonExport: boolean = false` — muestra un botón de exportación adicional (ej. "Exportar CSV")
838
+ - `exportButtonLabel: string = 'Exportar CSV'`
839
+ - `exportButtonIcon: string = 'icon-export'`
811
840
  - `showButtonBack: boolean = false`
812
841
 
842
+ > Los botones secundario y de exportación se agrupan automáticamente al final de la fila del título.
843
+
813
844
  **Outputs:**
814
845
 
815
846
  - `filtersChange: Record<string, string | number | Date | null>`
@@ -817,6 +848,7 @@ Encabezado de sección con título, botones de acción configurables y grupo de
817
848
  - `clearFilters: void`
818
849
  - `filterButtonClicked: void` — emitido al hacer clic en el botón `click` o `action`
819
850
  - `secondaryButtonClicked: void`
851
+ - `exportButtonClicked: void`
820
852
  - `clickButtonBack: void`
821
853
 
822
854
  **Íconos disponibles** (clase CSS, patrón `mask-image`):
@@ -827,21 +859,20 @@ Encabezado de sección con título, botones de acción configurables y grupo de
827
859
  | `icon-upload` | Cargar / subir |
828
860
  | `icon-export` | Exportar tabla |
829
861
 
830
- **Ejemplo — modo `click` con filtros permanentes y botón secundario:**
862
+ **Ejemplo — con botón secundario y botón de exportar:**
831
863
 
832
864
  ```html
833
865
  <lib-title-filters
834
- title="Órdenes"
835
- buttonMode="click"
836
- clickButtonLabel="Nueva Orden"
837
- clickButtonIcon="icon-upload"
838
- [alwaysShowFilters]="true"
839
- [showSecondaryButton]="true"
840
- secondaryButtonLabel="Exportar"
841
- secondaryButtonIcon="icon-export"
866
+ title="Comparendos"
842
867
  [filtersConfig]="filtersConfig"
843
- (filterButtonClicked)="onNuevaOrden()"
844
- (secondaryButtonClicked)="onExportar()"
868
+ [showSecondaryButton]="true"
869
+ secondaryButtonLabel="Exportar PDF"
870
+ secondaryButtonIcon="icon-download"
871
+ (secondaryButtonClicked)="onExportPDF()"
872
+ [showButtonExport]="true"
873
+ exportButtonLabel="Exportar CSV"
874
+ exportButtonIcon="icon-export"
875
+ (exportButtonClicked)="onExportCSV()"
845
876
  (filtersChange)="onFiltersChange($event)"
846
877
  (applyFilters)="onApply()"
847
878
  />
@@ -1257,7 +1288,7 @@ Zona de arrastrar y soltar (Drag & Drop) para la **recepción de imágenes** de
1257
1288
  ### 36. Gráficas y Visualización: ECharts (Charts)
1258
1289
 
1259
1290
  **Qué hacen**
1260
- Subsistema de envolturas especializadas (wrappers) cimentado sobre `apache/echarts` para habilitar representaciones informativas sólidas a tamaño responsivo y dinámico. En la versión **0.6.69** se ha añadido soporte para interactividad y visualizaciones jerárquicas/agrupadas.
1291
+ Subsistema de envolturas especializadas (wrappers) cimentado sobre `apache/echarts` para habilitar representaciones informativas sólidas a tamaño responsivo y dinámico. Incluye soporte para interactividad, visualizaciones jerárquicas, tablas expandibles y una paleta de 20 colores.
1261
1292
 
1262
1293
  **Componentes disponibles:**
1263
1294
 
@@ -1266,7 +1297,7 @@ Gráfica de barras estandarizada con soporte para una o múltiples series.
1266
1297
  - **Inputs:**
1267
1298
  - `data: ChartItem[]` – Datos para gráfica de barra simple.
1268
1299
  - `multiSeries: BarSeries[]` – (Opcional) Permite mostrar grupos de barras por cada sección.
1269
- - **Interfases:**
1300
+ - **Interfaces:**
1270
1301
  ```ts
1271
1302
  export interface BarSeries {
1272
1303
  name: string; // Nombre de la serie (aparece en la leyenda)
@@ -1276,18 +1307,45 @@ Gráfica de barras estandarizada con soporte para una o múltiples series.
1276
1307
  ```
1277
1308
 
1278
1309
  #### `lib-donut-chart`
1279
- Gráfica de anillo con capacidad de **Drill-down** y navegación interna.
1310
+ Gráfica de anillo con capacidad de **Drill-down**, navegación interna y leyenda automática.
1280
1311
  - **Inputs:**
1281
1312
  - `data: ChartItem[]` – Datos granulares (ej. códigos de infracción `D01`, `D02`, `C01`).
1282
1313
  - `drillDown: boolean = false` – Activa el modo de exploración jerárquica.
1283
1314
  - `groupByPrefix: number = 0` – Agrupa los datos por los primeros N caracteres de la etiqueta (ej. `1` para agrupar por letras iniciales).
1284
- - **Comportamiento:** Al activar el drill-down, el componente muestra inicialmente los totales agrupados y permite al usuario pulsar una sección para "abrirla" y ver su desglose, con un botón de "Volver" integrado.
1315
+ - **Comportamiento:**
1316
+ - Al activar el drill-down, el componente muestra inicialmente los totales agrupados y permite al usuario pulsar una sección para "abrirla" y ver su desglose, con un botón de "Volver" integrado.
1317
+ - Cuando hay **más de 10 ítems**, los labels de las porciones se ocultan automáticamente y se muestra una **leyenda horizontal scrollable** en la parte inferior.
1318
+
1319
+ #### `lib-table-chart`
1320
+ Tabla expandible integrada en el dashboard de gráficas, con paginación y estado "sin datos".
1321
+ - **Inputs:**
1322
+ - `title: string = 'Table Chart'` – Título del encabezado.
1323
+ - `columns: TableColumn[]` – Definición de columnas (misma interfaz que `lib-table`).
1324
+ - `data: TableRow[]` – Datos de la tabla.
1325
+ - `totalItems: number = 0` – Total de registros (para la paginación).
1326
+ - `itemsPerPage: number = 10` – Registros por página en modo expandido.
1327
+ - **Comportamiento:**
1328
+ - **Colapsado**: Muestra los primeros **8 registros** sin paginación.
1329
+ - **Expandido**: Ocupa pantalla completa (90vw × 90vh) con overlay, muestra **10 registros** por página con `lib-pagination`.
1330
+ - Si `data` está vacío muestra `lib-not-found-section` centrado.
1331
+
1332
+ **Ejemplo:**
1333
+
1334
+ ```html
1335
+ <lib-table-chart
1336
+ title="Tabla de Comparendos"
1337
+ [columns]="columns"
1338
+ [data]="comparendosData"
1339
+ [totalItems]="comparendosData.length" />
1340
+ ```
1285
1341
 
1286
1342
  #### Otros:
1287
1343
  - `lib-line-chart` – Líneas analíticas en evolución.
1288
1344
  - `lib-heatmap` – Mapa de concentración de calor basado en coordenadas / categorías.
1289
1345
  - `lib-map-geo` – Puntos de calor sobre mapa geofísico interactivo.
1290
1346
 
1347
+ **Paleta de colores (20 colores):**
1348
+ La paleta compartida por todas las gráficas incluye: olive green, lime soft, burgundy, deep teal, sage, chartreuse, sky blue, light steel blue, warm amber, terracotta, dusty purple, jade green, coral clay, charcoal slate, sand gold, mint sage, rose mauve, navy steel, peach y spring green.
1349
+
1291
1350
  **Eventos Globales:**
1292
1351
  Todos los componentes de gráficas emiten el evento `chartClick`, permitiendo capturar clics en secciones específicas para lógicas personalizadas en el padre.
1293
-
package/fesm2022/sapenlinea-components.mjs CHANGED
@@ -3922,19 +3922,21 @@ class TitleFilters {
3922
3922
  selectedTextFilters = signal({}, ...(ngDevMode ? [{ debugName: "selectedTextFilters" }] : []));
3923
3923
  buttonMode = input('toggle', ...(ngDevMode ? [{ debugName: "buttonMode" }] : []));
3924
3924
  filterButtonClicked = output();
3925
- /** Solo para buttonMode='click': clase CSS del ícono (ej: 'icon-download', 'icon-upload', 'icon-export') */
3925
+ // Botón de acción
3926
3926
  clickButtonIcon = input('', ...(ngDevMode ? [{ debugName: "clickButtonIcon" }] : []));
3927
- /** Solo para buttonMode='click': texto del botón */
3928
3927
  clickButtonLabel = input('Acción', ...(ngDevMode ? [{ debugName: "clickButtonLabel" }] : []));
3929
- /** Cuando es true los filtros se muestran siempre sin necesidad de togglear */
3930
3928
  alwaysShowFilters = input(false, ...(ngDevMode ? [{ debugName: "alwaysShowFilters" }] : []));
3931
- /** Muestra un botón secundario (outlined) al final de la fila del título */
3929
+ // Botón secundario
3932
3930
  showSecondaryButton = input(false, ...(ngDevMode ? [{ debugName: "showSecondaryButton" }] : []));
3933
- /** Clase del ícono del botón secundario (ej: 'icon-export') */
3934
- secondaryButtonIcon = input('', ...(ngDevMode ? [{ debugName: "secondaryButtonIcon" }] : []));
3935
- /** Texto del botón secundario */
3936
- secondaryButtonLabel = input('Exportar', ...(ngDevMode ? [{ debugName: "secondaryButtonLabel" }] : []));
3931
+ secondaryButtonIcon = input('icon-download', ...(ngDevMode ? [{ debugName: "secondaryButtonIcon" }] : []));
3932
+ secondaryButtonLabel = input('Exportar PDF', ...(ngDevMode ? [{ debugName: "secondaryButtonLabel" }] : []));
3937
3933
  secondaryButtonClicked = output();
3934
+ // Botón de exportar
3935
+ showButtonExport = input(false, ...(ngDevMode ? [{ debugName: "showButtonExport" }] : []));
3936
+ exportButtonIcon = input('icon-export', ...(ngDevMode ? [{ debugName: "exportButtonIcon" }] : []));
3937
+ exportButtonLabel = input('Exportar CSV', ...(ngDevMode ? [{ debugName: "exportButtonLabel" }] : []));
3938
+ exportButtonClicked = output();
3939
+ // Botón de atrás
3938
3940
  showButtonBack = input(false, ...(ngDevMode ? [{ debugName: "showButtonBack" }] : []));
3939
3941
  clickButtonBack = output();
3940
3942
  emitAllFilters(textFilters, dateFilters) {
@@ -4028,18 +4030,18 @@ class TitleFilters {
4028
4030
  this.clickButtonBack.emit();
4029
4031
  }
4030
4032
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, deps: [], target: i0.ɵɵFactoryTarget.Component });
4031
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, clickButtonIcon: { classPropertyName: "clickButtonIcon", publicName: "clickButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, clickButtonLabel: { classPropertyName: "clickButtonLabel", publicName: "clickButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowFilters: { classPropertyName: "alwaysShowFilters", publicName: "alwaysShowFilters", isSignal: true, isRequired: false, transformFunction: null }, showSecondaryButton: { classPropertyName: "showSecondaryButton", publicName: "showSecondaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonBack: { classPropertyName: "showButtonBack", publicName: "showButtonBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", clearFilters: "clearFilters", filterButtonClicked: "filterButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", clickButtonBack: "clickButtonBack" }, viewQueries: [{ propertyName: "filtersContainer", first: true, predicate: ["filtersContainer"], descendants: true, read: ElementRef }, { propertyName: "submitBtn", first: true, predicate: ["submitBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"header-container-table\">\n <div class=\"filters-dashboard-table\">\n <div class=\"left-title\">\n @if(showButtonBack()) {\n <div class=\"button-back\" (click)=\"clickButton()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M5 12l6 6\" /><path d=\"M5 12l6 -6\" /></svg>\n </div>\n }\n <div class=\"title-table\">{{ title() }}</div>\n </div>\n\n @if (buttonMode() === 'toggle') {\n <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n </svg>\n <div class=\"label\">Filtros</div>\n </div>\n }\n @if (buttonMode() === 'action') {\n <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path fill=\"#fff\"\n d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n <path fill=\"#fff\"\n d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n </svg>\n <div class=\"label\">Ir al Mapa</div>\n </div>\n }\n @if (buttonMode() === 'click') {\n <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n @if (clickButtonIcon()) {\n <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n }\n {{ clickButtonLabel() }}\n </lib-button>\n }\n @if (showSecondaryButton()) {\n <lib-button class=\"secondary-action-btn\" variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n @if (secondaryButtonIcon()) {\n <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n }\n {{ secondaryButtonLabel() }}\n </lib-button>\n }\n </div>\n\n @if (filtersVisible) {\n <div class=\"filters-container\" #filtersContainer>\n <div class=\"filters-wrapper\">\n\n @for (config of normalizedFiltersConfig(); track $index) {\n @switch (config.type) {\n @case ('text') {\n <lib-input-text-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('number') {\n <lib-input-number-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('select') {\n <lib-input-select-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('date') {\n <lib-date-time-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (dateSelected)=\"onDateSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('time') {\n <lib-input-time-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n }\n }\n\n <div class=\"actions\">\n <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\" (keydown.enter)=\"onApplyFilters()\">\n Aplicar Filtros\n </lib-button>\n\n <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\"> \n Borrar Filtros \n </lib-button>\n </div>\n </div>\n </div>\n }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index: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}.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"] }] });
4033
+ 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"] }] });
4032
4034
  }
4033
4035
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, decorators: [{
4034
4036
  type: Component,
4035
- args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter, InputTimeFilter, Button], template: "<div class=\"header-container-table\">\n <div class=\"filters-dashboard-table\">\n <div class=\"left-title\">\n @if(showButtonBack()) {\n <div class=\"button-back\" (click)=\"clickButton()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-tabler icons-tabler-outline icon-tabler-arrow-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M5 12l6 6\" /><path d=\"M5 12l6 -6\" /></svg>\n </div>\n }\n <div class=\"title-table\">{{ title() }}</div>\n </div>\n\n @if (buttonMode() === 'toggle') {\n <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\n </svg>\n <div class=\"label\">Filtros</div>\n </div>\n }\n @if (buttonMode() === 'action') {\n <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path fill=\"#fff\"\n d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\n <path fill=\"#fff\"\n d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\n </svg>\n <div class=\"label\">Ir al Mapa</div>\n </div>\n }\n @if (buttonMode() === 'click') {\n <lib-button variant=\"primary\" (clicked)=\"onFilterButtonClick()\">\n @if (clickButtonIcon()) {\n <span class=\"btn-icon {{clickButtonIcon()}}\"></span>\n }\n {{ clickButtonLabel() }}\n </lib-button>\n }\n @if (showSecondaryButton()) {\n <lib-button class=\"secondary-action-btn\" variant=\"secondary\" (clicked)=\"secondaryButtonClicked.emit()\">\n @if (secondaryButtonIcon()) {\n <span class=\"btn-icon {{secondaryButtonIcon()}}\"></span>\n }\n {{ secondaryButtonLabel() }}\n </lib-button>\n }\n </div>\n\n @if (filtersVisible) {\n <div class=\"filters-container\" #filtersContainer>\n <div class=\"filters-wrapper\">\n\n @for (config of normalizedFiltersConfig(); track $index) {\n @switch (config.type) {\n @case ('text') {\n <lib-input-text-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('number') {\n <lib-input-number-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('select') {\n <lib-input-select-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('date') {\n <lib-date-time-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (dateSelected)=\"onDateSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n @case ('time') {\n <lib-input-time-filter\n [filters]=\"config.filters\"\n [clearTrigger]=\"clearFilterTrigger()\"\n (filterSelected)=\"onFilterSelected($event)\"\n (enterPressed)=\"focusNextFilter()\"\n />\n }\n }\n }\n\n <div class=\"actions\">\n <lib-button #submitBtn tabindex=\"0\" [size]=\"'compact'\" (click)=\"onApplyFilters()\" (keydown.enter)=\"onApplyFilters()\">\n Aplicar Filtros\n </lib-button>\n\n <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (click)=\"clearAllFilters()\"> \n Borrar Filtros \n </lib-button>\n </div>\n </div>\n </div>\n }\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative;z-index: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}.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"] }]
4037
+ 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"] }]
4036
4038
  }], propDecorators: { filtersContainer: [{
4037
4039
  type: ViewChild,
4038
4040
  args: ['filtersContainer', { read: ElementRef }]
4039
4041
  }], submitBtn: [{
4040
4042
  type: ViewChild,
4041
4043
  args: ['submitBtn', { read: ElementRef }]
4042
- }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], filtersConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersConfig", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], buttonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonMode", required: false }] }], filterButtonClicked: [{ type: i0.Output, args: ["filterButtonClicked"] }], clickButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickButtonIcon", required: false }] }], clickButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickButtonLabel", required: false }] }], alwaysShowFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowFilters", required: false }] }], showSecondaryButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSecondaryButton", required: false }] }], secondaryButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonIcon", required: false }] }], secondaryButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonLabel", required: false }] }], secondaryButtonClicked: [{ type: i0.Output, args: ["secondaryButtonClicked"] }], showButtonBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBack", required: false }] }], clickButtonBack: [{ type: i0.Output, args: ["clickButtonBack"] }] } });
4044
+ }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], filtersConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersConfig", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], buttonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonMode", required: false }] }], filterButtonClicked: [{ type: i0.Output, args: ["filterButtonClicked"] }], clickButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickButtonIcon", required: false }] }], clickButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickButtonLabel", required: false }] }], alwaysShowFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowFilters", required: false }] }], showSecondaryButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSecondaryButton", required: false }] }], secondaryButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonIcon", required: false }] }], secondaryButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonLabel", required: false }] }], secondaryButtonClicked: [{ type: i0.Output, args: ["secondaryButtonClicked"] }], showButtonExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonExport", required: false }] }], exportButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonIcon", required: false }] }], exportButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonLabel", required: false }] }], exportButtonClicked: [{ type: i0.Output, args: ["exportButtonClicked"] }], showButtonBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBack", required: false }] }], clickButtonBack: [{ type: i0.Output, args: ["clickButtonBack"] }] } });
4043
4045
 
4044
4046
  class NotificationModal {
4045
4047
  messageInput;