ngx-eiffage-material 0.4.0 → 0.6.0
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.
- package/fesm2022/ngx-eiffage-material.mjs +902 -433
- package/fesm2022/ngx-eiffage-material.mjs.map +1 -1
- package/index.d.ts +282 -69
- package/package.json +1 -1
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, InjectionToken, makeEnvironmentProviders, isSignal, signal, inject, computed, input, booleanAttribute, numberAttribute, ChangeDetectionStrategy, Component, ChangeDetectorRef, ElementRef, LOCALE_ID, viewChild, model, output, DestroyRef, afterRenderEffect, ViewContainerRef, effect, Directive, forwardRef, Pipe, PLATFORM_ID, untracked,
|
|
2
|
+
import { Injectable, InjectionToken, makeEnvironmentProviders, isSignal, signal, inject, computed, input, booleanAttribute, numberAttribute, ChangeDetectionStrategy, Component, ChangeDetectorRef, ElementRef, LOCALE_ID, viewChild, model, output, DestroyRef, afterRenderEffect, ViewContainerRef, effect, Directive, forwardRef, reflectComponentType, Pipe, PLATFORM_ID, untracked, linkedSignal, Injector, afterNextRender } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/button';
|
|
4
4
|
import { MatButtonModule } from '@angular/material/button';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i7 from '@angular/material/progress-spinner';
|
|
6
6
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
7
|
-
import { Subject, EMPTY, merge, fromEvent, startWith, map,
|
|
7
|
+
import { Subject, EMPTY, merge, fromEvent, startWith, map, filter, switchMap, of, skip, debounce, timer, distinctUntilChanged } from 'rxjs';
|
|
8
8
|
import { toSignal, takeUntilDestroyed, rxResource, toObservable } from '@angular/core/rxjs-interop';
|
|
9
9
|
import * as i3$1 from '@angular/forms';
|
|
10
10
|
import { NgControl, FormGroupDirective, NgForm, Validators, FormControl, ReactiveFormsModule, FormArray, FormGroup, FormBuilder, FormsModule } from '@angular/forms';
|
|
11
|
-
import * as i2
|
|
11
|
+
import * as i2 from '@angular/material/chips';
|
|
12
12
|
import { MatChipGrid, MatChipsModule } from '@angular/material/chips';
|
|
13
|
-
import * as i2$
|
|
13
|
+
import * as i2$1 from '@angular/material/form-field';
|
|
14
14
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
15
|
-
import * as i2$
|
|
15
|
+
import * as i2$2 from '@angular/material/icon';
|
|
16
16
|
import { MatIconModule } from '@angular/material/icon';
|
|
17
|
-
import * as i7 from '@angular/material/tooltip';
|
|
17
|
+
import * as i7$1 from '@angular/material/tooltip';
|
|
18
18
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
19
19
|
import * as i4 from '@angular/material/input';
|
|
20
|
-
import { MatInputModule } from '@angular/material/input';
|
|
20
|
+
import { MatInputModule, MatInput } from '@angular/material/input';
|
|
21
21
|
import * as i3 from '@angular/material/select';
|
|
22
22
|
import { MatSelectModule } from '@angular/material/select';
|
|
23
23
|
import * as i11 from '@angular/common';
|
|
24
24
|
import { NgTemplateOutlet, CommonModule, DatePipe, isPlatformBrowser, LowerCasePipe } from '@angular/common';
|
|
25
|
-
import { MatDialogRef,
|
|
25
|
+
import { MatDialogRef, MatDialogTitle, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
|
|
26
26
|
import * as i14 from '@angular/material/checkbox';
|
|
27
27
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
28
28
|
import * as i10 from '@angular/material/datepicker';
|
|
@@ -35,15 +35,12 @@ import * as i3$3 from '@angular/material/paginator';
|
|
|
35
35
|
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
|
|
36
36
|
import * as i6 from '@angular/material/progress-bar';
|
|
37
37
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
38
|
-
import * as i2$
|
|
38
|
+
import * as i2$3 from '@angular/material/sort';
|
|
39
39
|
import { MatSortModule } from '@angular/material/sort';
|
|
40
40
|
import * as i1$1 from '@angular/material/table';
|
|
41
41
|
import { MatTableModule, MatTableDataSource } from '@angular/material/table';
|
|
42
|
-
import { Overlay
|
|
42
|
+
import { Overlay } from '@angular/cdk/overlay';
|
|
43
43
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
44
|
-
import jsPDF from 'jspdf';
|
|
45
|
-
import autoTable from 'jspdf-autotable';
|
|
46
|
-
import { utils, writeFileXLSX } from 'xlsx';
|
|
47
44
|
import { v4 } from 'uuid';
|
|
48
45
|
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
49
46
|
import moment from 'moment';
|
|
@@ -51,6 +48,9 @@ import * as i3$2 from '@angular/material/slide-toggle';
|
|
|
51
48
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
52
49
|
import * as i4$1 from '@angular/material/button-toggle';
|
|
53
50
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
51
|
+
import jsPDF from 'jspdf';
|
|
52
|
+
import autoTable from 'jspdf-autotable';
|
|
53
|
+
import { utils, writeFileXLSX } from 'xlsx';
|
|
54
54
|
import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA, MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
|
55
55
|
import * as i4$2 from '@angular/material/core';
|
|
56
56
|
import { MatRippleModule } from '@angular/material/core';
|
|
@@ -390,6 +390,13 @@ const NGX_EIFFAGE_DEFAULT_TEXTS = {
|
|
|
390
390
|
dateRangeEnd: 'Hasta',
|
|
391
391
|
totalPerPage: 'Total parcial (por página)',
|
|
392
392
|
totalGeneral: 'Total (todos los registros)',
|
|
393
|
+
exportExcelAll: 'Exportar a XLSX',
|
|
394
|
+
exportPdfAll: 'Exportar a PDF',
|
|
395
|
+
selectRow: 'Seleccionar fila',
|
|
396
|
+
selectPage: 'Seleccionar las filas de la página',
|
|
397
|
+
expandRow: 'Ver detalle',
|
|
398
|
+
collapseRow: 'Ocultar detalle',
|
|
399
|
+
columnFilter: 'filtro',
|
|
393
400
|
},
|
|
394
401
|
columnsDialog: {
|
|
395
402
|
title: 'Ordenar y visualizar columnas de la tabla',
|
|
@@ -442,6 +449,7 @@ const NGX_EIFFAGE_DEFAULT_TEXTS = {
|
|
|
442
449
|
select: {
|
|
443
450
|
noResults: 'No se han encontrado resultados...',
|
|
444
451
|
showMore: 'Ver más',
|
|
452
|
+
clear: 'Quitar selección',
|
|
445
453
|
removeOption: name => `-- Quitar ${name} --`,
|
|
446
454
|
resultsCount: count => plural(count, '1 resultado', `${count} resultados`),
|
|
447
455
|
},
|
|
@@ -458,6 +466,13 @@ const NGX_EIFFAGE_DEFAULT_TEXTS = {
|
|
|
458
466
|
retry: 'Reintentar',
|
|
459
467
|
selectedCount: (selected, total) => `${selected} de ${total} seleccionados`,
|
|
460
468
|
resultsCount: total => plural(total, '1 resultado', `${total} resultados`),
|
|
469
|
+
removeItem: label => `Quitar ${label}`,
|
|
470
|
+
moreSelected: count => plural(count, 'y 1 más seleccionado', `y ${count} más seleccionados`),
|
|
471
|
+
summary: (labels, rest) => (rest ? `${labels.join(', ')} y ${rest} más` : labels.join(', ')),
|
|
472
|
+
discardChanges: '¿Descartar los cambios sin confirmar?',
|
|
473
|
+
discard: 'Descartar',
|
|
474
|
+
keepEditing: 'Seguir editando',
|
|
475
|
+
minSearch: min => `Escribe al menos ${min} caracteres para buscar`,
|
|
461
476
|
},
|
|
462
477
|
dialog: {
|
|
463
478
|
cancel: 'Cancelar',
|
|
@@ -718,7 +733,7 @@ class NgxLoadingButton {
|
|
|
718
733
|
event.stopImmediatePropagation();
|
|
719
734
|
}
|
|
720
735
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxLoadingButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
721
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxLoadingButton, isStandalone: true, selector: "ngx-loading-button", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, matButton: { classPropertyName: "matButton", publicName: "matButton", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null }, spinnerStrokeWidth: { classPropertyName: "spinnerStrokeWidth", publicName: "spinnerStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, busyLabel: { classPropertyName: "busyLabel", publicName: "busyLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-loading-button--secondary": "color() === \"secondary\"", "class.ngx-loading-button--tertiary": "color() === \"tertiary\"", "class.ngx-loading-button--error": "color() === \"error\"", "class.ngx-loading-button--loading": "isLoading() && !disabled()" } }, ngImport: i0, template: "<!--\r\n Mientras carga: disabledInteractive mantiene el foco en el bot\u00F3n (el lector de pantalla sigue en \u00E9l\r\n y oye aria-busy). Material NO bloquea el clic de un <button> en ese estado: lo hace blockWhileLoading.\r\n Con disabled, el bot\u00F3n se deshabilita del todo y el navegador ya no emite clics.\r\n-->\r\n<button\r\n class=\"loadingButton\"\r\n [matButton]=\"matButton()\"\r\n [type]=\"type()\"\r\n [disabled]=\"disabled() || isLoading()\"\r\n [disabledInteractive]=\"isLoading() && !disabled()\"\r\n [attr.aria-busy]=\"isLoading() || null\"\r\n (click)=\"blockWhileLoading($event)\"\r\n>\r\n <span class=\"loadingButton__content\" [class.loadingButton__content--hidden]=\"overlaySpinner()\" [class.loadingButton__content--gone]=\"inlineSpinner()\">\r\n {{ label() }}\r\n <ng-content />\r\n </span>\r\n\r\n @if (inlineSpinner()) {\r\n <span class=\"loadingButton__content\">\r\n <mat-spinner class=\"loadingButton__inlineSpinner\" diameter=\"18\" strokeWidth=\"2.5\" aria-hidden=\"true\" />\r\n {{ loadingText() }}\r\n </span>\r\n }\r\n\r\n @if (overlaySpinner()) {\r\n <mat-spinner\r\n class=\"loadingButton__overlaySpinner\"\r\n [diameter]=\"spinnerDiameter()\"\r\n [strokeWidth]=\"spinnerStrokeWidth()\"\r\n [attr.aria-label]=\"resolvedBusyLabel()\"\r\n />\r\n }\r\n</button>\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.loadingButton{width:100%}.loadingButton__content{display:inline-flex;align-items:center;justify-content:center;gap:8px}.loadingButton__content--hidden{visibility:hidden}.loadingButton__content--gone{display:none}.loadingButton__content ::ng-deep .mat-icon{width:18px;height:18px;font-size:18px}.loadingButton__overlaySpinner,.loadingButton__inlineSpinner{--mat-progress-spinner-active-indicator-color: currentColor}.loadingButton__overlaySpinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.loadingButton__inlineSpinner{flex:none}.loadingButton[aria-busy=true]{cursor:progress}:host(.ngx-loading-button--loading){--mat-button-filled-disabled-container-color: var(--mat-button-filled-container-color, var(--mat-sys-primary));--mat-button-filled-disabled-label-text-color: var(--mat-button-filled-label-text-color, var(--mat-sys-on-primary));--mat-button-tonal-disabled-container-color: var(--mat-button-tonal-container-color, var(--mat-sys-secondary-container));--mat-button-tonal-disabled-label-text-color: var(--mat-button-tonal-label-text-color, var(--mat-sys-on-secondary-container));--mat-button-protected-disabled-container-color: var(--mat-button-protected-container-color, var(--mat-sys-surface));--mat-button-protected-disabled-container-elevation-shadow: var(--mat-button-protected-container-elevation-shadow, var(--mat-sys-level1));--mat-button-protected-disabled-label-text-color: var(--mat-button-protected-label-text-color, var(--mat-sys-primary));--mat-button-outlined-disabled-outline-color: var(--mat-button-outlined-outline-color, var(--mat-sys-outline));--mat-button-outlined-disabled-label-text-color: var(--mat-button-outlined-label-text-color, var(--mat-sys-primary));--mat-button-text-disabled-label-text-color: var(--mat-button-text-label-text-color, var(--mat-sys-primary))}:host(.ngx-loading-button--secondary){--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-filled-state-layer-color: var(--mat-sys-on-secondary);--mat-button-tonal-container-color: var(--mat-sys-secondary-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-secondary-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-secondary-container);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}:host(.ngx-loading-button--tertiary){--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-filled-state-layer-color: var(--mat-sys-on-tertiary);--mat-button-tonal-container-color: var(--mat-sys-tertiary-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-tertiary-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-tertiary-container);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}:host(.ngx-loading-button--error){--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: var(--mat-sys-error-container);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-protected-state-layer-color: var(--mat-sys-error);--mat-button-protected-ripple-color: var(--mat-sys-error-container);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: var(--mat-sys-error-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type:
|
|
736
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxLoadingButton, isStandalone: true, selector: "ngx-loading-button", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, matButton: { classPropertyName: "matButton", publicName: "matButton", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null }, spinnerStrokeWidth: { classPropertyName: "spinnerStrokeWidth", publicName: "spinnerStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, busyLabel: { classPropertyName: "busyLabel", publicName: "busyLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-loading-button--secondary": "color() === \"secondary\"", "class.ngx-loading-button--tertiary": "color() === \"tertiary\"", "class.ngx-loading-button--error": "color() === \"error\"", "class.ngx-loading-button--loading": "isLoading() && !disabled()" } }, ngImport: i0, template: "<!--\r\n Mientras carga: disabledInteractive mantiene el foco en el bot\u00F3n (el lector de pantalla sigue en \u00E9l\r\n y oye aria-busy). Material NO bloquea el clic de un <button> en ese estado: lo hace blockWhileLoading.\r\n Con disabled, el bot\u00F3n se deshabilita del todo y el navegador ya no emite clics.\r\n-->\r\n<button\r\n class=\"loadingButton\"\r\n [matButton]=\"matButton()\"\r\n [type]=\"type()\"\r\n [disabled]=\"disabled() || isLoading()\"\r\n [disabledInteractive]=\"isLoading() && !disabled()\"\r\n [attr.aria-busy]=\"isLoading() || null\"\r\n (click)=\"blockWhileLoading($event)\"\r\n>\r\n <span class=\"loadingButton__content\" [class.loadingButton__content--hidden]=\"overlaySpinner()\" [class.loadingButton__content--gone]=\"inlineSpinner()\">\r\n {{ label() }}\r\n <ng-content />\r\n </span>\r\n\r\n @if (inlineSpinner()) {\r\n <span class=\"loadingButton__content\">\r\n <mat-spinner class=\"loadingButton__inlineSpinner\" diameter=\"18\" strokeWidth=\"2.5\" aria-hidden=\"true\" />\r\n {{ loadingText() }}\r\n </span>\r\n }\r\n\r\n @if (overlaySpinner()) {\r\n <mat-spinner\r\n class=\"loadingButton__overlaySpinner\"\r\n [diameter]=\"spinnerDiameter()\"\r\n [strokeWidth]=\"spinnerStrokeWidth()\"\r\n [attr.aria-label]=\"resolvedBusyLabel()\"\r\n />\r\n }\r\n</button>\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.loadingButton{width:100%}.loadingButton__content{display:inline-flex;align-items:center;justify-content:center;gap:8px}.loadingButton__content--hidden{visibility:hidden}.loadingButton__content--gone{display:none}.loadingButton__content ::ng-deep .mat-icon{width:18px;height:18px;font-size:18px}.loadingButton__overlaySpinner,.loadingButton__inlineSpinner{--mat-progress-spinner-active-indicator-color: currentColor}.loadingButton__overlaySpinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.loadingButton__inlineSpinner{flex:none}.loadingButton[aria-busy=true]{cursor:progress}:host(.ngx-loading-button--loading){--mat-button-filled-disabled-container-color: var(--mat-button-filled-container-color, var(--mat-sys-primary));--mat-button-filled-disabled-label-text-color: var(--mat-button-filled-label-text-color, var(--mat-sys-on-primary));--mat-button-tonal-disabled-container-color: var(--mat-button-tonal-container-color, var(--mat-sys-secondary-container));--mat-button-tonal-disabled-label-text-color: var(--mat-button-tonal-label-text-color, var(--mat-sys-on-secondary-container));--mat-button-protected-disabled-container-color: var(--mat-button-protected-container-color, var(--mat-sys-surface));--mat-button-protected-disabled-container-elevation-shadow: var(--mat-button-protected-container-elevation-shadow, var(--mat-sys-level1));--mat-button-protected-disabled-label-text-color: var(--mat-button-protected-label-text-color, var(--mat-sys-primary));--mat-button-outlined-disabled-outline-color: var(--mat-button-outlined-outline-color, var(--mat-sys-outline));--mat-button-outlined-disabled-label-text-color: var(--mat-button-outlined-label-text-color, var(--mat-sys-primary));--mat-button-text-disabled-label-text-color: var(--mat-button-text-label-text-color, var(--mat-sys-primary))}:host(.ngx-loading-button--secondary){--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-filled-state-layer-color: var(--mat-sys-on-secondary);--mat-button-tonal-container-color: var(--mat-sys-secondary-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-secondary-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-secondary-container);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}:host(.ngx-loading-button--tertiary){--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-filled-state-layer-color: var(--mat-sys-on-tertiary);--mat-button-tonal-container-color: var(--mat-sys-tertiary-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-tertiary-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-tertiary-container);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}:host(.ngx-loading-button--error){--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: var(--mat-sys-error-container);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-protected-state-layer-color: var(--mat-sys-error);--mat-button-protected-ripple-color: var(--mat-sys-error-container);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: var(--mat-sys-error-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
722
737
|
}
|
|
723
738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxLoadingButton, decorators: [{
|
|
724
739
|
type: Component,
|
|
@@ -1028,7 +1043,7 @@ class NgxInputFile {
|
|
|
1028
1043
|
}
|
|
1029
1044
|
}
|
|
1030
1045
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxInputFile, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1031
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxInputFile, isStandalone: true, selector: "ngx-input-file", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", validationError: "validationError" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.ngx-input-file--disabled": "isDisabled()", "class.ngx-input-file--dropping": "isDropping()", "class.ngx-input-file--has-files": "files().length > 0" }, classAttribute: "ngx-input-file" }, viewQueries: [{ propertyName: "_nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }, { propertyName: "_chipGrid", first: true, predicate: MatChipGrid, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\r\n class=\"ngx-input-file__field\"\r\n [appearance]=\"appearance()\"\r\n floatLabel=\"always\"\r\n subscriptSizing=\"dynamic\"\r\n (click)=\"onFieldClick($event)\">\r\n <mat-label>{{ resolvedLabel() }}</mat-label>\r\n\r\n <mat-chip-grid\r\n #chipGrid\r\n class=\"ngx-input-file__chips\"\r\n [disabled]=\"isDisabled()\"\r\n [required]=\"isRequired()\"\r\n [errorStateMatcher]=\"errorStateMatcher\">\r\n @for (item of items(); track item.file) {\r\n <mat-chip-row class=\"ngx-input-file__chip\" [title]=\"item.file.name + ' \u00B7 ' + item.size\" (removed)=\"remove(item.file)\">\r\n <mat-icon matChipAvatar aria-hidden=\"true\">{{ item.icon }}</mat-icon>\r\n <span class=\"ngx-input-file__chip-name\">{{ item.file.name }}</span>\r\n <span class=\"ngx-input-file__chip-size\">{{ item.size }}</span>\r\n <button matChipRemove type=\"button\" [attr.aria-label]=\"texts().inputFile.remove(item.file.name)\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n\r\n <!-- Entrada de texto de solo lectura: da el foco con Tab, el placeholder y abre el selector con Intro o Espacio -->\r\n <input\r\n class=\"ngx-input-file__trigger\"\r\n readonly\r\n [matChipInputFor]=\"chipGrid\"\r\n [matChipInputSeparatorKeyCodes]=\"noSeparators\"\r\n [placeholder]=\"resolvedPlaceholder()\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n (blur)=\"onTriggerBlur()\" />\r\n </mat-chip-grid>\r\n\r\n <button\r\n matIconSuffix\r\n matIconButton\r\n type=\"button\"\r\n class=\"ngx-input-file__browse\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-label]=\"texts().inputFile.browse\"\r\n [matTooltip]=\"texts().inputFile.browse\"\r\n (click)=\"openPicker()\">\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #nativeInput\r\n type=\"file\"\r\n hidden\r\n tabindex=\"-1\"\r\n [accept]=\"acceptAttr()\"\r\n [multiple]=\"multiple()\"\r\n (change)=\"onNativeChange($event)\"\r\n (cancel)=\"onNativeCancel()\" />\r\n\r\n <mat-hint>\r\n @if (isDropping()) {\r\n {{ texts().inputFile.dropping }}\r\n } @else if (rejectionMessage()) {\r\n <span class=\"ngx-input-file__rejection\">{{ rejectionMessage() }}</span>\r\n } @else {\r\n {{ hint() }}\r\n }\r\n </mat-hint>\r\n\r\n @if (error()) {\r\n <mat-error>{{ error() }}</mat-error>\r\n }\r\n</mat-form-field>\r\n\r\n<!-- Regi\u00F3n viva fija: los descartes se anuncian aunque el lector est\u00E9 en otro sitio -->\r\n<div class=\"ngx-input-file__live\" aria-live=\"polite\">{{ rejectionMessage() }}</div>\r\n", styles: [":host{display:block;width:100%}.ngx-input-file__field{width:100%;cursor:pointer}:host(.ngx-input-file--has-files) .ngx-input-file__field{--mat-form-field-container-vertical-padding: 8px}:host(.ngx-input-file--disabled) .ngx-input-file__field{cursor:default}:host(.ngx-input-file--dropping) .ngx-input-file__field{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-outline-width: 2px;--mat-form-field-filled-active-indicator-color: var(--mat-sys-primary);--mat-form-field-filled-hover-active-indicator-color: var(--mat-sys-primary)}.ngx-input-file__chips{width:100%}.ngx-input-file__trigger.mat-mdc-chip-input{cursor:inherit;caret-color:transparent;flex:1 0 8ch}:host(.ngx-input-file--has-files) .ngx-input-file__trigger.mat-mdc-chip-input{flex:1 1 0;min-width:0;margin-left:0}.ngx-input-file__chip{max-width:100%}.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__cell--primary,.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__action--primary,.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__text-label{min-width:0;overflow:hidden}.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__text-label{display:flex;align-items:baseline;gap:6px}.ngx-input-file__chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngx-input-file__chip-size{flex:none;font:var(--mat-sys-label-small);color:var(--mat-sys-on-surface-variant)}.ngx-input-file__rejection{color:var(--mat-sys-error)}.ngx-input-file__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i2
|
|
1046
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxInputFile, isStandalone: true, selector: "ngx-input-file", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", validationError: "validationError" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.ngx-input-file--disabled": "isDisabled()", "class.ngx-input-file--dropping": "isDropping()", "class.ngx-input-file--has-files": "files().length > 0" }, classAttribute: "ngx-input-file" }, viewQueries: [{ propertyName: "_nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }, { propertyName: "_chipGrid", first: true, predicate: MatChipGrid, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\r\n class=\"ngx-input-file__field\"\r\n [appearance]=\"appearance()\"\r\n floatLabel=\"always\"\r\n subscriptSizing=\"dynamic\"\r\n (click)=\"onFieldClick($event)\">\r\n <mat-label>{{ resolvedLabel() }}</mat-label>\r\n\r\n <mat-chip-grid\r\n #chipGrid\r\n class=\"ngx-input-file__chips\"\r\n [disabled]=\"isDisabled()\"\r\n [required]=\"isRequired()\"\r\n [errorStateMatcher]=\"errorStateMatcher\">\r\n @for (item of items(); track item.file) {\r\n <mat-chip-row class=\"ngx-input-file__chip\" [title]=\"item.file.name + ' \u00B7 ' + item.size\" (removed)=\"remove(item.file)\">\r\n <mat-icon matChipAvatar aria-hidden=\"true\">{{ item.icon }}</mat-icon>\r\n <span class=\"ngx-input-file__chip-name\">{{ item.file.name }}</span>\r\n <span class=\"ngx-input-file__chip-size\">{{ item.size }}</span>\r\n <button matChipRemove type=\"button\" [attr.aria-label]=\"texts().inputFile.remove(item.file.name)\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n\r\n <!-- Entrada de texto de solo lectura: da el foco con Tab, el placeholder y abre el selector con Intro o Espacio -->\r\n <input\r\n class=\"ngx-input-file__trigger\"\r\n readonly\r\n [matChipInputFor]=\"chipGrid\"\r\n [matChipInputSeparatorKeyCodes]=\"noSeparators\"\r\n [placeholder]=\"resolvedPlaceholder()\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n (blur)=\"onTriggerBlur()\" />\r\n </mat-chip-grid>\r\n\r\n <button\r\n matIconSuffix\r\n matIconButton\r\n type=\"button\"\r\n class=\"ngx-input-file__browse\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-label]=\"texts().inputFile.browse\"\r\n [matTooltip]=\"texts().inputFile.browse\"\r\n (click)=\"openPicker()\">\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n\r\n <input\r\n #nativeInput\r\n type=\"file\"\r\n hidden\r\n tabindex=\"-1\"\r\n [accept]=\"acceptAttr()\"\r\n [multiple]=\"multiple()\"\r\n (change)=\"onNativeChange($event)\"\r\n (cancel)=\"onNativeCancel()\" />\r\n\r\n <mat-hint>\r\n @if (isDropping()) {\r\n {{ texts().inputFile.dropping }}\r\n } @else if (rejectionMessage()) {\r\n <span class=\"ngx-input-file__rejection\">{{ rejectionMessage() }}</span>\r\n } @else {\r\n {{ hint() }}\r\n }\r\n </mat-hint>\r\n\r\n @if (error()) {\r\n <mat-error>{{ error() }}</mat-error>\r\n }\r\n</mat-form-field>\r\n\r\n<!-- Regi\u00F3n viva fija: los descartes se anuncian aunque el lector est\u00E9 en otro sitio -->\r\n<div class=\"ngx-input-file__live\" aria-live=\"polite\">{{ rejectionMessage() }}</div>\r\n", styles: [":host{display:block;width:100%}.ngx-input-file__field{width:100%;cursor:pointer}:host(.ngx-input-file--has-files) .ngx-input-file__field{--mat-form-field-container-vertical-padding: 8px}:host(.ngx-input-file--disabled) .ngx-input-file__field{cursor:default}:host(.ngx-input-file--dropping) .ngx-input-file__field{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-outline-width: 2px;--mat-form-field-filled-active-indicator-color: var(--mat-sys-primary);--mat-form-field-filled-hover-active-indicator-color: var(--mat-sys-primary)}.ngx-input-file__chips{width:100%}.ngx-input-file__trigger.mat-mdc-chip-input{cursor:inherit;caret-color:transparent;flex:1 0 8ch}:host(.ngx-input-file--has-files) .ngx-input-file__trigger.mat-mdc-chip-input{flex:1 1 0;min-width:0;margin-left:0}.ngx-input-file__chip{max-width:100%}.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__cell--primary,.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__action--primary,.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__text-label{min-width:0;overflow:hidden}.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__text-label{display:flex;align-items:baseline;gap:6px}.ngx-input-file__chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngx-input-file__chip-size{flex:none;font:var(--mat-sys-label-small);color:var(--mat-sys-on-surface-variant)}.ngx-input-file__rejection{color:var(--mat-sys-error)}.ngx-input-file__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i2.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1032
1047
|
}
|
|
1033
1048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxInputFile, decorators: [{
|
|
1034
1049
|
type: Component,
|
|
@@ -1090,13 +1105,13 @@ class NgxBasicSelect {
|
|
|
1090
1105
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1091
1106
|
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1092
1107
|
basicSelectConfig = input.required(...(ngDevMode ? [{ debugName: "basicSelectConfig" }] : []));
|
|
1093
|
-
isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
1108
|
+
isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1094
1109
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1095
1110
|
subscriptSizing = input('fixed', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : []));
|
|
1096
1111
|
appearance = input('fill', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
1097
|
-
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
1098
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1099
|
-
clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
|
|
1112
|
+
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1113
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1114
|
+
clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
1100
1115
|
error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1101
1116
|
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
1102
1117
|
// ─── Outputs ─────────────────────────────────────────────────────────────
|
|
@@ -1105,6 +1120,8 @@ class NgxBasicSelect {
|
|
|
1105
1120
|
// ─── ViewChilds ──────────────────────────────────────────────────────────
|
|
1106
1121
|
matSelect = viewChild.required('matSelect');
|
|
1107
1122
|
searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
|
|
1123
|
+
/** Igual que matSelect, pero sin fallar antes de crear la vista (ngDoCheck se llama antes). */
|
|
1124
|
+
_matSelectRef = viewChild('matSelect', ...(ngDevMode ? [{ debugName: "_matSelectRef" }] : []));
|
|
1108
1125
|
// ─── Estado interno ──────────────────────────────────────────────────────
|
|
1109
1126
|
/** FormControl interno que gobierna el mat-select (independiente del control del form). */
|
|
1110
1127
|
innerControl = new FormControl(null);
|
|
@@ -1114,6 +1131,8 @@ class NgxBasicSelect {
|
|
|
1114
1131
|
cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
|
|
1115
1132
|
/** Estado del buscador (signal, no el DOM, para funcionar en zoneless). */
|
|
1116
1133
|
searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
|
|
1134
|
+
/** Anchos (en %) de las filas fantasma mientras se carga: distintos para que parezca texto. */
|
|
1135
|
+
skeletonWidths = [72, 48, 84, 60];
|
|
1117
1136
|
onChange = () => { };
|
|
1118
1137
|
onTouched = () => { };
|
|
1119
1138
|
/** Deshabilitado efectivo: input `disabled` o el que llega del formulario. */
|
|
@@ -1137,6 +1156,11 @@ class NgxBasicSelect {
|
|
|
1137
1156
|
};
|
|
1138
1157
|
});
|
|
1139
1158
|
}, ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : []));
|
|
1159
|
+
/** Buscador visible según `basicSelectConfig.search` (true, false o número mínimo de opciones). */
|
|
1160
|
+
showSearch = computed(() => {
|
|
1161
|
+
const search = this.basicSelectConfig().search ?? true;
|
|
1162
|
+
return typeof search === 'number' ? this.options().length > search : search;
|
|
1163
|
+
}, ...(ngDevMode ? [{ debugName: "showSearch" }] : []));
|
|
1140
1164
|
/** Hay datos de entrada (con independencia del buscador). */
|
|
1141
1165
|
hasData = computed(() => this.resolvedOptions().length > 0, ...(ngDevMode ? [{ debugName: "hasData" }] : []));
|
|
1142
1166
|
/**
|
|
@@ -1173,13 +1197,11 @@ class NgxBasicSelect {
|
|
|
1173
1197
|
isErrorState: () => !!(this._ngControl?.invalid && (this._ngControl?.touched || this._isParentFormSubmitted())),
|
|
1174
1198
|
};
|
|
1175
1199
|
/**
|
|
1176
|
-
* Obligatorio si el control del formulario tiene el validador `required`.
|
|
1177
|
-
*
|
|
1178
|
-
*
|
|
1200
|
+
* Obligatorio si el control del formulario tiene el validador `required`. Se propaga al
|
|
1201
|
+
* mat-select interno para que el mat-form-field pinte el asterisco. Es un signal (no un
|
|
1202
|
+
* método en plantilla): se actualiza con los eventos del control y en cada ngDoCheck.
|
|
1179
1203
|
*/
|
|
1180
|
-
isRequired(
|
|
1181
|
-
return this._ngControl?.control?.hasValidator(Validators.required) ?? false;
|
|
1182
|
-
}
|
|
1204
|
+
isRequired = signal(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
1183
1205
|
/** true cuando el formulario contenedor ya ha intentado enviarse. */
|
|
1184
1206
|
_isParentFormSubmitted() {
|
|
1185
1207
|
return this._parentFormGroup?.submitted || this._parentForm?.submitted || false;
|
|
@@ -1213,9 +1235,28 @@ class NgxBasicSelect {
|
|
|
1213
1235
|
const parentSubmit = this._parentFormGroup?.ngSubmit ?? this._parentForm?.ngSubmit;
|
|
1214
1236
|
parentSubmit?.pipe(takeUntilDestroyed()).subscribe(() => {
|
|
1215
1237
|
this.innerControl.markAsTouched();
|
|
1216
|
-
this.
|
|
1238
|
+
this._syncFormState();
|
|
1217
1239
|
});
|
|
1218
1240
|
}
|
|
1241
|
+
ngAfterViewInit() {
|
|
1242
|
+
// formControlName asigna su control después de registrar el value accessor: aquí ya está
|
|
1243
|
+
this._syncFormState();
|
|
1244
|
+
}
|
|
1245
|
+
ngDoCheck() {
|
|
1246
|
+
// Hay cambios sin evento ni señal (validadores añadidos después, resetForm que quita el
|
|
1247
|
+
// «enviado»…). Con OnPush el mat-select interno no se revisaría: se fuerza aquí.
|
|
1248
|
+
this._syncFormState();
|
|
1249
|
+
}
|
|
1250
|
+
_syncFormState() {
|
|
1251
|
+
this.isRequired.set(this._ngControl?.control?.hasValidator(Validators.required) ?? false);
|
|
1252
|
+
const select = this._matSelectRef();
|
|
1253
|
+
if (!select)
|
|
1254
|
+
return;
|
|
1255
|
+
const before = select.errorState;
|
|
1256
|
+
select.updateErrorState();
|
|
1257
|
+
if (select.errorState !== before)
|
|
1258
|
+
this._changeDetectorRef.markForCheck();
|
|
1259
|
+
}
|
|
1219
1260
|
// ─── ControlValueAccessor ─────────────────────────────────────────────────
|
|
1220
1261
|
writeValue(value) {
|
|
1221
1262
|
this.innerControl.setValue(value, { emitEvent: false });
|
|
@@ -1270,7 +1311,7 @@ class NgxBasicSelect {
|
|
|
1270
1311
|
this._ngControl?.control?.markAsTouched();
|
|
1271
1312
|
}
|
|
1272
1313
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1273
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicSelect, isStandalone: true, selector: "ngx-basic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, basicSelectConfig: { classPropertyName: "basicSelectConfig", publicName: "basicSelectConfig", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\r\n <mat-label>{{ label() }}</mat-label>\r\n <mat-select\r\n #matSelect\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n [multiple]=\"multiple()\"\r\n [placeholder]=\"placeholder()\"\r\n (openedChange)=\"onOpenedChange($event)\"\r\n >\r\n @if(isLoading()) {\r\n <!--\r\n Opcion deshabilitada (no un div): mat-select no abre el panel si no\r\n tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\r\n panel abre tambien durante la carga y se ve el indicador.\r\n -->\r\n <mat-option disabled class=\"stateOption loadingOption\">\r\n <mat-spinner diameter=\"18\" />\r\n <span>{{ texts().common.loading }}</span>\r\n </mat-option>\r\n } @else {\r\n <div class=\"searchFilter\">\r\n <mat-icon class=\"searchIcon\">search</mat-icon>\r\n <input\r\n matInput\r\n #searchInput\r\n type=\"text\"\r\n [attr.aria-label]=\"texts().common.search\"\r\n [placeholder]=\"texts().common.search\"\r\n [value]=\"searchQuery()\"\r\n (input)=\"onSearchInput($any($event.target).value)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n <button type=\"button\" matIconButton [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSearch()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n <!--\r\n Solo se renderizan las opciones que casan con el buscador (mas las\r\n seleccionadas). Las que no casan se quitan del DOM para que no se puedan\r\n enfocar con las flechas: con el panel abierto mat-select permite navegar\r\n a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\r\n -->\r\n @for(option of displayedOptions(); track option.value) {\r\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n @if(showNoOptionsMessage()) {\r\n <mat-option disabled class=\"stateOption noResults\">\r\n {{ hasData() ? texts().select.noResults : texts().common.noData }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-select>\r\n @if(isLoading()) {\r\n <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\r\n } @else if(clearable() && (multiple() ? value()?.length : value())) {\r\n <button\r\n matIconButton\r\n matSuffix\r\n [attr.aria-label]=\"texts().common.clearSearch\"\r\n (click)=\"onClearClick(); $event.stopPropagation()\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>\r\n\r\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\r\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\r\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--mat-sys-surface-container);z-index:10;border-bottom:1px solid var(--mat-sys-outline-variant)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}.searchFilter button{position:absolute;right:5px}.stateOption{justify-content:center;text-align:center;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);pointer-events:none;opacity:1}.loadingOption{display:flex;align-items:center;gap:8px}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1314
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicSelect, isStandalone: true, selector: "ngx-basic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, basicSelectConfig: { classPropertyName: "basicSelectConfig", publicName: "basicSelectConfig", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "_matSelectRef", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\r\n <mat-label>{{ label() }}</mat-label>\r\n <mat-select\r\n #matSelect\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n [multiple]=\"multiple()\"\r\n [placeholder]=\"placeholder()\"\r\n (openedChange)=\"onOpenedChange($event)\"\r\n >\r\n @if(isLoading()) {\r\n <!--\r\n Filas fantasma como opciones deshabilitadas (no divs): mat-select no abre el\r\n panel si no tiene ninguna mat-option (_canOpen exige options.length > 0).\r\n El texto \u00ABCargando\u2026\u00BB solo lo leen los lectores de pantalla (en la primera fila).\r\n -->\r\n @for (width of skeletonWidths; track $index) {\r\n <mat-option disabled class=\"skeletonOption\" [attr.aria-hidden]=\"$first ? null : true\">\r\n @if ($first) {\r\n <span class=\"srOnly\">{{ texts().common.loading }}</span>\r\n }\r\n <span class=\"skeletonBar\" [style.width.%]=\"width\" aria-hidden=\"true\"></span>\r\n </mat-option>\r\n }\r\n } @else {\r\n @if (showSearch()) {\r\n <div class=\"searchFilter\">\r\n <mat-icon class=\"searchIcon\">search</mat-icon>\r\n <input\r\n matInput\r\n #searchInput\r\n type=\"text\"\r\n [attr.aria-label]=\"texts().common.search\"\r\n [placeholder]=\"texts().common.search\"\r\n [value]=\"searchQuery()\"\r\n (input)=\"onSearchInput($any($event.target).value)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n <button type=\"button\" matIconButton [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSearch()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n <!--\r\n Solo se renderizan las opciones que casan con el buscador (mas las\r\n seleccionadas). Las que no casan se quitan del DOM para que no se puedan\r\n enfocar con las flechas: con el panel abierto mat-select permite navegar\r\n a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\r\n -->\r\n @for(option of displayedOptions(); track option.value) {\r\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n @if(showNoOptionsMessage()) {\r\n <mat-option disabled class=\"stateOption noResults\">\r\n {{ hasData() ? texts().select.noResults : texts().common.noData }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-select>\r\n @if(isLoading()) {\r\n <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\r\n } @else if(clearable() && (multiple() ? value()?.length : value())) {\r\n <button\r\n matIconButton\r\n matSuffix\r\n [attr.aria-label]=\"texts().select.clear\"\r\n (click)=\"onClearClick(); $event.stopPropagation()\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>\r\n\r\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\r\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\r\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--mat-sys-surface-container);z-index:10;border-bottom:1px solid var(--mat-sys-outline-variant)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}.searchFilter button{position:absolute;right:5px}.stateOption{justify-content:center;text-align:center;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);pointer-events:none;opacity:1}.skeletonOption{pointer-events:none;opacity:0;animation:skeleton-in .3s ease forwards}.skeletonOption.mdc-list-item--disabled ::ng-deep .mdc-list-item__primary-text{display:flex;width:100%;opacity:1}.skeletonOption:nth-of-type(1){animation-delay:0ms}.skeletonOption:nth-of-type(2){animation-delay:60ms}.skeletonOption:nth-of-type(3){animation-delay:.12s}.skeletonOption:nth-of-type(4){animation-delay:.18s}.skeletonBar{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent) 25%,color-mix(in srgb,var(--mat-sys-on-surface) 16%,transparent) 37%,color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent) 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite}@keyframes skeleton-in{0%{opacity:0}to{opacity:1}}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media (prefers-reduced-motion: reduce){.skeletonOption,.skeletonBar{animation:none;opacity:1}}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1274
1315
|
}
|
|
1275
1316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, decorators: [{
|
|
1276
1317
|
type: Component,
|
|
@@ -1282,8 +1323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1282
1323
|
MatFormFieldModule,
|
|
1283
1324
|
ReactiveFormsModule,
|
|
1284
1325
|
MatProgressSpinnerModule,
|
|
1285
|
-
], template: "\r\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\r\n <mat-label>{{ label() }}</mat-label>\r\n <mat-select\r\n #matSelect\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n [multiple]=\"multiple()\"\r\n [placeholder]=\"placeholder()\"\r\n (openedChange)=\"onOpenedChange($event)\"\r\n >\r\n @if(isLoading()) {\r\n <!--\r\n
|
|
1286
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], basicSelectConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "basicSelectConfig", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], matSelect: [{ type: i0.ViewChild, args: ['matSelect', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
|
|
1326
|
+
], template: "\r\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\r\n <mat-label>{{ label() }}</mat-label>\r\n <mat-select\r\n #matSelect\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n [multiple]=\"multiple()\"\r\n [placeholder]=\"placeholder()\"\r\n (openedChange)=\"onOpenedChange($event)\"\r\n >\r\n @if(isLoading()) {\r\n <!--\r\n Filas fantasma como opciones deshabilitadas (no divs): mat-select no abre el\r\n panel si no tiene ninguna mat-option (_canOpen exige options.length > 0).\r\n El texto \u00ABCargando\u2026\u00BB solo lo leen los lectores de pantalla (en la primera fila).\r\n -->\r\n @for (width of skeletonWidths; track $index) {\r\n <mat-option disabled class=\"skeletonOption\" [attr.aria-hidden]=\"$first ? null : true\">\r\n @if ($first) {\r\n <span class=\"srOnly\">{{ texts().common.loading }}</span>\r\n }\r\n <span class=\"skeletonBar\" [style.width.%]=\"width\" aria-hidden=\"true\"></span>\r\n </mat-option>\r\n }\r\n } @else {\r\n @if (showSearch()) {\r\n <div class=\"searchFilter\">\r\n <mat-icon class=\"searchIcon\">search</mat-icon>\r\n <input\r\n matInput\r\n #searchInput\r\n type=\"text\"\r\n [attr.aria-label]=\"texts().common.search\"\r\n [placeholder]=\"texts().common.search\"\r\n [value]=\"searchQuery()\"\r\n (input)=\"onSearchInput($any($event.target).value)\"\r\n (keydown)=\"onSearchKeydown($event)\"\r\n />\r\n <button type=\"button\" matIconButton [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSearch()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n <!--\r\n Solo se renderizan las opciones que casan con el buscador (mas las\r\n seleccionadas). Las que no casan se quitan del DOM para que no se puedan\r\n enfocar con las flechas: con el panel abierto mat-select permite navegar\r\n a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\r\n -->\r\n @for(option of displayedOptions(); track option.value) {\r\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n @if(showNoOptionsMessage()) {\r\n <mat-option disabled class=\"stateOption noResults\">\r\n {{ hasData() ? texts().select.noResults : texts().common.noData }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-select>\r\n @if(isLoading()) {\r\n <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\r\n } @else if(clearable() && (multiple() ? value()?.length : value())) {\r\n <button\r\n matIconButton\r\n matSuffix\r\n [attr.aria-label]=\"texts().select.clear\"\r\n (click)=\"onClearClick(); $event.stopPropagation()\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>\r\n\r\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\r\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\r\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--mat-sys-surface-container);z-index:10;border-bottom:1px solid var(--mat-sys-outline-variant)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}.searchFilter button{position:absolute;right:5px}.stateOption{justify-content:center;text-align:center;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);pointer-events:none;opacity:1}.skeletonOption{pointer-events:none;opacity:0;animation:skeleton-in .3s ease forwards}.skeletonOption.mdc-list-item--disabled ::ng-deep .mdc-list-item__primary-text{display:flex;width:100%;opacity:1}.skeletonOption:nth-of-type(1){animation-delay:0ms}.skeletonOption:nth-of-type(2){animation-delay:60ms}.skeletonOption:nth-of-type(3){animation-delay:.12s}.skeletonOption:nth-of-type(4){animation-delay:.18s}.skeletonBar{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent) 25%,color-mix(in srgb,var(--mat-sys-on-surface) 16%,transparent) 37%,color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent) 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite}@keyframes skeleton-in{0%{opacity:0}to{opacity:1}}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media (prefers-reduced-motion: reduce){.skeletonOption,.skeletonBar{animation:none;opacity:1}}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
1327
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], basicSelectConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "basicSelectConfig", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], matSelect: [{ type: i0.ViewChild, args: ['matSelect', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], _matSelectRef: [{ type: i0.ViewChild, args: ['matSelect', { isSignal: true }] }] } });
|
|
1287
1328
|
|
|
1288
1329
|
var DialogBodyType;
|
|
1289
1330
|
(function (DialogBodyType) {
|
|
@@ -1338,6 +1379,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1338
1379
|
}]
|
|
1339
1380
|
}], ctorParameters: () => [], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
1340
1381
|
|
|
1382
|
+
/**
|
|
1383
|
+
* Encabezado de diálogo con botón X para cerrar: el mismo que usa ngx-dialog, para diálogos propios
|
|
1384
|
+
* abiertos con MatDialog. Va en lugar de `<h2 mat-dialog-title>`:
|
|
1385
|
+
*
|
|
1386
|
+
* ```html
|
|
1387
|
+
* <ngx-dialog-header [title]="'Editar proyecto'" icon="edit" />
|
|
1388
|
+
* <!-- o con contenido propio -->
|
|
1389
|
+
* <ngx-dialog-header>{{ (isNew ? 'PROJECTS.create' : 'PROJECTS.edit') | translate }}</ngx-dialog-header>
|
|
1390
|
+
* ```
|
|
1391
|
+
*/
|
|
1392
|
+
class NgxDialogHeader {
|
|
1393
|
+
_dialogRef = inject(MatDialogRef, { optional: true });
|
|
1394
|
+
texts = inject(NgxTexts).texts;
|
|
1395
|
+
/** Título. También se puede poner como contenido (`<ngx-dialog-header>…</ngx-dialog-header>`). */
|
|
1396
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
1397
|
+
/** Línea secundaria bajo el título. */
|
|
1398
|
+
subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
|
|
1399
|
+
/** Icono de Material Symbols delante del título. */
|
|
1400
|
+
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
1401
|
+
/** Color del icono (p. ej. `var(--mat-sys-error)`). */
|
|
1402
|
+
iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
|
|
1403
|
+
/**
|
|
1404
|
+
* Muestra la X. Sin indicar, se ve mientras el diálogo se pueda cerrar: se oculta si el diálogo tiene
|
|
1405
|
+
* `disableClose` (también si se activa después, p. ej. durante una subida) y vuelve al quitarlo.
|
|
1406
|
+
*/
|
|
1407
|
+
showClose = input(undefined, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
|
|
1408
|
+
/** Valor con el que se cierra al pulsar la X. Por defecto `undefined`, igual que con Esc o al pulsar fuera. */
|
|
1409
|
+
closeResult = input(undefined, ...(ngDevMode ? [{ debugName: "closeResult" }] : []));
|
|
1410
|
+
/** disableClose es una propiedad normal del MatDialogRef: se lee en cada comprobación. */
|
|
1411
|
+
_closable = signal(!this._dialogRef?.disableClose, ...(ngDevMode ? [{ debugName: "_closable" }] : []));
|
|
1412
|
+
closeVisible = computed(() => !!this._dialogRef && (this.showClose() ?? this._closable()), ...(ngDevMode ? [{ debugName: "closeVisible" }] : []));
|
|
1413
|
+
ngDoCheck() {
|
|
1414
|
+
this._closable.set(!this._dialogRef?.disableClose);
|
|
1415
|
+
}
|
|
1416
|
+
/** Cierra el diálogo con `closeResult`. */
|
|
1417
|
+
close() {
|
|
1418
|
+
this._dialogRef?.close(this.closeResult());
|
|
1419
|
+
}
|
|
1420
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1421
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxDialogHeader, isStandalone: true, selector: "ngx-dialog-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeResult: { classPropertyName: "closeResult", publicName: "closeResult", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n El h2 (mat-dialog-title) da el nombre accesible al di\u00E1logo, as\u00ED que la X va fuera de \u00E9l,\n posicionada encima, para que no forme parte de ese nombre.\n-->\n<div class=\"ngx-dialog__header\" [class.ngx-dialog__header--closable]=\"closeVisible()\">\n <h2 mat-dialog-title class=\"ngx-dialog__title\">\n @if (icon()) {\n <mat-icon class=\"ngx-dialog__icon\" [style.color]=\"iconColor() || null\" aria-hidden=\"true\">{{ icon() }}</mat-icon>\n }\n <span class=\"ngx-dialog__heading\">\n <span class=\"ngx-dialog__title-text\">{{ title() }}<ng-content /></span>\n @if (subtitle()) {\n <span class=\"ngx-dialog__subtitle\">{{ subtitle() }}</span>\n }\n </span>\n </h2>\n\n @if (closeVisible()) {\n <button\n type=\"button\"\n matIconButton\n class=\"ngx-dialog__close\"\n [attr.aria-label]=\"texts().dialog.close\"\n [matTooltip]=\"texts().dialog.close\"\n (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n</div>\n", styles: [":host{display:block}.ngx-dialog__header{position:relative}.ngx-dialog__title.mat-mdc-dialog-title{display:flex;align-items:center;gap:12px;margin:0;padding:18px 24px 16px}.ngx-dialog__title.mat-mdc-dialog-title:before{display:none}.ngx-dialog__header--closable .ngx-dialog__title.mat-mdc-dialog-title{padding-right:64px}.ngx-dialog__icon{flex:none;width:28px;height:28px;font-size:28px}.ngx-dialog__heading{display:flex;flex-direction:column;gap:2px;min-width:0}.ngx-dialog__title-text{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);overflow-wrap:anywhere}.ngx-dialog__subtitle{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant)}.ngx-dialog__close{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:var(--mat-sys-on-surface-variant)}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1422
|
+
}
|
|
1423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogHeader, decorators: [{
|
|
1424
|
+
type: Component,
|
|
1425
|
+
args: [{ selector: 'ngx-dialog-header', imports: [MatDialogTitle, MatButtonModule, MatIconModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n El h2 (mat-dialog-title) da el nombre accesible al di\u00E1logo, as\u00ED que la X va fuera de \u00E9l,\n posicionada encima, para que no forme parte de ese nombre.\n-->\n<div class=\"ngx-dialog__header\" [class.ngx-dialog__header--closable]=\"closeVisible()\">\n <h2 mat-dialog-title class=\"ngx-dialog__title\">\n @if (icon()) {\n <mat-icon class=\"ngx-dialog__icon\" [style.color]=\"iconColor() || null\" aria-hidden=\"true\">{{ icon() }}</mat-icon>\n }\n <span class=\"ngx-dialog__heading\">\n <span class=\"ngx-dialog__title-text\">{{ title() }}<ng-content /></span>\n @if (subtitle()) {\n <span class=\"ngx-dialog__subtitle\">{{ subtitle() }}</span>\n }\n </span>\n </h2>\n\n @if (closeVisible()) {\n <button\n type=\"button\"\n matIconButton\n class=\"ngx-dialog__close\"\n [attr.aria-label]=\"texts().dialog.close\"\n [matTooltip]=\"texts().dialog.close\"\n (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n</div>\n", styles: [":host{display:block}.ngx-dialog__header{position:relative}.ngx-dialog__title.mat-mdc-dialog-title{display:flex;align-items:center;gap:12px;margin:0;padding:18px 24px 16px}.ngx-dialog__title.mat-mdc-dialog-title:before{display:none}.ngx-dialog__header--closable .ngx-dialog__title.mat-mdc-dialog-title{padding-right:64px}.ngx-dialog__icon{flex:none;width:28px;height:28px;font-size:28px}.ngx-dialog__heading{display:flex;flex-direction:column;gap:2px;min-width:0}.ngx-dialog__title-text{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);overflow-wrap:anywhere}.ngx-dialog__subtitle{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant)}.ngx-dialog__close{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:var(--mat-sys-on-surface-variant)}\n"] }]
|
|
1426
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closeResult: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeResult", required: false }] }] } });
|
|
1427
|
+
|
|
1341
1428
|
/**
|
|
1342
1429
|
* Diálogo genérico que abre NgxDialogService. El contenido (texto, HTML, componente o plantilla)
|
|
1343
1430
|
* puede usar NgxDialogContext para devolver un resultado o deshabilitar el botón de confirmar.
|
|
@@ -1356,7 +1443,6 @@ class NgxDialog {
|
|
|
1356
1443
|
destructive = this._data.destructive ?? false;
|
|
1357
1444
|
/** La X no tiene sentido en un diálogo con disableClose (está pensado para no poder cerrarse sin decidir). */
|
|
1358
1445
|
showClose = this._data.showClose ?? !this._dialogRef.disableClose;
|
|
1359
|
-
closeLabel = this._texts().dialog.close;
|
|
1360
1446
|
cancelText = this._data.cancelText ?? this._texts().dialog.cancel;
|
|
1361
1447
|
confirmText = this._data.confirmText ?? this._texts().dialog.accept;
|
|
1362
1448
|
// ── NgxDialogContext ──────────────────────────────────────────────────────
|
|
@@ -1381,20 +1467,18 @@ class NgxDialog {
|
|
|
1381
1467
|
this._dialogRef.close(result === undefined ? true : result);
|
|
1382
1468
|
}
|
|
1383
1469
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1384
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxDialog, isStandalone: true, selector: "ngx-dialog", providers: [{ provide: NgxDialogContext, useExisting: forwardRef(() => NgxDialog) }], ngImport: i0, template: "
|
|
1470
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxDialog, isStandalone: true, selector: "ngx-dialog", providers: [{ provide: NgxDialogContext, useExisting: forwardRef(() => NgxDialog) }], ngImport: i0, template: "<!-- Encabezado compartido con los di\u00E1logos propios (ngx-dialog-header) -->\r\n<ngx-dialog-header\r\n [title]=\"title\"\r\n [subtitle]=\"subtitle\"\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [showClose]=\"showClose\" />\r\n\r\n<mat-dialog-content>\r\n <div class=\"ngx-dialog__content\">\r\n @switch (body.type) {\r\n @case (DialogBodyType.TEXT) {\r\n <p class=\"ngx-dialog__text\">{{ body.content }}</p>\r\n }\r\n @case (DialogBodyType.HTML) {\r\n <div [innerHTML]=\"body.content\"></div>\r\n }\r\n @case (DialogBodyType.COMPONENT) {\r\n <ng-container\r\n ngxDynamicHost\r\n [component]=\"$any(body.content)\"\r\n [data]=\"body.data\"\r\n />\r\n }\r\n @case (DialogBodyType.TEMPLATE) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"$any(body.content)\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n />\r\n }\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n\r\n@if (showCancel || showConfirm) {\r\n <mat-dialog-actions align=\"end\" class=\"ngx-dialog__actions\">\r\n @if (showCancel) {\r\n <button type=\"button\" matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n {{ cancelText }}\r\n </button>\r\n }\r\n @if (showConfirm) {\r\n <button\r\n type=\"button\"\r\n matButton=\"filled\"\r\n class=\"ngx-dialog__confirm\"\r\n [class.ngx-dialog__confirm--destructive]=\"destructive\"\r\n [disabled]=\"confirmDisabled()\"\r\n (click)=\"onConfirmClick()\">\r\n {{ confirmText }}\r\n </button>\r\n }\r\n </mat-dialog-actions>\r\n}\r\n", styles: [":host{display:block}.ngx-dialog__content{padding-top:4px}.ngx-dialog__text{margin:0;white-space:pre-line}.ngx-dialog__actions{gap:8px}.ngx-dialog__confirm--destructive{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error)}\n"], dependencies: [{ kind: "component", type: NgxDialogHeader, selector: "ngx-dialog-header", inputs: ["title", "subtitle", "icon", "iconColor", "showClose", "closeResult"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicHostDirective, selector: "[ngxDynamicHost]", inputs: ["component", "data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1385
1471
|
}
|
|
1386
1472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, decorators: [{
|
|
1387
1473
|
type: Component,
|
|
1388
1474
|
args: [{ selector: 'ngx-dialog', imports: [
|
|
1389
|
-
|
|
1475
|
+
NgxDialogHeader,
|
|
1390
1476
|
MatDialogContent,
|
|
1391
1477
|
MatDialogActions,
|
|
1392
1478
|
MatButtonModule,
|
|
1393
|
-
MatIconModule,
|
|
1394
|
-
MatTooltipModule,
|
|
1395
1479
|
NgTemplateOutlet,
|
|
1396
1480
|
DynamicHostDirective,
|
|
1397
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NgxDialogContext, useExisting: forwardRef(() => NgxDialog) }], template: "
|
|
1481
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NgxDialogContext, useExisting: forwardRef(() => NgxDialog) }], template: "<!-- Encabezado compartido con los di\u00E1logos propios (ngx-dialog-header) -->\r\n<ngx-dialog-header\r\n [title]=\"title\"\r\n [subtitle]=\"subtitle\"\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [showClose]=\"showClose\" />\r\n\r\n<mat-dialog-content>\r\n <div class=\"ngx-dialog__content\">\r\n @switch (body.type) {\r\n @case (DialogBodyType.TEXT) {\r\n <p class=\"ngx-dialog__text\">{{ body.content }}</p>\r\n }\r\n @case (DialogBodyType.HTML) {\r\n <div [innerHTML]=\"body.content\"></div>\r\n }\r\n @case (DialogBodyType.COMPONENT) {\r\n <ng-container\r\n ngxDynamicHost\r\n [component]=\"$any(body.content)\"\r\n [data]=\"body.data\"\r\n />\r\n }\r\n @case (DialogBodyType.TEMPLATE) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"$any(body.content)\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n />\r\n }\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n\r\n@if (showCancel || showConfirm) {\r\n <mat-dialog-actions align=\"end\" class=\"ngx-dialog__actions\">\r\n @if (showCancel) {\r\n <button type=\"button\" matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n {{ cancelText }}\r\n </button>\r\n }\r\n @if (showConfirm) {\r\n <button\r\n type=\"button\"\r\n matButton=\"filled\"\r\n class=\"ngx-dialog__confirm\"\r\n [class.ngx-dialog__confirm--destructive]=\"destructive\"\r\n [disabled]=\"confirmDisabled()\"\r\n (click)=\"onConfirmClick()\">\r\n {{ confirmText }}\r\n </button>\r\n }\r\n </mat-dialog-actions>\r\n}\r\n", styles: [":host{display:block}.ngx-dialog__content{padding-top:4px}.ngx-dialog__text{margin:0;white-space:pre-line}.ngx-dialog__actions{gap:8px}.ngx-dialog__confirm--destructive{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error)}\n"] }]
|
|
1398
1482
|
}] });
|
|
1399
1483
|
|
|
1400
1484
|
/**
|
|
@@ -1452,6 +1536,15 @@ class DynamicCellHostDirective {
|
|
|
1452
1536
|
}
|
|
1453
1537
|
if (row === undefined || key === undefined)
|
|
1454
1538
|
return;
|
|
1539
|
+
// Si el componente declara row/key como input() (lo normal), se usan los inputs de verdad
|
|
1540
|
+
const inputs = reflectComponentType(component)?.inputs.map(i => i.templateName) ?? [];
|
|
1541
|
+
if (inputs.includes('row')) {
|
|
1542
|
+
this._currentRef.setInput('row', row);
|
|
1543
|
+
if (inputs.includes('key'))
|
|
1544
|
+
this._currentRef.setInput('key', key);
|
|
1545
|
+
return;
|
|
1546
|
+
}
|
|
1547
|
+
// Compatibilidad: componentes antiguos con row/key como propiedades (se les da un signal)
|
|
1455
1548
|
if (!this._rowSignal || !this._keySignal) {
|
|
1456
1549
|
this._rowSignal = signal(row);
|
|
1457
1550
|
this._keySignal = signal(key);
|
|
@@ -2153,7 +2246,7 @@ class ConfigureTableColumnsComponent {
|
|
|
2153
2246
|
this.dialogRef.close();
|
|
2154
2247
|
}
|
|
2155
2248
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureTableColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2156
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigureTableColumnsComponent, isStandalone: true, selector: "lib-configure-table-columns", ngImport: i0, template: "<h2 mat-dialog-title>{{texts().columnsDialog.title}} {{data.tableName| lowercase}}</h2>\r\n<mat-dialog-content>\r\n\r\n <div class=\"columnsList\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\r\n @for (column of columns(); track $index; let first = $first; let last = $last;) {\r\n <div \r\n class=\"columnContainer\" \r\n cdkDrag \r\n [class.pinned]=\"$index == animationIndex()\"\r\n [style]=\"{ transition: `background-color ${animationTime}ms ease` }\">\r\n\r\n <div class=\"labelContainer\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n <p class=\"label\">\r\n {{data.columnsLabels[column.key] ?? ''}}\r\n @if(hasFilterAndDisabled(column)) {\r\n <span> {{texts().columnsDialog.hasFiltersApplied}}</span>\r\n }\r\n </p>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button \r\n matIconButton\r\n [matTooltip]=\"column.isSticky ? texts().columnsDialog.unpin : texts().columnsDialog.pin\"\r\n (click)=\"onPinClick(column, $index)\">\r\n <mat-icon>{{column.isSticky ? 'keep_off' : 'keep'}}</mat-icon>\r\n </button>\r\n\r\n <button [matTooltip]=\"texts().columnsDialog.moveUp\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n <button [matTooltip]=\"texts().columnsDialog.moveDown\" matIconButton [disabled]=\"$last\" (click)=\"onDownClick($index)\"><mat-icon>keyboard_arrow_down</mat-icon></button>\r\n <mat-slide-toggle [checked]=\"column.show\" (toggleChange)=\"onToggleChange(column)\"></mat-slide-toggle>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <p class=\"note\"><span>{{texts().columnsDialog.note}}</span> {{texts().columnsDialog.hideColumnWithFiltersNote}}</p>\r\n \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"undefined\">{{texts().common.close}}</button>\r\n <button matButton (click)=\"onResetClick()\">{{texts().columnsDialog.reset}}</button>\r\n <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">{{texts().common.confirm}}</button>\r\n</mat-dialog-actions>", styles: [".columnsList{display:flex;flex-direction:column;cursor:grab}.columnContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface);padding:4px 10px}p{margin:0}.label span{font:var(--mat-sys-label-small);color:var(--mat-sys-error);font-weight:400;font-style:italic}.labelContainer,.actions{display:flex;flex-direction:row;align-items:center;gap:10px}.note{margin-top:20px;font-style:italic;font:var(--mat-sys-body-small);font-weight:300;width:100%;text-align:center}.note span{font-weight:500}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer:last-child{border:none}.columnsList.cdk-drop-list-dragging .columnContainer:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer.pinned{background-color:#ffeb3b4d;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$
|
|
2249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigureTableColumnsComponent, isStandalone: true, selector: "lib-configure-table-columns", ngImport: i0, template: "<h2 mat-dialog-title>{{texts().columnsDialog.title}} {{data.tableName| lowercase}}</h2>\r\n<mat-dialog-content>\r\n\r\n <div class=\"columnsList\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\r\n @for (column of columns(); track $index; let first = $first; let last = $last;) {\r\n <div \r\n class=\"columnContainer\" \r\n cdkDrag \r\n [class.pinned]=\"$index == animationIndex()\"\r\n [style]=\"{ transition: `background-color ${animationTime}ms ease` }\">\r\n\r\n <div class=\"labelContainer\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n <p class=\"label\">\r\n {{data.columnsLabels[column.key] ?? ''}}\r\n @if(hasFilterAndDisabled(column)) {\r\n <span> {{texts().columnsDialog.hasFiltersApplied}}</span>\r\n }\r\n </p>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button \r\n matIconButton\r\n [matTooltip]=\"column.isSticky ? texts().columnsDialog.unpin : texts().columnsDialog.pin\"\r\n (click)=\"onPinClick(column, $index)\">\r\n <mat-icon>{{column.isSticky ? 'keep_off' : 'keep'}}</mat-icon>\r\n </button>\r\n\r\n <button [matTooltip]=\"texts().columnsDialog.moveUp\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n <button [matTooltip]=\"texts().columnsDialog.moveDown\" matIconButton [disabled]=\"$last\" (click)=\"onDownClick($index)\"><mat-icon>keyboard_arrow_down</mat-icon></button>\r\n <mat-slide-toggle [checked]=\"column.show\" (toggleChange)=\"onToggleChange(column)\"></mat-slide-toggle>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <p class=\"note\"><span>{{texts().columnsDialog.note}}</span> {{texts().columnsDialog.hideColumnWithFiltersNote}}</p>\r\n \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"undefined\">{{texts().common.close}}</button>\r\n <button matButton (click)=\"onResetClick()\">{{texts().columnsDialog.reset}}</button>\r\n <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">{{texts().common.confirm}}</button>\r\n</mat-dialog-actions>", styles: [".columnsList{display:flex;flex-direction:column;cursor:grab}.columnContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface);padding:4px 10px}p{margin:0}.label span{font:var(--mat-sys-label-small);color:var(--mat-sys-error);font-weight:400;font-style:italic}.labelContainer,.actions{display:flex;flex-direction:row;align-items:center;gap:10px}.note{margin-top:20px;font-style:italic;font:var(--mat-sys-body-small);font-weight:300;width:100%;text-align:center}.note span{font-weight:500}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer:last-child{border:none}.columnsList.cdk-drop-list-dragging .columnContainer:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer.pinned{background-color:#ffeb3b4d;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] });
|
|
2157
2250
|
}
|
|
2158
2251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureTableColumnsComponent, decorators: [{
|
|
2159
2252
|
type: Component,
|
|
@@ -2362,7 +2455,7 @@ class PaginatedSearchableSelectComponent {
|
|
|
2362
2455
|
});
|
|
2363
2456
|
}
|
|
2364
2457
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2365
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSearchableSelectComponent, isStandalone: true, selector: "ngx-paginated-searchable-select", inputs: { endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearableOptionLabel: { classPropertyName: "clearableOptionLabel", publicName: "clearableOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionChange: "optionChange" }, viewQueries: [{ propertyName: "searcher", first: true, predicate: ["htmlSearcher"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n @if (selectLabel()) {\r\n <mat-label>{{ selectLabel() }}</mat-label>\r\n }\r\n\r\n <mat-select\r\n [formControl]=\"innerControl()\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n [multiple]=\"multiple()\"\r\n (openedChange)=\"openedChange($event)\" \r\n [placeholder]=\"selectPlaceholder()\"\r\n panelClass=\"searchableSelectPanelClass\"\r\n (selectionChange)=\"onOptionChange($event)\"\r\n [compareWith]=\"compareWith()\">\r\n\r\n <div class=\"searcherContainer\">\r\n <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n @if (htmlSearcher.value.length == 0) {\r\n <span>{{ searchInputPlaceholder() || texts().common.search }}</span> \r\n }\r\n\r\n <input \r\n #htmlSearcher \r\n type=\"text\" \r\n matInput \r\n (keydown)=\"$event.stopPropagation()\"\r\n [value]=\"filters()().query ?? ''\" \r\n (input)=\"onQueryChange()\">\r\n\r\n @if (htmlSearcher.value.length > 0) {\r\n <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n }\r\n </div>\r\n\r\n <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\" />\r\n\r\n @if(clearable() && !multiple()) {\r\n <mat-option>{{ texts().select.removeOption(getClearableOptionName()) }}</mat-option>\r\n }\r\n \r\n @for (option of options(); track $index) {\r\n <mat-option [value]=\"option\">\r\n {{ optionLabel()(option) }}\r\n </mat-option>\r\n }\r\n\r\n <!-- Es MUY importante que estos vayan los ultimos (al final de todas las opciones). -->\r\n @for (option of optionsSelectedForView(); track $index) {\r\n <mat-option [value]=\"option\" class=\"hideOption\">\r\n {{ optionLabel()(option) }}\r\n </mat-option>\r\n }\r\n\r\n <!-- Si es multiple, como no esta el option de resetear, si filtran y no hay opciones, y luego cierran el select el desplegable no se abre y queda inutilizado, por eso, ponemos esta opcion dummy, que siempre esta oculta, y no hace nada, pero ya hace que haya un item, y el desplegable se abra -->\r\n @if(multiple()) {\r\n <mat-option class=\"hideOption\" dummyOption></mat-option>\r\n }\r\n\r\n @if (total() == 0) {\r\n <p class=\"withoutResults\">{{ texts().select.noResults }}</p>\r\n }\r\n\r\n @if((filters()().pageNumber * filters()().pageSize) < total() && !dataResource.isLoading()) {\r\n <button matButton=\"text\" class=\"showMore\" (click)=\"onMoreClick()\">\r\n {{ texts().select.showMore }}\r\n </button>\r\n }\r\n </mat-select>\r\n\r\n <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}mat-progress-bar{position:sticky;top:48px;z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}.showMore{width:calc(100% - 32px);margin:4px 16px 0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$
|
|
2458
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSearchableSelectComponent, isStandalone: true, selector: "ngx-paginated-searchable-select", inputs: { endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearableOptionLabel: { classPropertyName: "clearableOptionLabel", publicName: "clearableOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionChange: "optionChange" }, viewQueries: [{ propertyName: "searcher", first: true, predicate: ["htmlSearcher"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n @if (selectLabel()) {\r\n <mat-label>{{ selectLabel() }}</mat-label>\r\n }\r\n\r\n <mat-select\r\n [formControl]=\"innerControl()\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n [multiple]=\"multiple()\"\r\n (openedChange)=\"openedChange($event)\" \r\n [placeholder]=\"selectPlaceholder()\"\r\n panelClass=\"searchableSelectPanelClass\"\r\n (selectionChange)=\"onOptionChange($event)\"\r\n [compareWith]=\"compareWith()\">\r\n\r\n <div class=\"searcherContainer\">\r\n <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n @if (htmlSearcher.value.length == 0) {\r\n <span>{{ searchInputPlaceholder() || texts().common.search }}</span> \r\n }\r\n\r\n <input \r\n #htmlSearcher \r\n type=\"text\" \r\n matInput \r\n (keydown)=\"$event.stopPropagation()\"\r\n [value]=\"filters()().query ?? ''\" \r\n (input)=\"onQueryChange()\">\r\n\r\n @if (htmlSearcher.value.length > 0) {\r\n <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n }\r\n </div>\r\n\r\n <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\" />\r\n\r\n @if(clearable() && !multiple()) {\r\n <mat-option>{{ texts().select.removeOption(getClearableOptionName()) }}</mat-option>\r\n }\r\n \r\n @for (option of options(); track $index) {\r\n <mat-option [value]=\"option\">\r\n {{ optionLabel()(option) }}\r\n </mat-option>\r\n }\r\n\r\n <!-- Es MUY importante que estos vayan los ultimos (al final de todas las opciones). -->\r\n @for (option of optionsSelectedForView(); track $index) {\r\n <mat-option [value]=\"option\" class=\"hideOption\">\r\n {{ optionLabel()(option) }}\r\n </mat-option>\r\n }\r\n\r\n <!-- Si es multiple, como no esta el option de resetear, si filtran y no hay opciones, y luego cierran el select el desplegable no se abre y queda inutilizado, por eso, ponemos esta opcion dummy, que siempre esta oculta, y no hace nada, pero ya hace que haya un item, y el desplegable se abra -->\r\n @if(multiple()) {\r\n <mat-option class=\"hideOption\" dummyOption></mat-option>\r\n }\r\n\r\n @if (total() == 0) {\r\n <p class=\"withoutResults\">{{ texts().select.noResults }}</p>\r\n }\r\n\r\n @if((filters()().pageNumber * filters()().pageSize) < total() && !dataResource.isLoading()) {\r\n <button matButton=\"text\" class=\"showMore\" (click)=\"onMoreClick()\">\r\n {{ texts().select.showMore }}\r\n </button>\r\n }\r\n </mat-select>\r\n\r\n <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}mat-progress-bar{position:sticky;top:48px;z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}.showMore{width:calc(100% - 32px);margin:4px 16px 0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
|
|
2366
2459
|
}
|
|
2367
2460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSearchableSelectComponent, decorators: [{
|
|
2368
2461
|
type: Component,
|
|
@@ -2509,7 +2602,7 @@ class SearchableSelectComponent {
|
|
|
2509
2602
|
return results.length;
|
|
2510
2603
|
}
|
|
2511
2604
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2512
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SearchableSelectComponent, isStandalone: true, selector: "ngx-searchable-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearableOptionLabel: { classPropertyName: "clearableOptionLabel", publicName: "clearableOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionChange: "optionChange" }, viewQueries: [{ propertyName: "searcher", first: true, predicate: ["htmlSearcher"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n @if (selectLabel()) {\r\n <mat-label>{{selectLabel()}}</mat-label>\r\n }\r\n\r\n <mat-select\r\n [formControl]=\"innerControl()\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n [multiple]=\"multiple()\"\r\n (openedChange)=\"openedChange($event)\" \r\n [placeholder]=\"selectPlaceholder()\"\r\n panelClass=\"searchableSelectPanelClass\"\r\n (selectionChange)=\"onOptionChange($event)\">\r\n\r\n <div class=\"searcherContainer\">\r\n <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n @if (htmlSearcher.value.length == 0) {\r\n <span>{{ searchInputPlaceholder() || texts().common.search }}</span> \r\n }\r\n\r\n <input \r\n #htmlSearcher \r\n type=\"text\" \r\n matInput \r\n (keydown)=\"$event.stopPropagation()\">\r\n\r\n @if (htmlSearcher.value.length > 0) {\r\n <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n }\r\n </div>\r\n\r\n @if(clearable() && !multiple()) {\r\n <mat-option>{{ texts().select.removeOption(getClearableOptionName()) }}</mat-option>\r\n }\r\n \r\n @for (option of options(); track $index) {\r\n <mat-option \r\n [value]=\"optionValue()(option)\"\r\n [class.hideOption]=\"!showOption(option)\">\r\n {{optionLabel()(option)}}\r\n </mat-option>\r\n }\r\n\r\n @if (numberOfResults() == 0) {\r\n <p class=\"withoutResults\">{{ texts().select.noResults }}</p>\r\n }\r\n </mat-select>\r\n\r\n <mat-error>{{error()}}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$
|
|
2605
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SearchableSelectComponent, isStandalone: true, selector: "ngx-searchable-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearableOptionLabel: { classPropertyName: "clearableOptionLabel", publicName: "clearableOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionChange: "optionChange" }, viewQueries: [{ propertyName: "searcher", first: true, predicate: ["htmlSearcher"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n @if (selectLabel()) {\r\n <mat-label>{{selectLabel()}}</mat-label>\r\n }\r\n\r\n <mat-select\r\n [formControl]=\"innerControl()\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n [multiple]=\"multiple()\"\r\n (openedChange)=\"openedChange($event)\" \r\n [placeholder]=\"selectPlaceholder()\"\r\n panelClass=\"searchableSelectPanelClass\"\r\n (selectionChange)=\"onOptionChange($event)\">\r\n\r\n <div class=\"searcherContainer\">\r\n <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n @if (htmlSearcher.value.length == 0) {\r\n <span>{{ searchInputPlaceholder() || texts().common.search }}</span> \r\n }\r\n\r\n <input \r\n #htmlSearcher \r\n type=\"text\" \r\n matInput \r\n (keydown)=\"$event.stopPropagation()\">\r\n\r\n @if (htmlSearcher.value.length > 0) {\r\n <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n }\r\n </div>\r\n\r\n @if(clearable() && !multiple()) {\r\n <mat-option>{{ texts().select.removeOption(getClearableOptionName()) }}</mat-option>\r\n }\r\n \r\n @for (option of options(); track $index) {\r\n <mat-option \r\n [value]=\"optionValue()(option)\"\r\n [class.hideOption]=\"!showOption(option)\">\r\n {{optionLabel()(option)}}\r\n </mat-option>\r\n }\r\n\r\n @if (numberOfResults() == 0) {\r\n <p class=\"withoutResults\">{{ texts().select.noResults }}</p>\r\n }\r\n </mat-select>\r\n\r\n <mat-error>{{error()}}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }] });
|
|
2513
2606
|
}
|
|
2514
2607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchableSelectComponent, decorators: [{
|
|
2515
2608
|
type: Component,
|
|
@@ -2579,7 +2672,7 @@ class AdvancedFilterRuleComponent {
|
|
|
2579
2672
|
operatorOptionLabel = (filterOperator) => this.filterOperatorLabel()[filterOperator];
|
|
2580
2673
|
operatorOptionValue = (filterOperator) => filterOperator;
|
|
2581
2674
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2582
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterRuleComponent, isStandalone: true, selector: "lib-advanced-filter-rule", inputs: { rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleteFilter: "deleteFilter" }, ngImport: i0, template: "<button \n matIconButton \n [matTooltip]=\"texts().advancedFilters.deleteFilter\" \n (click)=\"deleteFilter.emit(getRuleId())\"\n class=\"deleteButton\"\n type=\"button\">\n <mat-icon>delete</mat-icon>\n</button>\n\n<ngx-searchable-select\n [formControl]=\"getKey()\"\n [options]=\"columns()\"\n [optionLabel]=\"keyOptionLabel\"\n [optionValue]=\"keyOptionValue\"\n (optionChange)=\"onKeyChange($event)\"\n [selectLabel]=\"texts().advancedFilters.field\"\n [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n [error]=\"texts().advancedFilters.required\"\n/>\n\n<ngx-searchable-select\n [formControl]=\"getOperator()\"\n [options]=\"getOperatorsOption(getKey().value)\"\n [optionLabel]=\"operatorOptionLabel\"\n [optionValue]=\"operatorOptionValue\"\n [selectLabel]=\"texts().advancedFilters.condition\"\n [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n [error]=\"texts().advancedFilters.required\"\n/>\n\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\n <mat-form-field>\n <mat-label>{{texts().advancedFilters.value}}</mat-label>\n <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\n <mat-error>{{texts().advancedFilters.required}}</mat-error>\n </mat-form-field>\n}\n\n@if (getFilterType(getKey().value) == 'option' || getFilterType(getKey().value) == 'option-multiple') {\n @if(getColumnSelected(getKey().value)?.endpointForPaginatedFilterOptions) {\n <ngx-paginated-searchable-select \n [formControl]=\"getValue()\"\n [endpoint]=\"getColumnSelected(getKey().value)!.endpointForPaginatedFilterOptions!\"\n [filters]=\"getColumnSelected(getKey().value)!.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\n [selectLabel]=\"texts().advancedFilters.value\"\n [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n [error]=\"texts().advancedFilters.required\"\n />\n } @else {\n <ngx-searchable-select\n [formControl]=\"getValue()\"\n [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\n [selectLabel]=\"texts().advancedFilters.value\"\n [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n [error]=\"texts().advancedFilters.required\"\n />\n }\n}\n\n@if(getFilterType(getKey().value) == 'date' || getFilterType(getKey().value) == 'date-range') {\n <mat-form-field>\n <mat-label>{{texts().advancedFilters.value}}</mat-label>\n <input\n [formControl]=\"getValue()\"\n matInput \n [matDatepicker]=\"picker\">\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{texts().advancedFilters.required}}</mat-error>\n </mat-form-field>\n}\n\n\n", styles: [":host{display:flex;flex-direction:row;gap:10px;align-items:center;margin-top:14px}.deleteButton{margin-bottom:20px}mat-form-field,ngx-searchable-select,ngx-paginated-searchable-select{flex:1}@media (max-width: 900px){:host{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$
|
|
2675
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterRuleComponent, isStandalone: true, selector: "lib-advanced-filter-rule", inputs: { rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleteFilter: "deleteFilter" }, ngImport: i0, template: "<button \n matIconButton \n [matTooltip]=\"texts().advancedFilters.deleteFilter\" \n (click)=\"deleteFilter.emit(getRuleId())\"\n class=\"deleteButton\"\n type=\"button\">\n <mat-icon>delete</mat-icon>\n</button>\n\n<ngx-searchable-select\n [formControl]=\"getKey()\"\n [options]=\"columns()\"\n [optionLabel]=\"keyOptionLabel\"\n [optionValue]=\"keyOptionValue\"\n (optionChange)=\"onKeyChange($event)\"\n [selectLabel]=\"texts().advancedFilters.field\"\n [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n [error]=\"texts().advancedFilters.required\"\n/>\n\n<ngx-searchable-select\n [formControl]=\"getOperator()\"\n [options]=\"getOperatorsOption(getKey().value)\"\n [optionLabel]=\"operatorOptionLabel\"\n [optionValue]=\"operatorOptionValue\"\n [selectLabel]=\"texts().advancedFilters.condition\"\n [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n [error]=\"texts().advancedFilters.required\"\n/>\n\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\n <mat-form-field>\n <mat-label>{{texts().advancedFilters.value}}</mat-label>\n <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\n <mat-error>{{texts().advancedFilters.required}}</mat-error>\n </mat-form-field>\n}\n\n@if (getFilterType(getKey().value) == 'option' || getFilterType(getKey().value) == 'option-multiple') {\n @if(getColumnSelected(getKey().value)?.endpointForPaginatedFilterOptions) {\n <ngx-paginated-searchable-select \n [formControl]=\"getValue()\"\n [endpoint]=\"getColumnSelected(getKey().value)!.endpointForPaginatedFilterOptions!\"\n [filters]=\"getColumnSelected(getKey().value)!.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\n [selectLabel]=\"texts().advancedFilters.value\"\n [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n [error]=\"texts().advancedFilters.required\"\n />\n } @else {\n <ngx-searchable-select\n [formControl]=\"getValue()\"\n [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\n [selectLabel]=\"texts().advancedFilters.value\"\n [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n [error]=\"texts().advancedFilters.required\"\n />\n }\n}\n\n@if(getFilterType(getKey().value) == 'date' || getFilterType(getKey().value) == 'date-range') {\n <mat-form-field>\n <mat-label>{{texts().advancedFilters.value}}</mat-label>\n <input\n [formControl]=\"getValue()\"\n matInput \n [matDatepicker]=\"picker\">\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error>{{texts().advancedFilters.required}}</mat-error>\n </mat-form-field>\n}\n\n\n", styles: [":host{display:flex;flex-direction:row;gap:10px;align-items:center;margin-top:14px}.deleteButton{margin-bottom:20px}mat-form-field,ngx-searchable-select,ngx-paginated-searchable-select{flex:1}@media (max-width: 900px){:host{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
|
|
2583
2676
|
}
|
|
2584
2677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterRuleComponent, decorators: [{
|
|
2585
2678
|
type: Component,
|
|
@@ -2625,7 +2718,7 @@ class AdvancedFilterGroupComponent {
|
|
|
2625
2718
|
return this.group().get('filters').controls;
|
|
2626
2719
|
}
|
|
2627
2720
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2628
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterGroupComponent, isStandalone: true, selector: "lib-advanced-filter-group", inputs: { isRootNode: { classPropertyName: "isRootNode", publicName: "isRootNode", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addGroup: "addGroup", addFilter: "addFilter", deleteGroup: "deleteGroup", deleteFilter: "deleteFilter" }, ngImport: i0, template: "<div class=\"grupo\" [formGroup]=\"group()\">\r\n \r\n <mat-button-toggle-group [formControl]=\"getConnector()\">\r\n @for (option of optionsFilterConnector(); track option.value) {\r\n <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\r\n }\r\n </mat-button-toggle-group>\r\n\r\n @if (isDesktop()) {\r\n <button \r\n matButton=\"outlined\" \r\n (click)=\"addFilter.emit(getGroupId())\"\r\n class=\"addFilterButton\"\r\n type=\"button\">\r\n <mat-icon>add</mat-icon>\r\n {{texts().advancedFilters.addFilter}}\r\n </button>\r\n\r\n <button \r\n matButton=\"outlined\"\r\n (click)=\"addGroup.emit(getGroupId())\"\r\n class=\"addGroupButton\"\r\n type=\"button\">\r\n <mat-icon>data_array</mat-icon>\r\n {{texts().advancedFilters.addGroup}}\r\n </button>\r\n } @else {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.addFilter\" \r\n (click)=\"addFilter.emit(getGroupId())\"\r\n class=\"addFilterButton\"\r\n type=\"button\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.addGroup\" \r\n (click)=\"addGroup.emit(getGroupId())\"\r\n class=\"addGroupButton\"\r\n type=\"button\">\r\n <mat-icon>data_array</mat-icon>\r\n </button>\r\n }\r\n \r\n\r\n @if(!isRootNode()) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.deleteGroup\" \r\n (click)=\"deleteGroup.emit(getGroupId())\"\r\n class=\"deleteGroupButton\"\r\n type=\"button\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (group of getFilters(); track $index) {\r\n @if(isFilterGroupForm(group)) {\r\n <lib-advanced-filter-group \r\n [group]=\"group\"\r\n [config]=\"config()\"\r\n [isRootNode]=\"false\"\r\n (addGroup)=\"addGroup.emit($event)\"\r\n (addFilter)=\"addFilter.emit($event)\"\r\n (deleteGroup)=\"deleteGroup.emit($event)\"\r\n (deleteFilter)=\"deleteFilter.emit($event)\"\r\n />\r\n } @else {\r\n <lib-advanced-filter-rule \r\n [rule]=\"group\"\r\n [config]=\"config()\"\r\n (deleteFilter)=\"deleteFilter.emit($event)\"\r\n />\r\n }\r\n }\r\n\r\n</div>", styles: [":host{display:block}.grupo{border-radius:4px;border:1px solid var(--mat-sys-outline);padding:40px 34px 10px 20px;position:relative;min-height:60px;display:flex;flex-direction:column;margin-top:24px;gap:8px}mat-button-toggle-group{position:absolute;top:-20px;left:50%;transform:translate(-50%);background-color:var(--mat-sys-surface)}.addFilterButton{position:absolute;top:-20px;left:10px;background-color:var(--mat-sys-surface)}.addGroupButton{position:absolute;top:-20px;right:10px;background-color:var(--mat-sys-surface)}.deleteGroupButton{position:absolute;top:50%;right:-20px;transform:translateY(-50%);background-color:var(--mat-sys-surface)}\n"], dependencies: [{ kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$
|
|
2721
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterGroupComponent, isStandalone: true, selector: "lib-advanced-filter-group", inputs: { isRootNode: { classPropertyName: "isRootNode", publicName: "isRootNode", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addGroup: "addGroup", addFilter: "addFilter", deleteGroup: "deleteGroup", deleteFilter: "deleteFilter" }, ngImport: i0, template: "<div class=\"grupo\" [formGroup]=\"group()\">\r\n \r\n <mat-button-toggle-group [formControl]=\"getConnector()\">\r\n @for (option of optionsFilterConnector(); track option.value) {\r\n <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\r\n }\r\n </mat-button-toggle-group>\r\n\r\n @if (isDesktop()) {\r\n <button \r\n matButton=\"outlined\" \r\n (click)=\"addFilter.emit(getGroupId())\"\r\n class=\"addFilterButton\"\r\n type=\"button\">\r\n <mat-icon>add</mat-icon>\r\n {{texts().advancedFilters.addFilter}}\r\n </button>\r\n\r\n <button \r\n matButton=\"outlined\"\r\n (click)=\"addGroup.emit(getGroupId())\"\r\n class=\"addGroupButton\"\r\n type=\"button\">\r\n <mat-icon>data_array</mat-icon>\r\n {{texts().advancedFilters.addGroup}}\r\n </button>\r\n } @else {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.addFilter\" \r\n (click)=\"addFilter.emit(getGroupId())\"\r\n class=\"addFilterButton\"\r\n type=\"button\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.addGroup\" \r\n (click)=\"addGroup.emit(getGroupId())\"\r\n class=\"addGroupButton\"\r\n type=\"button\">\r\n <mat-icon>data_array</mat-icon>\r\n </button>\r\n }\r\n \r\n\r\n @if(!isRootNode()) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.deleteGroup\" \r\n (click)=\"deleteGroup.emit(getGroupId())\"\r\n class=\"deleteGroupButton\"\r\n type=\"button\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (group of getFilters(); track $index) {\r\n @if(isFilterGroupForm(group)) {\r\n <lib-advanced-filter-group \r\n [group]=\"group\"\r\n [config]=\"config()\"\r\n [isRootNode]=\"false\"\r\n (addGroup)=\"addGroup.emit($event)\"\r\n (addFilter)=\"addFilter.emit($event)\"\r\n (deleteGroup)=\"deleteGroup.emit($event)\"\r\n (deleteFilter)=\"deleteFilter.emit($event)\"\r\n />\r\n } @else {\r\n <lib-advanced-filter-rule \r\n [rule]=\"group\"\r\n [config]=\"config()\"\r\n (deleteFilter)=\"deleteFilter.emit($event)\"\r\n />\r\n }\r\n }\r\n\r\n</div>", styles: [":host{display:block}.grupo{border-radius:4px;border:1px solid var(--mat-sys-outline);padding:40px 34px 10px 20px;position:relative;min-height:60px;display:flex;flex-direction:column;margin-top:24px;gap:8px}mat-button-toggle-group{position:absolute;top:-20px;left:50%;transform:translate(-50%);background-color:var(--mat-sys-surface)}.addFilterButton{position:absolute;top:-20px;left:10px;background-color:var(--mat-sys-surface)}.addGroupButton{position:absolute;top:-20px;right:10px;background-color:var(--mat-sys-surface)}.deleteGroupButton{position:absolute;top:50%;right:-20px;transform:translateY(-50%);background-color:var(--mat-sys-surface)}\n"], dependencies: [{ kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: AdvancedFilterRuleComponent, selector: "lib-advanced-filter-rule", inputs: ["rule", "config"], outputs: ["deleteFilter"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
2629
2722
|
}
|
|
2630
2723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterGroupComponent, decorators: [{
|
|
2631
2724
|
type: Component,
|
|
@@ -2699,7 +2792,7 @@ class ConfigureAdvancedFilterComponent {
|
|
|
2699
2792
|
}
|
|
2700
2793
|
}
|
|
2701
2794
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureAdvancedFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2702
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfigureAdvancedFilterComponent, isStandalone: true, selector: "lib-configure-advanced-filter", ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit('save_and_apply')\">\r\n\r\n <h2 mat-dialog-title>{{texts().advancedFilters.dialogTitle}} {{data.config.title() | lowercase}}</h2>\r\n <mat-dialog-content>\r\n\r\n <p class=\"advancedFilterResult\" [innerHTML]=\"query()\" [style.visibility]=\"query() ? 'visible': 'hidden'\"></p>\r\n\r\n <mat-form-field>\r\n <mat-label>{{texts().advancedFilters.templateName}}</mat-label>\r\n <input matInput formControlName=\"name\" [maxlength]=\"16\">\r\n <mat-hint>{{form.get('name')?.value.length ?? 0}}/16</mat-hint>\r\n <mat-error>{{texts().advancedFilters.templateNameRequired}}</mat-error>\r\n </mat-form-field>\r\n\r\n <lib-advanced-filter-group \r\n [group]=\"getRootGroup()\"\r\n [config]=\"data.config\"\r\n [isRootNode]=\"true\"\r\n (addGroup)=\"addGroup($event)\"\r\n (addFilter)=\"addFilter($event)\"\r\n (deleteGroup)=\"deleteGroup($event)\"\r\n (deleteFilter)=\"deleteFilter($event)\"\r\n />\r\n\r\n <div class=\"helperContainer\">\r\n <p class=\"helperTitle\"><strong>{{texts().advancedFilters.helpTitle}}</strong></p>\r\n <p class=\"helper\">\r\n <strong>{{texts().advancedFilters.group}} </strong>{{texts().advancedFilters.groupHelp}}<br>\r\n <strong>{{texts().advancedFilters.filter}} </strong>{{texts().advancedFilters.ruleHelp}}\r\n </p>\r\n </div>\r\n \r\n </mat-dialog-content>\r\n <mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"undefined\">{{texts().common.close}}</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{texts().common.save}}</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{texts().common.saveAndApply}}</button>\r\n </mat-dialog-actions>\r\n\r\n\r\n</form>", styles: [":host{display:block}mat-dialog-content{display:flex;flex-direction:column;gap:12px}.helperContainer{margin-top:30px}.helperTitle,.helper{font:var(--mat-sys-body-small);font-weight:300;margin:0}.helper{margin-top:4px;padding-left:20px}.advancedFilterResult{align-self:center;text-align:center;font:var(--mat-sys-body-large);padding:8px;border-radius:4px;background-color:var(--warning);color:var(--on-warning)}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$
|
|
2795
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfigureAdvancedFilterComponent, isStandalone: true, selector: "lib-configure-advanced-filter", ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit('save_and_apply')\">\r\n\r\n <h2 mat-dialog-title>{{texts().advancedFilters.dialogTitle}} {{data.config.title() | lowercase}}</h2>\r\n <mat-dialog-content>\r\n\r\n <p class=\"advancedFilterResult\" [innerHTML]=\"query()\" [style.visibility]=\"query() ? 'visible': 'hidden'\"></p>\r\n\r\n <mat-form-field>\r\n <mat-label>{{texts().advancedFilters.templateName}}</mat-label>\r\n <input matInput formControlName=\"name\" [maxlength]=\"16\">\r\n <mat-hint>{{form.get('name')?.value.length ?? 0}}/16</mat-hint>\r\n <mat-error>{{texts().advancedFilters.templateNameRequired}}</mat-error>\r\n </mat-form-field>\r\n\r\n <lib-advanced-filter-group \r\n [group]=\"getRootGroup()\"\r\n [config]=\"data.config\"\r\n [isRootNode]=\"true\"\r\n (addGroup)=\"addGroup($event)\"\r\n (addFilter)=\"addFilter($event)\"\r\n (deleteGroup)=\"deleteGroup($event)\"\r\n (deleteFilter)=\"deleteFilter($event)\"\r\n />\r\n\r\n <div class=\"helperContainer\">\r\n <p class=\"helperTitle\"><strong>{{texts().advancedFilters.helpTitle}}</strong></p>\r\n <p class=\"helper\">\r\n <strong>{{texts().advancedFilters.group}} </strong>{{texts().advancedFilters.groupHelp}}<br>\r\n <strong>{{texts().advancedFilters.filter}} </strong>{{texts().advancedFilters.ruleHelp}}\r\n </p>\r\n </div>\r\n \r\n </mat-dialog-content>\r\n <mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"undefined\">{{texts().common.close}}</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{texts().common.save}}</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{texts().common.saveAndApply}}</button>\r\n </mat-dialog-actions>\r\n\r\n\r\n</form>", styles: [":host{display:block}mat-dialog-content{display:flex;flex-direction:column;gap:12px}.helperContainer{margin-top:30px}.helperTitle,.helper{font:var(--mat-sys-body-small);font-weight:300;margin:0}.helper{margin-top:4px;padding-left:20px}.advancedFilterResult{align-self:center;text-align:center;font:var(--mat-sys-body-large);padding:8px;border-radius:4px;background-color:var(--warning);color:var(--on-warning)}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] });
|
|
2703
2796
|
}
|
|
2704
2797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureAdvancedFilterComponent, decorators: [{
|
|
2705
2798
|
type: Component,
|
|
@@ -2718,12 +2811,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2718
2811
|
], template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit('save_and_apply')\">\r\n\r\n <h2 mat-dialog-title>{{texts().advancedFilters.dialogTitle}} {{data.config.title() | lowercase}}</h2>\r\n <mat-dialog-content>\r\n\r\n <p class=\"advancedFilterResult\" [innerHTML]=\"query()\" [style.visibility]=\"query() ? 'visible': 'hidden'\"></p>\r\n\r\n <mat-form-field>\r\n <mat-label>{{texts().advancedFilters.templateName}}</mat-label>\r\n <input matInput formControlName=\"name\" [maxlength]=\"16\">\r\n <mat-hint>{{form.get('name')?.value.length ?? 0}}/16</mat-hint>\r\n <mat-error>{{texts().advancedFilters.templateNameRequired}}</mat-error>\r\n </mat-form-field>\r\n\r\n <lib-advanced-filter-group \r\n [group]=\"getRootGroup()\"\r\n [config]=\"data.config\"\r\n [isRootNode]=\"true\"\r\n (addGroup)=\"addGroup($event)\"\r\n (addFilter)=\"addFilter($event)\"\r\n (deleteGroup)=\"deleteGroup($event)\"\r\n (deleteFilter)=\"deleteFilter($event)\"\r\n />\r\n\r\n <div class=\"helperContainer\">\r\n <p class=\"helperTitle\"><strong>{{texts().advancedFilters.helpTitle}}</strong></p>\r\n <p class=\"helper\">\r\n <strong>{{texts().advancedFilters.group}} </strong>{{texts().advancedFilters.groupHelp}}<br>\r\n <strong>{{texts().advancedFilters.filter}} </strong>{{texts().advancedFilters.ruleHelp}}\r\n </p>\r\n </div>\r\n \r\n </mat-dialog-content>\r\n <mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"undefined\">{{texts().common.close}}</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{texts().common.save}}</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{texts().common.saveAndApply}}</button>\r\n </mat-dialog-actions>\r\n\r\n\r\n</form>", styles: [":host{display:block}mat-dialog-content{display:flex;flex-direction:column;gap:12px}.helperContainer{margin-top:30px}.helperTitle,.helper{font:var(--mat-sys-body-small);font-weight:300;margin:0}.helper{margin-top:4px;padding-left:20px}.advancedFilterResult{align-self:center;text-align:center;font:var(--mat-sys-body-large);padding:8px;border-radius:4px;background-color:var(--warning);color:var(--on-warning)}\n"] }]
|
|
2719
2812
|
}] });
|
|
2720
2813
|
|
|
2814
|
+
// Lógica común de ngx-basic-table y ngx-paginated-table. Interno: no está en el barril.
|
|
2815
|
+
function applyPipes(value, pipes) {
|
|
2816
|
+
if (!pipes)
|
|
2817
|
+
return value;
|
|
2818
|
+
const list = Array.isArray(pipes) ? pipes : [pipes];
|
|
2819
|
+
return list.reduce((v, p) => p.pipe.transform(v, ...(p.args ?? [])), value);
|
|
2820
|
+
}
|
|
2821
|
+
/**
|
|
2822
|
+
* Texto de una celda: valueGetter → pipes → valor. Es lo que se pinta (si la columna no tiene
|
|
2823
|
+
* componente ni plantilla), lo que se exporta y en lo que busca el buscador general.
|
|
2824
|
+
* Un objeto sin valueGetter no tiene texto útil: cadena vacía en vez de «[object Object]».
|
|
2825
|
+
*/
|
|
2826
|
+
function cellText(row, column) {
|
|
2827
|
+
if (column.valueGetter)
|
|
2828
|
+
return column.valueGetter(row) ?? '';
|
|
2829
|
+
const value = applyPipes(row[column.key], column.pipes);
|
|
2830
|
+
if (value == null)
|
|
2831
|
+
return '';
|
|
2832
|
+
if (typeof value === 'object')
|
|
2833
|
+
return '';
|
|
2834
|
+
return String(value);
|
|
2835
|
+
}
|
|
2836
|
+
/** Clave estable de una fila según primaryKey (una o varias propiedades). */
|
|
2837
|
+
function rowKeyOf(row, primaryKey) {
|
|
2838
|
+
if (Array.isArray(primaryKey))
|
|
2839
|
+
return JSON.stringify(primaryKey.map(key => row[key]));
|
|
2840
|
+
return row[primaryKey];
|
|
2841
|
+
}
|
|
2842
|
+
/** Columnas visibles en el orden que eligió el usuario (diálogo de columnas). */
|
|
2843
|
+
function visibleColumns(columns, columnConfig) {
|
|
2844
|
+
return columnConfig
|
|
2845
|
+
.filter(config => config.show)
|
|
2846
|
+
.map(config => columns.find(column => column.key === config.key))
|
|
2847
|
+
.filter((column) => !!column);
|
|
2848
|
+
}
|
|
2849
|
+
/** Suma numérica de una columna (los valores que no son número cuentan 0). */
|
|
2850
|
+
function sumColumn(rows, key) {
|
|
2851
|
+
return rows.reduce((total, row) => {
|
|
2852
|
+
const value = Number(row[key]);
|
|
2853
|
+
return Number.isFinite(value) ? total + value : total;
|
|
2854
|
+
}, 0);
|
|
2855
|
+
}
|
|
2856
|
+
function exportMatrix({ columns, rows, mapper }) {
|
|
2857
|
+
const head = columns.map(column => column.label);
|
|
2858
|
+
const body = rows.map(row => {
|
|
2859
|
+
if (mapper) {
|
|
2860
|
+
const mapped = mapper(row);
|
|
2861
|
+
return columns.map(column => {
|
|
2862
|
+
const value = mapped[column.key];
|
|
2863
|
+
return value == null ? '' : String(value);
|
|
2864
|
+
});
|
|
2865
|
+
}
|
|
2866
|
+
return columns.map(column => cellText(row, column));
|
|
2867
|
+
});
|
|
2868
|
+
return [head, ...body];
|
|
2869
|
+
}
|
|
2870
|
+
function exportToXlsx(options) {
|
|
2871
|
+
const sheet = utils.aoa_to_sheet(exportMatrix(options));
|
|
2872
|
+
const book = utils.book_new();
|
|
2873
|
+
// El nombre de la hoja no puede pasar de 31 caracteres
|
|
2874
|
+
utils.book_append_sheet(book, sheet, (options.title || 'Datos').substring(0, 31));
|
|
2875
|
+
writeFileXLSX(book, `${options.fileName}.xlsx`);
|
|
2876
|
+
}
|
|
2877
|
+
function exportToPdf(options) {
|
|
2878
|
+
const [head, ...body] = exportMatrix(options);
|
|
2879
|
+
const doc = options.pdf ?? new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'A4' });
|
|
2880
|
+
const header = cssColorToRgb(options.host, options.headerColor ?? 'var(--mat-sys-primary)') ?? [91, 95, 98];
|
|
2881
|
+
const onHeader = cssColorToRgb(options.host, 'var(--mat-sys-on-primary)') ?? [255, 255, 255];
|
|
2882
|
+
doc.setFontSize(14);
|
|
2883
|
+
doc.text(options.title, 40, 40);
|
|
2884
|
+
autoTable(doc, {
|
|
2885
|
+
startY: 60,
|
|
2886
|
+
head: [head],
|
|
2887
|
+
body,
|
|
2888
|
+
styles: { fontSize: 9, cellPadding: 4 },
|
|
2889
|
+
headStyles: { fillColor: header, textColor: onHeader },
|
|
2890
|
+
alternateRowStyles: { fillColor: [245, 245, 245] },
|
|
2891
|
+
tableLineColor: [200, 200, 200],
|
|
2892
|
+
tableLineWidth: 0.1,
|
|
2893
|
+
});
|
|
2894
|
+
doc.save(`${options.fileName}.pdf`);
|
|
2895
|
+
}
|
|
2896
|
+
/**
|
|
2897
|
+
* Resuelve un color CSS (también variables del tema) a RGB para jsPDF. Primary y on-primary son
|
|
2898
|
+
* pareja en los dos modos, así que la cabecera del PDF siempre se lee.
|
|
2899
|
+
*/
|
|
2900
|
+
function cssColorToRgb(host, color) {
|
|
2901
|
+
if (typeof getComputedStyle === 'undefined')
|
|
2902
|
+
return null;
|
|
2903
|
+
const probe = document.createElement('span');
|
|
2904
|
+
probe.style.color = color;
|
|
2905
|
+
probe.style.display = 'none';
|
|
2906
|
+
host.appendChild(probe);
|
|
2907
|
+
const computed = getComputedStyle(probe).color;
|
|
2908
|
+
probe.remove();
|
|
2909
|
+
const numbers = (computed.match(/-?\d*\.?\d+/g) ?? []).map(Number);
|
|
2910
|
+
if (numbers.length < 3)
|
|
2911
|
+
return null;
|
|
2912
|
+
// rgb(r, g, b) viene en 0-255; color(srgb r g b) (p. ej. con color-mix), en 0-1
|
|
2913
|
+
const scale = computed.startsWith('color(') ? 255 : 1;
|
|
2914
|
+
const [r, g, b] = numbers.slice(0, 3).map(n => Math.round(n * scale));
|
|
2915
|
+
return [r, g, b];
|
|
2916
|
+
}
|
|
2917
|
+
|
|
2721
2918
|
class NgxPaginatedTable {
|
|
2722
2919
|
columnConfigService = inject(ColumnConfigService);
|
|
2723
2920
|
advancedFilterService = inject(AdvancedFilterService);
|
|
2724
2921
|
dialog = inject(MatDialog);
|
|
2725
2922
|
dialogService = inject(NgxDialogService);
|
|
2726
2923
|
datosPantallaService = inject(DatosPantallaService);
|
|
2924
|
+
_host = inject(ElementRef);
|
|
2925
|
+
_destroyRef = inject(DestroyRef);
|
|
2727
2926
|
// Inyectar el servicio de internacionalización.
|
|
2728
2927
|
// inject() resuelve tambien los providers a nivel de componente/ruta, por lo que
|
|
2729
2928
|
// el override sigue siendo posible sin necesidad de instanciarlo a mano.
|
|
@@ -2829,6 +3028,32 @@ class NgxPaginatedTable {
|
|
|
2829
3028
|
return column?.showTotalGeneral && !!column.getTotalGeneral;
|
|
2830
3029
|
});
|
|
2831
3030
|
}, ...(ngDevMode ? [{ debugName: "showTotalGeneralFooter" }] : []));
|
|
3031
|
+
/** Texto del buscador (para la X de borrar; antes se leía el DOM desde la plantilla). */
|
|
3032
|
+
queryText = linkedSignal(() => this.filters()().query ?? '', ...(ngDevMode ? [{ debugName: "queryText" }] : []));
|
|
3033
|
+
/** Texto de cada celda de la página (sin componente ni plantilla), calculado una vez. */
|
|
3034
|
+
cellTexts = computed(() => {
|
|
3035
|
+
const columns = this.config()().columns.filter(column => !column.component && !column.templateRef);
|
|
3036
|
+
return new Map(this.data().map(row => [row, Object.fromEntries(columns.map(column => [column.key, this.displayText(row, column)]))]));
|
|
3037
|
+
}, ...(ngDevMode ? [{ debugName: "cellTexts" }] : []));
|
|
3038
|
+
/** Total por página (de lo cargado) y general (lo da el consumidor con getTotalGeneral), ya formateados. */
|
|
3039
|
+
pageTotals = computed(() => {
|
|
3040
|
+
const rows = this.data();
|
|
3041
|
+
return this.totalsText(column => column.showTotalPerPage ? sumColumn(rows, column.key) : undefined);
|
|
3042
|
+
}, ...(ngDevMode ? [{ debugName: "pageTotals" }] : []));
|
|
3043
|
+
generalTotals = computed(() => this.totalsText(column => column.showTotalGeneral ? column.getTotalGeneral?.() : undefined), ...(ngDevMode ? [{ debugName: "generalTotals" }] : []));
|
|
3044
|
+
/** Descripción del filtro avanzado aplicado (HTML). */
|
|
3045
|
+
advancedFilterLabel = computed(() => {
|
|
3046
|
+
const advancedFilterId = this.filters()().advancedFilterId;
|
|
3047
|
+
if (!advancedFilterId)
|
|
3048
|
+
return '';
|
|
3049
|
+
const tableId = this.config()().tableId;
|
|
3050
|
+
// Depende de la lista de filtros: si se edita el aplicado, la etiqueta se actualiza
|
|
3051
|
+
this.advancedFilters();
|
|
3052
|
+
const advancedFilter = this.advancedFilterService.getAdvancedFilterById(tableId, advancedFilterId, false);
|
|
3053
|
+
if (!advancedFilter)
|
|
3054
|
+
return '';
|
|
3055
|
+
return AdvancedFilterUtils.groupsToReadableHtml(advancedFilter.groups, this.config()().columns, this.texts());
|
|
3056
|
+
}, ...(ngDevMode ? [{ debugName: "advancedFilterLabel" }] : []));
|
|
2832
3057
|
queryTimeout = undefined;
|
|
2833
3058
|
timeoutsByKey = {};
|
|
2834
3059
|
advancedFilters = computed(() => {
|
|
@@ -2840,23 +3065,27 @@ class NgxPaginatedTable {
|
|
|
2840
3065
|
expandableColumnDef = 'expandedDetail';
|
|
2841
3066
|
expandedItem = signal(null, ...(ngDevMode ? [{ debugName: "expandedItem" }] : []));
|
|
2842
3067
|
selection = signal([], ...(ngDevMode ? [{ debugName: "selection" }] : []));
|
|
3068
|
+
/** Claves de las filas seleccionadas: comprobar una fila es O(1). */
|
|
3069
|
+
_selectedKeys = computed(() => {
|
|
3070
|
+
const primaryKey = this.config()().primaryKey;
|
|
3071
|
+
return new Set(this.selection().map(row => rowKeyOf(row, primaryKey)));
|
|
3072
|
+
}, ...(ngDevMode ? [{ debugName: "_selectedKeys" }] : []));
|
|
3073
|
+
allPageSelected = computed(() => {
|
|
3074
|
+
const rows = this.getSelectableRows();
|
|
3075
|
+
return rows.length > 0 && rows.every(row => this.isRowSelected(row));
|
|
3076
|
+
}, ...(ngDevMode ? [{ debugName: "allPageSelected" }] : []));
|
|
2843
3077
|
isFullScreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullScreen" }] : []));
|
|
2844
3078
|
overlay = inject(Overlay);
|
|
2845
|
-
overlayContainer = inject(OverlayContainer);
|
|
2846
3079
|
viewContainerRef = inject(ViewContainerRef);
|
|
2847
3080
|
tableContentTemplate = viewChild('tableContent', ...(ngDevMode ? [{ debugName: "tableContentTemplate" }] : []));
|
|
2848
3081
|
overlayRef;
|
|
2849
|
-
portal;
|
|
2850
3082
|
defaultFiltersForPaginatedFilterOptions = signal({
|
|
2851
3083
|
pageNumber: 1,
|
|
2852
3084
|
pageSize: 20,
|
|
2853
3085
|
query: undefined
|
|
2854
3086
|
}, ...(ngDevMode ? [{ debugName: "defaultFiltersForPaginatedFilterOptions" }] : []));
|
|
2855
|
-
onEscape() {
|
|
2856
|
-
if (this.overlayRef && this.isMyOverlayOnTop())
|
|
2857
|
-
this.exitFullscreen();
|
|
2858
|
-
}
|
|
2859
3087
|
ngOnDestroy() {
|
|
3088
|
+
this.exitFullscreen();
|
|
2860
3089
|
//Limpiamos timeout de filtro query
|
|
2861
3090
|
if (this.queryTimeout !== undefined)
|
|
2862
3091
|
clearTimeout(this.queryTimeout);
|
|
@@ -2881,6 +3110,7 @@ class NgxPaginatedTable {
|
|
|
2881
3110
|
}
|
|
2882
3111
|
onQueryChange(inputElement) {
|
|
2883
3112
|
const query = inputElement.value;
|
|
3113
|
+
this.queryText.set(query);
|
|
2884
3114
|
if (this.queryTimeout !== undefined)
|
|
2885
3115
|
clearTimeout(this.queryTimeout);
|
|
2886
3116
|
this.queryTimeout = setTimeout(() => {
|
|
@@ -2892,6 +3122,7 @@ class NgxPaginatedTable {
|
|
|
2892
3122
|
onQueryReset(inputElement) {
|
|
2893
3123
|
inputElement.value = '';
|
|
2894
3124
|
this.onQueryChange(inputElement);
|
|
3125
|
+
inputElement.focus();
|
|
2895
3126
|
}
|
|
2896
3127
|
onSortChange(sort) {
|
|
2897
3128
|
this.filters().update(value => {
|
|
@@ -2914,10 +3145,11 @@ class NgxPaginatedTable {
|
|
|
2914
3145
|
this.updateClick.emit(row);
|
|
2915
3146
|
}
|
|
2916
3147
|
isRowEnabled(row) {
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
&&
|
|
2920
|
-
&& !
|
|
3148
|
+
const config = this.config()();
|
|
3149
|
+
return config.update
|
|
3150
|
+
&& config.clickOnRowForUpdate
|
|
3151
|
+
&& (!config.update.show || config.update.show(row))
|
|
3152
|
+
&& !config.update.disabled?.(row);
|
|
2921
3153
|
}
|
|
2922
3154
|
onDeleteClick(row, event) {
|
|
2923
3155
|
event.stopPropagation();
|
|
@@ -3011,12 +3243,6 @@ class NgxPaginatedTable {
|
|
|
3011
3243
|
};
|
|
3012
3244
|
this.dialog.open(ConfigureTableColumnsComponent, { data: data });
|
|
3013
3245
|
}
|
|
3014
|
-
applyColumnPipes(value, pipes) {
|
|
3015
|
-
if (!pipes)
|
|
3016
|
-
return value;
|
|
3017
|
-
const pipesArray = Array.isArray(pipes) ? pipes : [pipes];
|
|
3018
|
-
return pipesArray.reduce((v, p) => p.pipe.transform(v, ...(p.args || [])), value);
|
|
3019
|
-
}
|
|
3020
3246
|
onNewAdvancedFiltersClick() {
|
|
3021
3247
|
const data = {
|
|
3022
3248
|
config: this.config()(),
|
|
@@ -3092,70 +3318,60 @@ class NgxPaginatedTable {
|
|
|
3092
3318
|
event.stopPropagation();
|
|
3093
3319
|
this.onApplyTemplateClick();
|
|
3094
3320
|
}
|
|
3095
|
-
|
|
3096
|
-
const advancedFilterId = this.filters()().advancedFilterId;
|
|
3097
|
-
if (!advancedFilterId)
|
|
3098
|
-
return '';
|
|
3099
|
-
const tableId = this.config()().tableId;
|
|
3100
|
-
const advancedFilter = this.advancedFilterService.getAdvancedFilterById(tableId, advancedFilterId, false);
|
|
3101
|
-
if (!advancedFilter)
|
|
3102
|
-
return '';
|
|
3103
|
-
return AdvancedFilterUtils.groupsToReadableHtml(advancedFilter.groups, this.config()().columns, this.texts());
|
|
3104
|
-
}
|
|
3321
|
+
/** Por clave y no por referencia: el detalle sigue abierto si la página se recarga. */
|
|
3105
3322
|
rowIsExpanded(row) {
|
|
3106
|
-
|
|
3323
|
+
const expanded = this.expandedItem();
|
|
3324
|
+
const primaryKey = this.config()().primaryKey;
|
|
3325
|
+
return expanded != null && rowKeyOf(expanded, primaryKey) === rowKeyOf(row, primaryKey);
|
|
3107
3326
|
}
|
|
3108
3327
|
expandableToggle(row) {
|
|
3109
|
-
this.
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3328
|
+
const newValue = this.rowIsExpanded(row) ? null : row;
|
|
3329
|
+
this.expandedItem.set(newValue);
|
|
3330
|
+
this.expandedItemChange.emit(newValue);
|
|
3331
|
+
}
|
|
3332
|
+
/** Lo que se pinta en una celda sin componente ni plantilla: valueGetter, o el valor con sus pipes, o «-». */
|
|
3333
|
+
displayText(row, column) {
|
|
3334
|
+
if (column.valueGetter)
|
|
3335
|
+
return column.valueGetter(row);
|
|
3336
|
+
const value = applyPipes(row[column.key], column.pipes);
|
|
3337
|
+
return value == null ? '-' : String(value);
|
|
3338
|
+
}
|
|
3339
|
+
totalsText(totalOf) {
|
|
3340
|
+
const totals = {};
|
|
3341
|
+
for (const column of this.config()().columns) {
|
|
3342
|
+
const total = totalOf(column);
|
|
3343
|
+
if (total === undefined)
|
|
3344
|
+
continue;
|
|
3345
|
+
const text = column.pipes
|
|
3346
|
+
? applyPipes(total, column.pipes)
|
|
3347
|
+
: column.totalFooterFormatter ? column.totalFooterFormatter(total) : total;
|
|
3348
|
+
totals[this.getKeyAsString(column.key)] = String(text ?? '');
|
|
3349
|
+
}
|
|
3350
|
+
return totals;
|
|
3125
3351
|
}
|
|
3126
3352
|
isRowSelected(row) {
|
|
3127
|
-
return this.
|
|
3353
|
+
return this._selectedKeys().has(rowKeyOf(row, this.config()().primaryKey));
|
|
3128
3354
|
}
|
|
3129
3355
|
toggleRowSelection(row) {
|
|
3130
|
-
|
|
3131
|
-
|
|
3132
|
-
|
|
3133
|
-
|
|
3134
|
-
|
|
3135
|
-
|
|
3136
|
-
this.selection.update(recordsSelected => [...recordsSelected, row]);
|
|
3137
|
-
}
|
|
3138
|
-
}
|
|
3139
|
-
isAllPageRowSelected() {
|
|
3140
|
-
const records = this.getSelectableRows();
|
|
3141
|
-
return records.length > 0 && records.every(record => this.isRowSelected(record));
|
|
3356
|
+
const primaryKey = this.config()().primaryKey;
|
|
3357
|
+
const key = rowKeyOf(row, primaryKey);
|
|
3358
|
+
if (this.isRowSelected(row))
|
|
3359
|
+
this.selection.update(selected => selected.filter(record => rowKeyOf(record, primaryKey) !== key));
|
|
3360
|
+
else
|
|
3361
|
+
this.selection.update(selected => [...selected, row]);
|
|
3142
3362
|
}
|
|
3143
3363
|
toggleAllPageRowSelection() {
|
|
3144
3364
|
const records = this.getSelectableRows();
|
|
3145
|
-
|
|
3365
|
+
const primaryKey = this.config()().primaryKey;
|
|
3366
|
+
const pageKeys = new Set(records.map(row => rowKeyOf(row, primaryKey)));
|
|
3367
|
+
if (this.allPageSelected()) {
|
|
3146
3368
|
//Deseleccionar todas las filas seleccionables de la página actual
|
|
3147
|
-
this.selection.update(
|
|
3148
|
-
return recordsSelected.filter(record => !records.some(row2 => this.areEqualByKeys(record, row2)));
|
|
3149
|
-
});
|
|
3369
|
+
this.selection.update(selected => selected.filter(row => !pageKeys.has(rowKeyOf(row, primaryKey))));
|
|
3150
3370
|
}
|
|
3151
3371
|
else {
|
|
3152
3372
|
//Seleccionar todas las filas seleccionables visibles que aún no estén seleccionadas
|
|
3153
3373
|
const notSelected = records.filter(record => !this.isRowSelected(record));
|
|
3154
|
-
this.selection.update(
|
|
3155
|
-
// Evitar duplicados por si ya hay seleccionadas
|
|
3156
|
-
const nuevas = notSelected.filter(row => !recordsSelected.some(sel => this.areEqualByKeys(sel, row)));
|
|
3157
|
-
return [...recordsSelected, ...nuevas];
|
|
3158
|
-
});
|
|
3374
|
+
this.selection.update(selected => [...selected, ...notSelected]);
|
|
3159
3375
|
}
|
|
3160
3376
|
}
|
|
3161
3377
|
getSelectableRows() {
|
|
@@ -3174,61 +3390,25 @@ class NgxPaginatedTable {
|
|
|
3174
3390
|
rows: this.selection()
|
|
3175
3391
|
});
|
|
3176
3392
|
}
|
|
3177
|
-
|
|
3178
|
-
const config = this.config()();
|
|
3179
|
-
return config.columns.map(c => c.label);
|
|
3180
|
-
}
|
|
3181
|
-
getDocumentRows() {
|
|
3182
|
-
const config = this.config()();
|
|
3183
|
-
const columns = config.columns;
|
|
3184
|
-
const data = this.data();
|
|
3185
|
-
return data.map(row => {
|
|
3186
|
-
if (config.mapperForExportData) {
|
|
3187
|
-
const mapped = config.mapperForExportData(row);
|
|
3188
|
-
return columns.map(c => mapped[c.key]);
|
|
3189
|
-
}
|
|
3190
|
-
return columns.map(c => row[c.key] ?? '');
|
|
3191
|
-
});
|
|
3192
|
-
}
|
|
3393
|
+
/** Exporta la página cargada, con las columnas visibles y en el orden elegido. */
|
|
3193
3394
|
exportToCsvCurrentPage() {
|
|
3194
|
-
|
|
3195
|
-
const title = config.title();
|
|
3196
|
-
const fileName = config.exportFileName?.() ?? title;
|
|
3197
|
-
const headers = this.getDocumentHeaders();
|
|
3198
|
-
const rows = this.getDocumentRows();
|
|
3199
|
-
const aoaData = [headers, ...rows];
|
|
3200
|
-
//const workSheet = utils.json_to_sheet(data);
|
|
3201
|
-
const workSheet = utils.aoa_to_sheet(aoaData);
|
|
3202
|
-
const workBook = utils.book_new();
|
|
3203
|
-
//El nombre de la hoja no puede exceder de 31 caracteres
|
|
3204
|
-
const name = title.substring(0, 31);
|
|
3205
|
-
utils.book_append_sheet(workBook, workSheet, name);
|
|
3206
|
-
writeFileXLSX(workBook, `${fileName}.xlsx`);
|
|
3395
|
+
exportToXlsx(this.exportOptions());
|
|
3207
3396
|
}
|
|
3208
3397
|
exportToPdfCurrentPage() {
|
|
3398
|
+
exportToPdf(this.exportOptions());
|
|
3399
|
+
}
|
|
3400
|
+
exportOptions() {
|
|
3209
3401
|
const config = this.config()();
|
|
3210
3402
|
const title = config.title();
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
doc.text(title, 40, 40);
|
|
3221
|
-
autoTable(doc, {
|
|
3222
|
-
startY: 60,
|
|
3223
|
-
head: [headers],
|
|
3224
|
-
body: rows,
|
|
3225
|
-
styles: { fontSize: 9, cellPadding: 4 },
|
|
3226
|
-
headStyles: { fillColor: [192, 0, 28], textColor: 255 },
|
|
3227
|
-
alternateRowStyles: { fillColor: [245, 245, 245] },
|
|
3228
|
-
tableLineColor: [200, 200, 200],
|
|
3229
|
-
tableLineWidth: 0.1,
|
|
3230
|
-
});
|
|
3231
|
-
doc.save(`${fileName}.pdf`);
|
|
3403
|
+
return {
|
|
3404
|
+
title,
|
|
3405
|
+
fileName: config.exportFileName?.() ?? title,
|
|
3406
|
+
columns: visibleColumns(config.columns, this.columnConfig()),
|
|
3407
|
+
rows: this.data(),
|
|
3408
|
+
mapper: config.mapperForExportData,
|
|
3409
|
+
pdf: config.pdfConfig,
|
|
3410
|
+
host: this._host.nativeElement,
|
|
3411
|
+
};
|
|
3232
3412
|
}
|
|
3233
3413
|
onToggleFullScreen() {
|
|
3234
3414
|
if (this.isFullScreen())
|
|
@@ -3244,32 +3424,22 @@ class NgxPaginatedTable {
|
|
|
3244
3424
|
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
3245
3425
|
positionStrategy: this.overlay.position().global().top('0').left('0').right('0').bottom('0'),
|
|
3246
3426
|
});
|
|
3247
|
-
|
|
3248
|
-
this.overlayRef.
|
|
3427
|
+
// Escape solo llega a este overlay cuando es el de más arriba (no si hay un diálogo encima)
|
|
3428
|
+
this.overlayRef.keydownEvents()
|
|
3429
|
+
.pipe(filter(event => event.key === 'Escape'), takeUntilDestroyed(this._destroyRef))
|
|
3430
|
+
.subscribe(() => this.exitFullscreen());
|
|
3431
|
+
this.overlayRef.attach(new TemplatePortal(this.tableContentTemplate(), this.viewContainerRef));
|
|
3249
3432
|
this.isFullScreen.set(true);
|
|
3250
3433
|
}
|
|
3251
3434
|
exitFullscreen() {
|
|
3252
3435
|
if (!this.overlayRef)
|
|
3253
3436
|
return;
|
|
3254
|
-
this.overlayRef.detach();
|
|
3255
3437
|
this.overlayRef.dispose();
|
|
3256
3438
|
this.overlayRef = undefined;
|
|
3257
|
-
this.portal = undefined;
|
|
3258
3439
|
this.isFullScreen.set(false);
|
|
3259
3440
|
}
|
|
3260
|
-
isMyOverlayOnTop() {
|
|
3261
|
-
if (!this.overlayRef)
|
|
3262
|
-
return false;
|
|
3263
|
-
//Contenedor principal de overlays en el DOM
|
|
3264
|
-
const containerElement = this.overlayContainer.getContainerElement();
|
|
3265
|
-
// Los overlays se añaden como hijos dentro de este contenedor
|
|
3266
|
-
const overlays = Array.from(containerElement.children);
|
|
3267
|
-
// El último hijo es el overlay más "arriba"
|
|
3268
|
-
const topOverlay = overlays[overlays.length - 1];
|
|
3269
|
-
return topOverlay === this.overlayRef.hostElement;
|
|
3270
|
-
}
|
|
3271
3441
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3272
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedTable, isStandalone: true, selector: "ngx-paginated-table", inputs: { endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n <div class=\"headerContainer\">\r\n <div class=\"titleAndButtonContainer\">\r\n <p class=\"title\">{{ config()().title() }}</p>\r\n <div class=\"buttonContainer\">\r\n @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"config()().create?.tooltip?.() ?? texts().table.create\" \r\n [disabled]=\"config()().create?.disabled?.()\" \r\n class=\"newButtonIcon\"\r\n (click)=\"onNewClick()\">\r\n <mat-icon>add_circle</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().hideColumnConfig?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.editColumns\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n <mat-icon>table_edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().showAdvancedFilters) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.label\"\r\n [matMenuTriggerFor]=\"advancedFiltersMenu\" \r\n #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n <mat-icon>filter_alt</mat-icon>\r\n </button>\r\n\r\n <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"onNewAdvancedFiltersClick()\">\r\n <mat-icon>filter_alt</mat-icon>\r\n <span>{{ texts().advancedFilters.new }}</span>\r\n </button>\r\n\r\n @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n @if (first) {\r\n <mat-divider />\r\n }\r\n\r\n <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n <div class=\"templateContainer\"> \r\n <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n <div class=\"buttonTemplateContainer\">\r\n <button\r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.editTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n\r\n <button\r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.deleteTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </mat-menu>\r\n }\r\n\r\n @if(selection().length > 0) {\r\n @if(getRowSelectionAction().length > 0) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().table.selectionActions\"\r\n [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n <mat-icon>event_list</mat-icon>\r\n </button>\r\n\r\n <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n <span>{{ texts().table.deselectAll }}</span>\r\n </button>\r\n\r\n @for (action of getRowSelectionAction(); track $index) {\r\n <button mat-menu-item (click)=\"onRowSelectionActionClick(action.id)\">\r\n <mat-icon>{{action.icon}}</mat-icon>\r\n <span>{{action.label(selection(), selection().length)}}</span>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().table.deselectAll\"\r\n (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n }\r\n }\r\n @if(config()().hideExportData?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.export\" [matMenuTriggerFor]=\"exportMenu\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"exportToCsvCurrentPage()\">\r\n <mat-icon>csv</mat-icon>\r\n <span>{{ texts().table.exportExcel }}</span>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"exportToPdfCurrentPage()\">\r\n <mat-icon>picture_as_pdf</mat-icon>\r\n <span>{{ texts().table.exportPdf }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button matIconButton [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\" (click)=\"onToggleFullScreen()\">\r\n <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n </button>\r\n }\r\n\r\n <ng-content select=\"[icon-buttons]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filterContainer\">\r\n <div class=\"moreFiltersContainer\">\r\n <ng-content select=\"[more-filters]\"></ng-content>\r\n </div>\r\n\r\n @if(config()().showQueryFilter) {\r\n <mat-form-field subscriptSizing=\"dynamic\">\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? texts().common.search\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n </div>\r\n\r\n <ng-content select=\"[extra-header-content]\"></ng-content>\r\n </div>\r\n\r\n @if(filters()().advancedFilterId) {\r\n <div class=\"advancedFiltersApplied\" (click)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n <p [innerHTML]=\"getAdvancedFilterLabel()\"></p>\r\n <button matIconButton [matTooltip]=\"texts().advancedFilters.remove\" class=\"\" (click)=\"onQuitAdvancedFilter($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n <table\r\n mat-table \r\n matSort\r\n [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n [dataSource]=\"data()\" \r\n [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n (matSortChange)=\"onSortChange($event)\">\r\n\r\n @if(config()().enableRowSelection) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n </ng-container>\r\n } \r\n\r\n <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox \r\n class=\"headerCheckbox\"\r\n (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n @if(!config()().showRowSelection || config()().showRowSelection?.(row)) {\r\n <mat-checkbox\r\n (change)=\"$event ? toggleRowSelection(row) : null\"\r\n [checked]=\"isRowSelected(row)\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"getKeyAsString(column.key)\" \r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n <p class=\"headerTitle\">\r\n @if(stickyColumnKey() == column.key && isDesktop()) {\r\n <mat-icon>keep</mat-icon>\r\n }\r\n {{ column.label }}\r\n </p>\r\n </th>\r\n\r\n <td \r\n mat-cell \r\n *matCellDef=\"let row\" \r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.style\"\r\n class=\"celdaDatos\">\r\n\r\n @if(column.component) {\r\n <ng-container \r\n ngxDynamicCellHost\r\n [component]=\"column.component\"\r\n [row]=\"row\"\r\n [key]=\"column.key\" />\r\n } @else if(column.templateRef) {\r\n <ng-container \r\n *ngTemplateOutlet=\"column.templateRef(); \r\n context: { $implicit: row }\" />\r\n } @else if(column.valueGetter) {\r\n {{ column.valueGetter(row) }}\r\n } @else {\r\n {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n }\r\n </td>\r\n \r\n <td \r\n mat-footer-cell \r\n *matFooterCellDef \r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.footerStyle\">\r\n\r\n @if(column.showTotalPerPage) {\r\n @if(column.pipes) {\r\n {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n } @else if(column.totalFooterFormatter) {\r\n {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n } @else {\r\n {{ getTotalOfColum(column.key) }}\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n @if(column.pipes) {\r\n {{ applyColumnPipes(column.getTotalGeneral(), column.pipes) }}\r\n } @else if(column.totalFooterFormatter) {\r\n {{ column.totalFooterFormatter(column.getTotalGeneral()) }}\r\n } @else {\r\n {{ column.getTotalGeneral() }}\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showFiltersRow()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (column.filterType == 'text' || column.filterType == 'number') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n @if(column.endpointForPaginatedFilterOptions) {\r\n <ngx-paginated-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n clearableOptionLabel=\"filtro\"\r\n />\r\n } @else {\r\n <ngx-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n [options]=\"column.filterOptions ?? []\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n clearableOptionLabel=\"filtro\"\r\n />\r\n }\r\n }\r\n \r\n @if(column.filterType == 'date') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <input \r\n matInput \r\n [matDatepicker]=\"picker\" \r\n [placeholder]=\"column.label\"\r\n [value]=\"getValueOfColumnFilter(column.key)\"\r\n (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n\r\n @if(column.filterType == 'date-range') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n <input \r\n matStartDate \r\n [placeholder]=\"texts().table.dateRangeStart\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input \r\n matEndDate \r\n [placeholder]=\"texts().table.dateRangeEnd\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n }\r\n </th>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showActionsColumn()) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n </ng-container>\r\n } \r\n\r\n <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>{{ texts().table.actions }}</th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n <div class=\"contenedorCeldaAcciones\">\r\n @if(config()().expandableDetail) {\r\n <button \r\n matIconButton\r\n (click)=\"expandableToggle(row)\">\r\n <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n <button \r\n matIconButton\r\n [matTooltip]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\" \r\n [disabled]=\"config()().update?.disabled?.(row)\" \r\n class=\"editButtonIcon\"\r\n (click)=\"onUpdateClick(row, $event)\">\r\n <mat-icon>edit_square</mat-icon>\r\n </button>\r\n }\r\n \r\n @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\" \r\n [disabled]=\"config()().delete?.disabled?.(row)\" \r\n class=\"deleteButtonIcon\"\r\n (click)=\"onDeleteClick(row, $event)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (rowAction of config()().rowActions; track $index) {\r\n @if(!rowAction.show || rowAction.show(row)) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"rowAction.tooltip(row)\" \r\n [disabled]=\"rowAction.disabled?.(row)\" \r\n [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n <mat-icon>{{rowAction.icon}}</mat-icon>\r\n </button>\r\n } \r\n }\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(config()().expandableDetail) {\r\n <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n <div \r\n class=\"detailWrapper\"\r\n [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n <div class=\"columnDetail\">\r\n @if(config()().expandableDetailTemplateRef) {\r\n <ng-container \r\n *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n context: { $implicit: row }\" />\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n \r\n <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n \r\n @if(showFiltersRow()) {\r\n <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n }\r\n \r\n <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n (click)=\"onRowClick(row)\" \r\n [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n [class.expandableRow]=\"config()().expandableDetail\">\r\n </tr>\r\n \r\n @if(config()().expandableDetail) {\r\n <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n }\r\n\r\n <tr mat-footer-row \r\n *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n class=\"totalPerPageFooter\"\r\n [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n </tr>\r\n\r\n <tr mat-footer-row \r\n *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n class=\"totalFooter\"\r\n [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n </tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? texts().common.loading : texts().common.noData }}</td>\r\n </tr>\r\n </table>\r\n </div>\r\n\r\n <div class=\"paginatorContainer\">\r\n <div class=\"footerLegend\">\r\n @if(showTotalPerPageFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare\"></div>\r\n <p>{{ texts().table.totalPerPage }}</p> \r\n </div>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare totalGeneral\"></div>\r\n <p>{{ texts().table.totalGeneral }}</p>\r\n </div>\r\n }\r\n </div>\r\n <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n </div>\r\n\r\n <ng-content select=\"[end-container]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i10.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i10.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i10.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i13.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "pipe", type: OnlyUpperFirstCharacterPipe, name: "ngxOnlyUpperFirstCharacter" }] });
|
|
3442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedTable, isStandalone: true, selector: "ngx-paginated-table", inputs: { endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n <div class=\"headerContainer\">\r\n <div class=\"titleAndButtonContainer\">\r\n <p class=\"title\">{{ config()().title() }}</p>\r\n <div class=\"buttonContainer\">\r\n @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().create?.tooltip?.() ?? texts().table.create\"\r\n [attr.aria-label]=\"config()().create?.tooltip?.() ?? texts().table.create\" \r\n [disabled]=\"config()().create?.disabled?.()\"\r\n class=\"newButtonIcon\"\r\n (click)=\"onNewClick()\">\r\n <mat-icon>add_circle</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().hideColumnConfig?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.editColumns\" [attr.aria-label]=\"texts().table.editColumns\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n <mat-icon>table_edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().showAdvancedFilters) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().advancedFilters.label\"\r\n [attr.aria-label]=\"texts().advancedFilters.label\"\r\n [matMenuTriggerFor]=\"advancedFiltersMenu\"\r\n #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n <mat-icon>filter_alt</mat-icon>\r\n </button>\r\n\r\n <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"onNewAdvancedFiltersClick()\">\r\n <mat-icon>filter_alt</mat-icon>\r\n <span>{{ texts().advancedFilters.new }}</span>\r\n </button>\r\n\r\n @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n @if (first) {\r\n <mat-divider />\r\n }\r\n\r\n <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n <div class=\"templateContainer\">\r\n <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n <div class=\"buttonTemplateContainer\">\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().advancedFilters.editTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n [attr.aria-label]=\"texts().advancedFilters.editTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().advancedFilters.deleteTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n [attr.aria-label]=\"texts().advancedFilters.deleteTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </mat-menu>\r\n }\r\n\r\n @if(selection().length > 0) {\r\n @if(getRowSelectionAction().length > 0) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().table.selectionActions\"\r\n [attr.aria-label]=\"texts().table.selectionActions\"\r\n [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n <mat-icon>event_list</mat-icon>\r\n </button>\r\n\r\n <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n <span>{{ texts().table.deselectAll }}</span>\r\n </button>\r\n\r\n @for (action of getRowSelectionAction(); track $index) {\r\n <button mat-menu-item (click)=\"onRowSelectionActionClick(action.id)\">\r\n <mat-icon>{{action.icon}}</mat-icon>\r\n <span>{{action.label(selection(), selection().length)}}</span>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().table.deselectAll\"\r\n [attr.aria-label]=\"texts().table.deselectAll\"\r\n (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n }\r\n }\r\n @if(config()().hideExportData?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.export\" [attr.aria-label]=\"texts().table.export\" [matMenuTriggerFor]=\"exportMenu\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"exportToCsvCurrentPage()\">\r\n <mat-icon>csv</mat-icon>\r\n <span>{{ texts().table.exportExcel }}</span>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"exportToPdfCurrentPage()\">\r\n <mat-icon>picture_as_pdf</mat-icon>\r\n <span>{{ texts().table.exportPdf }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\"\r\n [attr.aria-label]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\"\r\n [attr.aria-pressed]=\"isFullScreen()\"\r\n (click)=\"onToggleFullScreen()\">\r\n <mat-icon aria-hidden=\"true\">{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n </button>\r\n }\r\n\r\n <ng-content select=\"[icon-buttons]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filterContainer\">\r\n <div class=\"moreFiltersContainer\">\r\n <ng-content select=\"[more-filters]\"></ng-content>\r\n </div>\r\n\r\n @if(config()().showQueryFilter) {\r\n <mat-form-field subscriptSizing=\"dynamic\">\r\n <mat-icon matPrefix aria-hidden=\"true\">search</mat-icon>\r\n <input\r\n #queryElement\r\n matInput\r\n type=\"search\"\r\n [placeholder]=\"config()().queryFilterPlaceholder ?? texts().common.search\"\r\n [attr.aria-label]=\"config()().queryFilterPlaceholder ?? texts().common.search\"\r\n [value]=\"queryText()\"\r\n (input)=\"onQueryChange(queryElement)\">\r\n <button\r\n matIconButton\r\n matSuffix\r\n [attr.aria-label]=\"texts().common.clearSearch\"\r\n (click)=\"onQueryReset(queryElement)\"\r\n [style.visibility]=\"queryText() ? 'visible': 'hidden'\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n </div>\r\n\r\n <ng-content select=\"[extra-header-content]\"></ng-content>\r\n </div>\r\n\r\n @if(filters()().advancedFilterId) {\r\n <div\r\n class=\"advancedFiltersApplied\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n (click)=\"onSelectedAdvancedFilterUpdate($event)\"\r\n (keydown.enter)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n <p [innerHTML]=\"advancedFilterLabel()\"></p>\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().advancedFilters.remove\"\r\n [attr.aria-label]=\"texts().advancedFilters.remove\"\r\n (click)=\"onQuitAdvancedFilter($event)\"\r\n (keydown.enter)=\"$event.stopPropagation()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n <table\r\n mat-table\r\n matSort\r\n [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n [dataSource]=\"data()\"\r\n [matSortActive]=\"filters()().sortBy?.key ?? ''\"\r\n [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n (matSortChange)=\"onSortChange($event)\">\r\n\r\n @if(config()().enableRowSelection) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n </ng-container>\r\n }\r\n\r\n <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n class=\"headerCheckbox\"\r\n [aria-label]=\"texts().table.selectPage\"\r\n (change)=\"toggleAllPageRowSelection()\"\r\n [checked]=\"allPageSelected()\"\r\n [indeterminate]=\"selection().length > 0 && !allPageSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n @if(!config()().showRowSelection || config()().showRowSelection?.(row)) {\r\n <mat-checkbox\r\n [aria-label]=\"texts().table.selectRow\"\r\n (change)=\"toggleRowSelection(row)\"\r\n [checked]=\"isRowSelected(row)\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"getKeyAsString(column.key)\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n <p class=\"headerTitle\">\r\n @if(stickyColumnKey() == column.key && isDesktop()) {\r\n <mat-icon>keep</mat-icon>\r\n }\r\n {{ column.label }}\r\n </p>\r\n </th>\r\n\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.style\"\r\n class=\"celdaDatos\">\r\n\r\n @if(column.component) {\r\n <ng-container\r\n ngxDynamicCellHost\r\n [component]=\"column.component\"\r\n [row]=\"row\"\r\n [key]=\"column.key\" />\r\n } @else if(column.templateRef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"column.templateRef();\r\n context: { $implicit: row }\" />\r\n } @else {\r\n {{ cellTexts().get(row)?.[column.key] }}\r\n }\r\n </td>\r\n\r\n <td\r\n mat-footer-cell\r\n *matFooterCellDef\r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.footerStyle\">\r\n\r\n @if(column.showTotalPerPage) {\r\n {{ pageTotals()[getKeyAsString(column.key)] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n {{ generalTotals()[getKeyAsString(column.key)] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showFiltersRow()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (column.filterType == 'text' || column.filterType == 'number') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [attr.aria-label]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n <mat-icon matSuffix aria-hidden=\"true\">{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n @if(column.endpointForPaginatedFilterOptions) {\r\n <ngx-paginated-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n [clearableOptionLabel]=\"texts().table.columnFilter\"\r\n />\r\n } @else {\r\n <ngx-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n [options]=\"column.filterOptions ?? []\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n [clearableOptionLabel]=\"texts().table.columnFilter\"\r\n />\r\n }\r\n }\r\n\r\n @if(column.filterType == 'date') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [placeholder]=\"column.label\"\r\n [value]=\"getValueOfColumnFilter(column.key)\"\r\n (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n\r\n @if(column.filterType == 'date-range') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n <input\r\n matStartDate\r\n [placeholder]=\"texts().table.dateRangeStart\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input\r\n matEndDate\r\n [placeholder]=\"texts().table.dateRangeEnd\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n }\r\n </th>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showActionsColumn()) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n </ng-container>\r\n }\r\n\r\n <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>{{ texts().table.actions }}</th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n <div class=\"contenedorCeldaAcciones\">\r\n @if(config()().expandableDetail) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"rowIsExpanded(row) ? texts().table.collapseRow : texts().table.expandRow\"\r\n [attr.aria-label]=\"rowIsExpanded(row) ? texts().table.collapseRow : texts().table.expandRow\"\r\n [attr.aria-expanded]=\"rowIsExpanded(row)\"\r\n (click)=\"expandableToggle(row)\">\r\n <mat-icon class=\"expandIcon\" [class.expandIcon--open]=\"rowIsExpanded(row)\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\"\r\n [attr.aria-label]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\"\r\n [disabled]=\"config()().update?.disabled?.(row)\"\r\n class=\"editButtonIcon\"\r\n (click)=\"onUpdateClick(row, $event)\">\r\n <mat-icon>edit_square</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\"\r\n [attr.aria-label]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\"\r\n [disabled]=\"config()().delete?.disabled?.(row)\"\r\n class=\"deleteButtonIcon\"\r\n (click)=\"onDeleteClick(row, $event)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (rowAction of config()().rowActions; track $index) {\r\n @if(!rowAction.show || rowAction.show(row)) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"rowAction.tooltip(row)\"\r\n [attr.aria-label]=\"rowAction.tooltip(row)\"\r\n [disabled]=\"rowAction.disabled?.(row)\"\r\n [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n <mat-icon>{{rowAction.icon}}</mat-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(config()().expandableDetail) {\r\n <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n <div\r\n class=\"detailWrapper\"\r\n [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n <div class=\"columnDetail\">\r\n @if(config()().expandableDetailTemplateRef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!();\r\n context: { $implicit: row }\" />\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n\r\n @if(showFiltersRow()) {\r\n <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: keys();\"\r\n (click)=\"onRowClick(row)\"\r\n (keydown.enter)=\"onRowClick(row)\"\r\n [attr.tabindex]=\"isRowEnabled(row) ? 0 : null\"\r\n [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n [class.rowSelected]=\"isRowSelected(row)\"\r\n [class.expandableRow]=\"config()().expandableDetail\">\r\n </tr>\r\n\r\n @if(config()().expandableDetail) {\r\n <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n }\r\n\r\n <tr mat-footer-row\r\n *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\"\r\n class=\"totalPerPageFooter\"\r\n [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n </tr>\r\n\r\n <tr mat-footer-row\r\n *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\"\r\n class=\"totalFooter\"\r\n [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n </tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? texts().common.loading : texts().common.noData }}</td>\r\n </tr>\r\n </table>\r\n </div>\r\n\r\n <div class=\"paginatorContainer\">\r\n <div class=\"footerLegend\">\r\n @if(showTotalPerPageFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare\"></div>\r\n <p>{{ texts().table.totalPerPage }}</p>\r\n </div>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare totalGeneral\"></div>\r\n <p>{{ texts().table.totalGeneral }}</p>\r\n </div>\r\n }\r\n </div>\r\n <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n </div>\r\n\r\n <ng-content select=\"[end-container]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [":host{display:block;border-radius:16px;background:var(--mat-sys-surface);box-shadow:var(--mat-sys-level1);--ngx-table-edit-color: var(--warning, #e6a700);--ngx-table-delete-color: var(--mat-sys-error);--ngx-table-action-yellow: #d4b800;--ngx-table-action-orange: #f57c00;--ngx-table-action-pink: #e91e63;--ngx-table-action-purple: #8e24aa;--ngx-table-action-green: var(--success, #2e7d32);--ngx-table-action-blue: var(--information, #0277bd);--ngx-table-action-sky: #00acc1;--ngx-table-action-brown: #795548}.tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0}.headerContainer{display:flex;flex-direction:column;gap:10px}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.filterContainer{display:flex;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-edit-color) 72%, var(--mat-sys-on-surface))}.deleteButtonIcon{--mat-icon-button-icon-color: var(--ngx-table-delete-color)}.rowActionIconColorYellow{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-yellow) 72%, var(--mat-sys-on-surface))}.rowActionIconColorOrange{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-orange) 72%, var(--mat-sys-on-surface))}.rowActionIconColorPink{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-pink) 72%, var(--mat-sys-on-surface))}.rowActionIconColorPurple{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-purple) 72%, var(--mat-sys-on-surface))}.rowActionIconColorGreen{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-green) 72%, var(--mat-sys-on-surface))}.rowActionIconColorBlue{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-blue) 72%, var(--mat-sys-on-surface))}.rowActionIconColorBrown{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-brown) 72%, var(--mat-sys-on-surface))}.rowActionIconColorSky{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-sky) 72%, var(--mat-sys-on-surface))}.noData{padding:24px;color:var(--mat-sys-on-surface-variant)}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px;margin:0}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos,.celdaAcciones,.celdaSelection,.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.rowSelected>.celdaDatos,.rowSelected>.celdaAcciones,.rowSelected>.celdaSelection,.rowSelected>.columnSticky{background-color:var(--mat-sys-secondary-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.expandIcon{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expandIcon--open{transform:rotate(180deg)}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}:host{--ngx-table-advanced-filter-background: var(--warning, var(--mat-sys-tertiary-container));--ngx-table-advanced-filter-color: var(--on-warning, var(--mat-sys-on-tertiary-container))}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;justify-content:space-between;align-items:center;gap:20px;border-radius:10px;background-color:var(--ngx-table-advanced-filter-background);color:var(--ngx-table-advanced-filter-color);margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--ngx-table-advanced-filter-background) 80%,transparent)}.advancedFiltersApplied:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.advancedFiltersApplied p{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i10.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i10.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i10.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i13.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "pipe", type: OnlyUpperFirstCharacterPipe, name: "ngxOnlyUpperFirstCharacter" }] });
|
|
3273
3443
|
}
|
|
3274
3444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, decorators: [{
|
|
3275
3445
|
type: Component,
|
|
@@ -3293,18 +3463,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3293
3463
|
MatCheckboxModule,
|
|
3294
3464
|
PaginatedSearchableSelectComponent,
|
|
3295
3465
|
SearchableSelectComponent
|
|
3296
|
-
], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n <div class=\"headerContainer\">\r\n <div class=\"titleAndButtonContainer\">\r\n <p class=\"title\">{{ config()().title() }}</p>\r\n <div class=\"buttonContainer\">\r\n @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"config()().create?.tooltip?.() ?? texts().table.create\" \r\n [disabled]=\"config()().create?.disabled?.()\" \r\n class=\"newButtonIcon\"\r\n (click)=\"onNewClick()\">\r\n <mat-icon>add_circle</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().hideColumnConfig?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.editColumns\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n <mat-icon>table_edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().showAdvancedFilters) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.label\"\r\n [matMenuTriggerFor]=\"advancedFiltersMenu\" \r\n #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n <mat-icon>filter_alt</mat-icon>\r\n </button>\r\n\r\n <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"onNewAdvancedFiltersClick()\">\r\n <mat-icon>filter_alt</mat-icon>\r\n <span>{{ texts().advancedFilters.new }}</span>\r\n </button>\r\n\r\n @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n @if (first) {\r\n <mat-divider />\r\n }\r\n\r\n <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n <div class=\"templateContainer\"> \r\n <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n <div class=\"buttonTemplateContainer\">\r\n <button\r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.editTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n\r\n <button\r\n matIconButton \r\n [matTooltip]=\"texts().advancedFilters.deleteTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </mat-menu>\r\n }\r\n\r\n @if(selection().length > 0) {\r\n @if(getRowSelectionAction().length > 0) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().table.selectionActions\"\r\n [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n <mat-icon>event_list</mat-icon>\r\n </button>\r\n\r\n <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n <span>{{ texts().table.deselectAll }}</span>\r\n </button>\r\n\r\n @for (action of getRowSelectionAction(); track $index) {\r\n <button mat-menu-item (click)=\"onRowSelectionActionClick(action.id)\">\r\n <mat-icon>{{action.icon}}</mat-icon>\r\n <span>{{action.label(selection(), selection().length)}}</span>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().table.deselectAll\"\r\n (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n }\r\n }\r\n @if(config()().hideExportData?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.export\" [matMenuTriggerFor]=\"exportMenu\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"exportToCsvCurrentPage()\">\r\n <mat-icon>csv</mat-icon>\r\n <span>{{ texts().table.exportExcel }}</span>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"exportToPdfCurrentPage()\">\r\n <mat-icon>picture_as_pdf</mat-icon>\r\n <span>{{ texts().table.exportPdf }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button matIconButton [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\" (click)=\"onToggleFullScreen()\">\r\n <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n </button>\r\n }\r\n\r\n <ng-content select=\"[icon-buttons]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filterContainer\">\r\n <div class=\"moreFiltersContainer\">\r\n <ng-content select=\"[more-filters]\"></ng-content>\r\n </div>\r\n\r\n @if(config()().showQueryFilter) {\r\n <mat-form-field subscriptSizing=\"dynamic\">\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? texts().common.search\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n </div>\r\n\r\n <ng-content select=\"[extra-header-content]\"></ng-content>\r\n </div>\r\n\r\n @if(filters()().advancedFilterId) {\r\n <div class=\"advancedFiltersApplied\" (click)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n <p [innerHTML]=\"getAdvancedFilterLabel()\"></p>\r\n <button matIconButton [matTooltip]=\"texts().advancedFilters.remove\" class=\"\" (click)=\"onQuitAdvancedFilter($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n <table\r\n mat-table \r\n matSort\r\n [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n [dataSource]=\"data()\" \r\n [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n (matSortChange)=\"onSortChange($event)\">\r\n\r\n @if(config()().enableRowSelection) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n </ng-container>\r\n } \r\n\r\n <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox \r\n class=\"headerCheckbox\"\r\n (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n @if(!config()().showRowSelection || config()().showRowSelection?.(row)) {\r\n <mat-checkbox\r\n (change)=\"$event ? toggleRowSelection(row) : null\"\r\n [checked]=\"isRowSelected(row)\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"getKeyAsString(column.key)\" \r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n <p class=\"headerTitle\">\r\n @if(stickyColumnKey() == column.key && isDesktop()) {\r\n <mat-icon>keep</mat-icon>\r\n }\r\n {{ column.label }}\r\n </p>\r\n </th>\r\n\r\n <td \r\n mat-cell \r\n *matCellDef=\"let row\" \r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.style\"\r\n class=\"celdaDatos\">\r\n\r\n @if(column.component) {\r\n <ng-container \r\n ngxDynamicCellHost\r\n [component]=\"column.component\"\r\n [row]=\"row\"\r\n [key]=\"column.key\" />\r\n } @else if(column.templateRef) {\r\n <ng-container \r\n *ngTemplateOutlet=\"column.templateRef(); \r\n context: { $implicit: row }\" />\r\n } @else if(column.valueGetter) {\r\n {{ column.valueGetter(row) }}\r\n } @else {\r\n {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n }\r\n </td>\r\n \r\n <td \r\n mat-footer-cell \r\n *matFooterCellDef \r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.footerStyle\">\r\n\r\n @if(column.showTotalPerPage) {\r\n @if(column.pipes) {\r\n {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n } @else if(column.totalFooterFormatter) {\r\n {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n } @else {\r\n {{ getTotalOfColum(column.key) }}\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n @if(column.pipes) {\r\n {{ applyColumnPipes(column.getTotalGeneral(), column.pipes) }}\r\n } @else if(column.totalFooterFormatter) {\r\n {{ column.totalFooterFormatter(column.getTotalGeneral()) }}\r\n } @else {\r\n {{ column.getTotalGeneral() }}\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showFiltersRow()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (column.filterType == 'text' || column.filterType == 'number') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n @if(column.endpointForPaginatedFilterOptions) {\r\n <ngx-paginated-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n clearableOptionLabel=\"filtro\"\r\n />\r\n } @else {\r\n <ngx-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n [options]=\"column.filterOptions ?? []\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n clearableOptionLabel=\"filtro\"\r\n />\r\n }\r\n }\r\n \r\n @if(column.filterType == 'date') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <input \r\n matInput \r\n [matDatepicker]=\"picker\" \r\n [placeholder]=\"column.label\"\r\n [value]=\"getValueOfColumnFilter(column.key)\"\r\n (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n\r\n @if(column.filterType == 'date-range') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n <input \r\n matStartDate \r\n [placeholder]=\"texts().table.dateRangeStart\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input \r\n matEndDate \r\n [placeholder]=\"texts().table.dateRangeEnd\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n }\r\n </th>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showActionsColumn()) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n </ng-container>\r\n } \r\n\r\n <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>{{ texts().table.actions }}</th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n <div class=\"contenedorCeldaAcciones\">\r\n @if(config()().expandableDetail) {\r\n <button \r\n matIconButton\r\n (click)=\"expandableToggle(row)\">\r\n <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n <button \r\n matIconButton\r\n [matTooltip]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\" \r\n [disabled]=\"config()().update?.disabled?.(row)\" \r\n class=\"editButtonIcon\"\r\n (click)=\"onUpdateClick(row, $event)\">\r\n <mat-icon>edit_square</mat-icon>\r\n </button>\r\n }\r\n \r\n @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\" \r\n [disabled]=\"config()().delete?.disabled?.(row)\" \r\n class=\"deleteButtonIcon\"\r\n (click)=\"onDeleteClick(row, $event)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (rowAction of config()().rowActions; track $index) {\r\n @if(!rowAction.show || rowAction.show(row)) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"rowAction.tooltip(row)\" \r\n [disabled]=\"rowAction.disabled?.(row)\" \r\n [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n <mat-icon>{{rowAction.icon}}</mat-icon>\r\n </button>\r\n } \r\n }\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(config()().expandableDetail) {\r\n <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n <div \r\n class=\"detailWrapper\"\r\n [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n <div class=\"columnDetail\">\r\n @if(config()().expandableDetailTemplateRef) {\r\n <ng-container \r\n *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n context: { $implicit: row }\" />\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n \r\n <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n \r\n @if(showFiltersRow()) {\r\n <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n }\r\n \r\n <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n (click)=\"onRowClick(row)\" \r\n [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n [class.expandableRow]=\"config()().expandableDetail\">\r\n </tr>\r\n \r\n @if(config()().expandableDetail) {\r\n <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n }\r\n\r\n <tr mat-footer-row \r\n *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n class=\"totalPerPageFooter\"\r\n [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n </tr>\r\n\r\n <tr mat-footer-row \r\n *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n class=\"totalFooter\"\r\n [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n </tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? texts().common.loading : texts().common.noData }}</td>\r\n </tr>\r\n </table>\r\n </div>\r\n\r\n <div class=\"paginatorContainer\">\r\n <div class=\"footerLegend\">\r\n @if(showTotalPerPageFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare\"></div>\r\n <p>{{ texts().table.totalPerPage }}</p> \r\n </div>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare totalGeneral\"></div>\r\n <p>{{ texts().table.totalGeneral }}</p>\r\n </div>\r\n }\r\n </div>\r\n <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n </div>\r\n\r\n <ng-content select=\"[end-container]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
|
|
3297
|
-
}], propDecorators: { endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }], tableContentTemplate: [{ type: i0.ViewChild, args: ['tableContent', { isSignal: true }] }]
|
|
3298
|
-
type: HostListener,
|
|
3299
|
-
args: ['document:keydown.escape']
|
|
3300
|
-
}] } });
|
|
3466
|
+
], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n <div class=\"headerContainer\">\r\n <div class=\"titleAndButtonContainer\">\r\n <p class=\"title\">{{ config()().title() }}</p>\r\n <div class=\"buttonContainer\">\r\n @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().create?.tooltip?.() ?? texts().table.create\"\r\n [attr.aria-label]=\"config()().create?.tooltip?.() ?? texts().table.create\" \r\n [disabled]=\"config()().create?.disabled?.()\"\r\n class=\"newButtonIcon\"\r\n (click)=\"onNewClick()\">\r\n <mat-icon>add_circle</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().hideColumnConfig?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.editColumns\" [attr.aria-label]=\"texts().table.editColumns\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n <mat-icon>table_edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().showAdvancedFilters) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().advancedFilters.label\"\r\n [attr.aria-label]=\"texts().advancedFilters.label\"\r\n [matMenuTriggerFor]=\"advancedFiltersMenu\"\r\n #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n <mat-icon>filter_alt</mat-icon>\r\n </button>\r\n\r\n <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"onNewAdvancedFiltersClick()\">\r\n <mat-icon>filter_alt</mat-icon>\r\n <span>{{ texts().advancedFilters.new }}</span>\r\n </button>\r\n\r\n @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n @if (first) {\r\n <mat-divider />\r\n }\r\n\r\n <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n <div class=\"templateContainer\">\r\n <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n <div class=\"buttonTemplateContainer\">\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().advancedFilters.editTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n [attr.aria-label]=\"texts().advancedFilters.editTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().advancedFilters.deleteTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n [attr.aria-label]=\"texts().advancedFilters.deleteTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </mat-menu>\r\n }\r\n\r\n @if(selection().length > 0) {\r\n @if(getRowSelectionAction().length > 0) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().table.selectionActions\"\r\n [attr.aria-label]=\"texts().table.selectionActions\"\r\n [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n <mat-icon>event_list</mat-icon>\r\n </button>\r\n\r\n <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n <span>{{ texts().table.deselectAll }}</span>\r\n </button>\r\n\r\n @for (action of getRowSelectionAction(); track $index) {\r\n <button mat-menu-item (click)=\"onRowSelectionActionClick(action.id)\">\r\n <mat-icon>{{action.icon}}</mat-icon>\r\n <span>{{action.label(selection(), selection().length)}}</span>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().table.deselectAll\"\r\n [attr.aria-label]=\"texts().table.deselectAll\"\r\n (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n }\r\n }\r\n @if(config()().hideExportData?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.export\" [attr.aria-label]=\"texts().table.export\" [matMenuTriggerFor]=\"exportMenu\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"exportToCsvCurrentPage()\">\r\n <mat-icon>csv</mat-icon>\r\n <span>{{ texts().table.exportExcel }}</span>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"exportToPdfCurrentPage()\">\r\n <mat-icon>picture_as_pdf</mat-icon>\r\n <span>{{ texts().table.exportPdf }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\"\r\n [attr.aria-label]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\"\r\n [attr.aria-pressed]=\"isFullScreen()\"\r\n (click)=\"onToggleFullScreen()\">\r\n <mat-icon aria-hidden=\"true\">{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n </button>\r\n }\r\n\r\n <ng-content select=\"[icon-buttons]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filterContainer\">\r\n <div class=\"moreFiltersContainer\">\r\n <ng-content select=\"[more-filters]\"></ng-content>\r\n </div>\r\n\r\n @if(config()().showQueryFilter) {\r\n <mat-form-field subscriptSizing=\"dynamic\">\r\n <mat-icon matPrefix aria-hidden=\"true\">search</mat-icon>\r\n <input\r\n #queryElement\r\n matInput\r\n type=\"search\"\r\n [placeholder]=\"config()().queryFilterPlaceholder ?? texts().common.search\"\r\n [attr.aria-label]=\"config()().queryFilterPlaceholder ?? texts().common.search\"\r\n [value]=\"queryText()\"\r\n (input)=\"onQueryChange(queryElement)\">\r\n <button\r\n matIconButton\r\n matSuffix\r\n [attr.aria-label]=\"texts().common.clearSearch\"\r\n (click)=\"onQueryReset(queryElement)\"\r\n [style.visibility]=\"queryText() ? 'visible': 'hidden'\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n </div>\r\n\r\n <ng-content select=\"[extra-header-content]\"></ng-content>\r\n </div>\r\n\r\n @if(filters()().advancedFilterId) {\r\n <div\r\n class=\"advancedFiltersApplied\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n (click)=\"onSelectedAdvancedFilterUpdate($event)\"\r\n (keydown.enter)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n <p [innerHTML]=\"advancedFilterLabel()\"></p>\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().advancedFilters.remove\"\r\n [attr.aria-label]=\"texts().advancedFilters.remove\"\r\n (click)=\"onQuitAdvancedFilter($event)\"\r\n (keydown.enter)=\"$event.stopPropagation()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n <table\r\n mat-table\r\n matSort\r\n [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n [dataSource]=\"data()\"\r\n [matSortActive]=\"filters()().sortBy?.key ?? ''\"\r\n [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n (matSortChange)=\"onSortChange($event)\">\r\n\r\n @if(config()().enableRowSelection) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n </ng-container>\r\n }\r\n\r\n <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n class=\"headerCheckbox\"\r\n [aria-label]=\"texts().table.selectPage\"\r\n (change)=\"toggleAllPageRowSelection()\"\r\n [checked]=\"allPageSelected()\"\r\n [indeterminate]=\"selection().length > 0 && !allPageSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n @if(!config()().showRowSelection || config()().showRowSelection?.(row)) {\r\n <mat-checkbox\r\n [aria-label]=\"texts().table.selectRow\"\r\n (change)=\"toggleRowSelection(row)\"\r\n [checked]=\"isRowSelected(row)\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"getKeyAsString(column.key)\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n <p class=\"headerTitle\">\r\n @if(stickyColumnKey() == column.key && isDesktop()) {\r\n <mat-icon>keep</mat-icon>\r\n }\r\n {{ column.label }}\r\n </p>\r\n </th>\r\n\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.style\"\r\n class=\"celdaDatos\">\r\n\r\n @if(column.component) {\r\n <ng-container\r\n ngxDynamicCellHost\r\n [component]=\"column.component\"\r\n [row]=\"row\"\r\n [key]=\"column.key\" />\r\n } @else if(column.templateRef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"column.templateRef();\r\n context: { $implicit: row }\" />\r\n } @else {\r\n {{ cellTexts().get(row)?.[column.key] }}\r\n }\r\n </td>\r\n\r\n <td\r\n mat-footer-cell\r\n *matFooterCellDef\r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.footerStyle\">\r\n\r\n @if(column.showTotalPerPage) {\r\n {{ pageTotals()[getKeyAsString(column.key)] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n {{ generalTotals()[getKeyAsString(column.key)] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showFiltersRow()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (column.filterType == 'text' || column.filterType == 'number') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [attr.aria-label]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n <mat-icon matSuffix aria-hidden=\"true\">{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n @if(column.endpointForPaginatedFilterOptions) {\r\n <ngx-paginated-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n [clearableOptionLabel]=\"texts().table.columnFilter\"\r\n />\r\n } @else {\r\n <ngx-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n [options]=\"column.filterOptions ?? []\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n [clearableOptionLabel]=\"texts().table.columnFilter\"\r\n />\r\n }\r\n }\r\n\r\n @if(column.filterType == 'date') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [placeholder]=\"column.label\"\r\n [value]=\"getValueOfColumnFilter(column.key)\"\r\n (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n\r\n @if(column.filterType == 'date-range') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n <input\r\n matStartDate\r\n [placeholder]=\"texts().table.dateRangeStart\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input\r\n matEndDate\r\n [placeholder]=\"texts().table.dateRangeEnd\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n }\r\n </th>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showActionsColumn()) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n </ng-container>\r\n }\r\n\r\n <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>{{ texts().table.actions }}</th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n <div class=\"contenedorCeldaAcciones\">\r\n @if(config()().expandableDetail) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"rowIsExpanded(row) ? texts().table.collapseRow : texts().table.expandRow\"\r\n [attr.aria-label]=\"rowIsExpanded(row) ? texts().table.collapseRow : texts().table.expandRow\"\r\n [attr.aria-expanded]=\"rowIsExpanded(row)\"\r\n (click)=\"expandableToggle(row)\">\r\n <mat-icon class=\"expandIcon\" [class.expandIcon--open]=\"rowIsExpanded(row)\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\"\r\n [attr.aria-label]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\"\r\n [disabled]=\"config()().update?.disabled?.(row)\"\r\n class=\"editButtonIcon\"\r\n (click)=\"onUpdateClick(row, $event)\">\r\n <mat-icon>edit_square</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\"\r\n [attr.aria-label]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\"\r\n [disabled]=\"config()().delete?.disabled?.(row)\"\r\n class=\"deleteButtonIcon\"\r\n (click)=\"onDeleteClick(row, $event)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (rowAction of config()().rowActions; track $index) {\r\n @if(!rowAction.show || rowAction.show(row)) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"rowAction.tooltip(row)\"\r\n [attr.aria-label]=\"rowAction.tooltip(row)\"\r\n [disabled]=\"rowAction.disabled?.(row)\"\r\n [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n <mat-icon>{{rowAction.icon}}</mat-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(config()().expandableDetail) {\r\n <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n <div\r\n class=\"detailWrapper\"\r\n [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n <div class=\"columnDetail\">\r\n @if(config()().expandableDetailTemplateRef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!();\r\n context: { $implicit: row }\" />\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n\r\n @if(showFiltersRow()) {\r\n <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: keys();\"\r\n (click)=\"onRowClick(row)\"\r\n (keydown.enter)=\"onRowClick(row)\"\r\n [attr.tabindex]=\"isRowEnabled(row) ? 0 : null\"\r\n [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n [class.rowSelected]=\"isRowSelected(row)\"\r\n [class.expandableRow]=\"config()().expandableDetail\">\r\n </tr>\r\n\r\n @if(config()().expandableDetail) {\r\n <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n }\r\n\r\n <tr mat-footer-row\r\n *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\"\r\n class=\"totalPerPageFooter\"\r\n [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n </tr>\r\n\r\n <tr mat-footer-row\r\n *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\"\r\n class=\"totalFooter\"\r\n [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n </tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? texts().common.loading : texts().common.noData }}</td>\r\n </tr>\r\n </table>\r\n </div>\r\n\r\n <div class=\"paginatorContainer\">\r\n <div class=\"footerLegend\">\r\n @if(showTotalPerPageFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare\"></div>\r\n <p>{{ texts().table.totalPerPage }}</p>\r\n </div>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare totalGeneral\"></div>\r\n <p>{{ texts().table.totalGeneral }}</p>\r\n </div>\r\n }\r\n </div>\r\n <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n </div>\r\n\r\n <ng-content select=\"[end-container]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [":host{display:block;border-radius:16px;background:var(--mat-sys-surface);box-shadow:var(--mat-sys-level1);--ngx-table-edit-color: var(--warning, #e6a700);--ngx-table-delete-color: var(--mat-sys-error);--ngx-table-action-yellow: #d4b800;--ngx-table-action-orange: #f57c00;--ngx-table-action-pink: #e91e63;--ngx-table-action-purple: #8e24aa;--ngx-table-action-green: var(--success, #2e7d32);--ngx-table-action-blue: var(--information, #0277bd);--ngx-table-action-sky: #00acc1;--ngx-table-action-brown: #795548}.tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0}.headerContainer{display:flex;flex-direction:column;gap:10px}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.filterContainer{display:flex;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-edit-color) 72%, var(--mat-sys-on-surface))}.deleteButtonIcon{--mat-icon-button-icon-color: var(--ngx-table-delete-color)}.rowActionIconColorYellow{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-yellow) 72%, var(--mat-sys-on-surface))}.rowActionIconColorOrange{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-orange) 72%, var(--mat-sys-on-surface))}.rowActionIconColorPink{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-pink) 72%, var(--mat-sys-on-surface))}.rowActionIconColorPurple{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-purple) 72%, var(--mat-sys-on-surface))}.rowActionIconColorGreen{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-green) 72%, var(--mat-sys-on-surface))}.rowActionIconColorBlue{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-blue) 72%, var(--mat-sys-on-surface))}.rowActionIconColorBrown{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-brown) 72%, var(--mat-sys-on-surface))}.rowActionIconColorSky{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-sky) 72%, var(--mat-sys-on-surface))}.noData{padding:24px;color:var(--mat-sys-on-surface-variant)}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px;margin:0}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos,.celdaAcciones,.celdaSelection,.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.rowSelected>.celdaDatos,.rowSelected>.celdaAcciones,.rowSelected>.celdaSelection,.rowSelected>.columnSticky{background-color:var(--mat-sys-secondary-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.expandIcon{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expandIcon--open{transform:rotate(180deg)}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}:host{--ngx-table-advanced-filter-background: var(--warning, var(--mat-sys-tertiary-container));--ngx-table-advanced-filter-color: var(--on-warning, var(--mat-sys-on-tertiary-container))}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;justify-content:space-between;align-items:center;gap:20px;border-radius:10px;background-color:var(--ngx-table-advanced-filter-background);color:var(--ngx-table-advanced-filter-color);margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--ngx-table-advanced-filter-background) 80%,transparent)}.advancedFiltersApplied:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.advancedFiltersApplied p{margin:0}\n"] }]
|
|
3467
|
+
}], propDecorators: { endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }], tableContentTemplate: [{ type: i0.ViewChild, args: ['tableContent', { isSignal: true }] }] } });
|
|
3301
3468
|
|
|
3302
3469
|
class NgxBasicTable {
|
|
3303
3470
|
columnConfigService = inject(ColumnConfigService);
|
|
3304
3471
|
dialog = inject(MatDialog);
|
|
3305
3472
|
dialogService = inject(NgxDialogService);
|
|
3306
3473
|
datosPantallaService = inject(DatosPantallaService);
|
|
3307
|
-
|
|
3474
|
+
_host = inject(ElementRef);
|
|
3475
|
+
_destroyRef = inject(DestroyRef);
|
|
3308
3476
|
texts = inject(NgxTexts).texts;
|
|
3309
3477
|
isDesktop = computed(() => this.datosPantallaService.pantalla()?.tipo == 'escritorio', ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
|
|
3310
3478
|
filters = input(signal({
|
|
@@ -3325,29 +3493,43 @@ class NgxBasicTable {
|
|
|
3325
3493
|
rowActionClick = output();
|
|
3326
3494
|
expandedItemChange = output();
|
|
3327
3495
|
selectionActionEvent = output();
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
const dataSource = new MatTableDataSource(data);
|
|
3332
|
-
if (paginator)
|
|
3333
|
-
dataSource.paginator = paginator;
|
|
3334
|
-
return dataSource;
|
|
3335
|
-
}, ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
|
|
3336
|
-
filtersEffect = effect(() => {
|
|
3496
|
+
paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
|
|
3497
|
+
/** Búsqueda, orden, filtros de columna y moreFilters aplicados: lo que se pagina y se exporta. */
|
|
3498
|
+
filteredData = computed(() => {
|
|
3337
3499
|
let data = this.data();
|
|
3338
3500
|
const filters = this.filters()();
|
|
3339
3501
|
const config = this.config()();
|
|
3340
3502
|
const queryFilter = this.queryFilter();
|
|
3341
|
-
const moreFilters = this.moreFilters();
|
|
3342
3503
|
if (queryFilter)
|
|
3343
3504
|
data = queryFilter(filters.query ?? '', data);
|
|
3344
3505
|
else if (this.someColumnFilterable(config.columns))
|
|
3345
3506
|
data = this.applyInputFilter(config.columns, data, filters.query);
|
|
3346
3507
|
data = this.applySort(data, config.columns, filters.sortBy);
|
|
3347
3508
|
data = this.applyColumnFilter(data, config.columns, filters.columnsFiltersValue);
|
|
3348
|
-
|
|
3349
|
-
|
|
3350
|
-
|
|
3509
|
+
return this.moreFilters()(data, filters);
|
|
3510
|
+
}, ...(ngDevMode ? [{ debugName: "filteredData" }] : []));
|
|
3511
|
+
dataSource = computed(() => {
|
|
3512
|
+
const paginator = this.paginator();
|
|
3513
|
+
const dataSource = new MatTableDataSource(untracked(() => this.filteredData()));
|
|
3514
|
+
if (paginator)
|
|
3515
|
+
dataSource.paginator = paginator;
|
|
3516
|
+
return dataSource;
|
|
3517
|
+
}, ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
|
|
3518
|
+
_syncData = effect(() => {
|
|
3519
|
+
this.dataSource().data = this.filteredData();
|
|
3520
|
+
}, ...(ngDevMode ? [{ debugName: "_syncData" }] : []));
|
|
3521
|
+
/** Filas de la página visible (cambia con el paginador): totales por página y «seleccionar página». */
|
|
3522
|
+
pageRows = toSignal(toObservable(this.dataSource).pipe(switchMap(dataSource => dataSource?.connect() ?? of([]))), { initialValue: [] });
|
|
3523
|
+
/** Al cambiar la búsqueda, el orden o un filtro se vuelve a la primera página. */
|
|
3524
|
+
_lastFilters;
|
|
3525
|
+
_resetPage = effect(() => {
|
|
3526
|
+
const filters = this.filters()();
|
|
3527
|
+
untracked(() => {
|
|
3528
|
+
if (this._lastFilters && this._lastFilters !== filters)
|
|
3529
|
+
this.paginator()?.firstPage();
|
|
3530
|
+
this._lastFilters = filters;
|
|
3531
|
+
});
|
|
3532
|
+
}, ...(ngDevMode ? [{ debugName: "_resetPage" }] : []));
|
|
3351
3533
|
columnConfig = computed(() => {
|
|
3352
3534
|
const columnConfigs = this.columnConfigService.columnConfigs();
|
|
3353
3535
|
const configValue = this.config()();
|
|
@@ -3413,41 +3595,54 @@ class NgxBasicTable {
|
|
|
3413
3595
|
return true;
|
|
3414
3596
|
return this.someColumnFilterable(config.columns);
|
|
3415
3597
|
}, ...(ngDevMode ? [{ debugName: "showQueryFilter" }] : []));
|
|
3598
|
+
/** Texto del buscador (para la X de borrar; antes se leía el DOM desde la plantilla). */
|
|
3599
|
+
queryText = linkedSignal(() => this.filters()().query ?? '', ...(ngDevMode ? [{ debugName: "queryText" }] : []));
|
|
3600
|
+
/** Texto de cada celda de la página (sin componente ni plantilla), calculado una vez. */
|
|
3601
|
+
cellTexts = computed(() => {
|
|
3602
|
+
const columns = this.config()().columns.filter(column => !column.component && !column.templateRef);
|
|
3603
|
+
return new Map(this.pageRows().map(row => [row, Object.fromEntries(columns.map(column => [column.key, this.displayText(row, column)]))]));
|
|
3604
|
+
}, ...(ngDevMode ? [{ debugName: "cellTexts" }] : []));
|
|
3605
|
+
/** Totales por página y generales ya formateados, por clave de columna. */
|
|
3606
|
+
pageTotals = computed(() => this.totalsText(this.pageRows(), column => !!column.showTotalPerPage), ...(ngDevMode ? [{ debugName: "pageTotals" }] : []));
|
|
3607
|
+
generalTotals = computed(() => this.totalsText(this.filteredData(), column => !!column.showTotalGeneral), ...(ngDevMode ? [{ debugName: "generalTotals" }] : []));
|
|
3416
3608
|
tableContentTemplate = viewChild('tableContent', ...(ngDevMode ? [{ debugName: "tableContentTemplate" }] : []));
|
|
3417
3609
|
isFullScreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullScreen" }] : []));
|
|
3418
3610
|
overlayRef;
|
|
3419
|
-
portal;
|
|
3420
3611
|
overlay = inject(Overlay);
|
|
3421
|
-
overlayContainer = inject(OverlayContainer);
|
|
3422
3612
|
viewContainerRef = inject(ViewContainerRef);
|
|
3423
3613
|
selection = signal([], ...(ngDevMode ? [{ debugName: "selection" }] : []));
|
|
3614
|
+
/** Claves de las filas seleccionadas: comprobar una fila es O(1). */
|
|
3615
|
+
_selectedKeys = computed(() => {
|
|
3616
|
+
const primaryKey = this.config()().primaryKey;
|
|
3617
|
+
return new Set(this.selection().map(row => rowKeyOf(row, primaryKey)));
|
|
3618
|
+
}, ...(ngDevMode ? [{ debugName: "_selectedKeys" }] : []));
|
|
3619
|
+
allPageSelected = computed(() => {
|
|
3620
|
+
const rows = this.pageRows();
|
|
3621
|
+
return rows.length > 0 && rows.every(row => this.isRowSelected(row));
|
|
3622
|
+
}, ...(ngDevMode ? [{ debugName: "allPageSelected" }] : []));
|
|
3424
3623
|
expandableColumnDef = 'expandedDetail';
|
|
3425
3624
|
expandedItem = signal(null, ...(ngDevMode ? [{ debugName: "expandedItem" }] : []));
|
|
3426
|
-
paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
|
|
3427
3625
|
defaultFiltersForPaginatedFilterOptions = signal({
|
|
3428
3626
|
pageNumber: 1,
|
|
3429
3627
|
pageSize: 20,
|
|
3430
3628
|
query: undefined
|
|
3431
3629
|
}, ...(ngDevMode ? [{ debugName: "defaultFiltersForPaginatedFilterOptions" }] : []));
|
|
3630
|
+
constructor() {
|
|
3631
|
+
this._destroyRef.onDestroy(() => this.exitFullscreen());
|
|
3632
|
+
}
|
|
3432
3633
|
getKeyAsString = (columnKey) => columnKey;
|
|
3433
3634
|
includeInColumnConfig(searchedColumn, allColumns) {
|
|
3434
3635
|
return allColumns.some(column => searchedColumn.key == column.key);
|
|
3435
3636
|
}
|
|
3436
|
-
onEscape() {
|
|
3437
|
-
if (this.overlayRef && this.isMyOverlayOnTop())
|
|
3438
|
-
this.exitFullscreen();
|
|
3439
|
-
}
|
|
3440
3637
|
someColumnFilterable(columns) {
|
|
3441
3638
|
return columns.some((column) => column.isFilterableByInput === true);
|
|
3442
3639
|
}
|
|
3640
|
+
/** Busca en el texto que se ve de cada columna buscable (también números, fechas con pipe y valueGetter). */
|
|
3443
3641
|
applyInputFilter(columns, data, query) {
|
|
3444
3642
|
if (!query)
|
|
3445
3643
|
return data;
|
|
3446
3644
|
const filterableColumns = columns.filter(c => c.isFilterableByInput);
|
|
3447
|
-
return data.filter(item => filterableColumns.some(column =>
|
|
3448
|
-
const value = item[column.key];
|
|
3449
|
-
return typeof value === 'string' && includeNoSensible(value, query);
|
|
3450
|
-
}));
|
|
3645
|
+
return data.filter(item => filterableColumns.some(column => includeNoSensible(cellText(item, column), query)));
|
|
3451
3646
|
}
|
|
3452
3647
|
applySort(data, columns, sortBy) {
|
|
3453
3648
|
if (!sortBy)
|
|
@@ -3483,7 +3678,7 @@ class NgxBasicTable {
|
|
|
3483
3678
|
});
|
|
3484
3679
|
}
|
|
3485
3680
|
applyColumnFilter(data, columns, columnsFiltersValue) {
|
|
3486
|
-
if (!
|
|
3681
|
+
if (!columns.some(column => column.filterType) || !columnsFiltersValue)
|
|
3487
3682
|
return data;
|
|
3488
3683
|
columns.forEach(column => {
|
|
3489
3684
|
const columnFilterValue = columnsFiltersValue[column.key];
|
|
@@ -3501,7 +3696,7 @@ class NgxBasicTable {
|
|
|
3501
3696
|
const query = columnFilterValue;
|
|
3502
3697
|
data = data.filter(d => {
|
|
3503
3698
|
const word = (column.filterByKey?.(d) ?? d[column.key] ?? '');
|
|
3504
|
-
return includeNoSensible(word, query);
|
|
3699
|
+
return includeNoSensible(String(word), query);
|
|
3505
3700
|
});
|
|
3506
3701
|
break;
|
|
3507
3702
|
case 'option-multiple':
|
|
@@ -3548,6 +3743,24 @@ class NgxBasicTable {
|
|
|
3548
3743
|
});
|
|
3549
3744
|
return data;
|
|
3550
3745
|
}
|
|
3746
|
+
/** Lo que se pinta en una celda sin componente ni plantilla: valueGetter, o el valor con sus pipes, o «-». */
|
|
3747
|
+
displayText(row, column) {
|
|
3748
|
+
if (column.valueGetter)
|
|
3749
|
+
return column.valueGetter(row);
|
|
3750
|
+
const value = applyPipes(row[column.key], column.pipes);
|
|
3751
|
+
return value == null ? '-' : String(value);
|
|
3752
|
+
}
|
|
3753
|
+
totalsText(rows, include) {
|
|
3754
|
+
const totals = {};
|
|
3755
|
+
for (const column of this.config()().columns.filter(include)) {
|
|
3756
|
+
const total = sumColumn(rows, column.key);
|
|
3757
|
+
const text = column.pipes
|
|
3758
|
+
? applyPipes(total, column.pipes)
|
|
3759
|
+
: column.totalFooterFormatter ? column.totalFooterFormatter(total) : total;
|
|
3760
|
+
totals[this.getKeyAsString(column.key)] = String(text ?? '');
|
|
3761
|
+
}
|
|
3762
|
+
return totals;
|
|
3763
|
+
}
|
|
3551
3764
|
onToggleFullScreen() {
|
|
3552
3765
|
if (this.isFullScreen())
|
|
3553
3766
|
this.exitFullscreen();
|
|
@@ -3562,30 +3775,20 @@ class NgxBasicTable {
|
|
|
3562
3775
|
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
3563
3776
|
positionStrategy: this.overlay.position().global().top('0').left('0').right('0').bottom('0'),
|
|
3564
3777
|
});
|
|
3565
|
-
|
|
3566
|
-
this.overlayRef.
|
|
3778
|
+
// Escape solo llega a este overlay cuando es el de más arriba (no si hay un diálogo encima)
|
|
3779
|
+
this.overlayRef.keydownEvents()
|
|
3780
|
+
.pipe(filter(event => event.key === 'Escape'), takeUntilDestroyed(this._destroyRef))
|
|
3781
|
+
.subscribe(() => this.exitFullscreen());
|
|
3782
|
+
this.overlayRef.attach(new TemplatePortal(this.tableContentTemplate(), this.viewContainerRef));
|
|
3567
3783
|
this.isFullScreen.set(true);
|
|
3568
3784
|
}
|
|
3569
3785
|
exitFullscreen() {
|
|
3570
3786
|
if (!this.overlayRef)
|
|
3571
3787
|
return;
|
|
3572
|
-
this.overlayRef.detach();
|
|
3573
3788
|
this.overlayRef.dispose();
|
|
3574
3789
|
this.overlayRef = undefined;
|
|
3575
|
-
this.portal = undefined;
|
|
3576
3790
|
this.isFullScreen.set(false);
|
|
3577
3791
|
}
|
|
3578
|
-
isMyOverlayOnTop() {
|
|
3579
|
-
if (!this.overlayRef)
|
|
3580
|
-
return false;
|
|
3581
|
-
//Contenedor principal de overlays en el DOM
|
|
3582
|
-
const containerElement = this.overlayContainer.getContainerElement();
|
|
3583
|
-
// Los overlays se añaden como hijos dentro de este contenedor
|
|
3584
|
-
const overlays = Array.from(containerElement.children);
|
|
3585
|
-
// El último hijo es el overlay más "arriba"
|
|
3586
|
-
const topOverlay = overlays[overlays.length - 1];
|
|
3587
|
-
return topOverlay === this.overlayRef.hostElement;
|
|
3588
|
-
}
|
|
3589
3792
|
onNewClick() {
|
|
3590
3793
|
this.createClick.emit();
|
|
3591
3794
|
}
|
|
@@ -3598,10 +3801,11 @@ class NgxBasicTable {
|
|
|
3598
3801
|
this.updateClick.emit(row);
|
|
3599
3802
|
}
|
|
3600
3803
|
isRowEnabled(row) {
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
&&
|
|
3604
|
-
&& !
|
|
3804
|
+
const config = this.config()();
|
|
3805
|
+
return config.update
|
|
3806
|
+
&& config.clickOnRowForUpdate
|
|
3807
|
+
&& (!config.update.show || config.update.show(row))
|
|
3808
|
+
&& !config.update.disabled?.(row);
|
|
3605
3809
|
}
|
|
3606
3810
|
onDeleteClick(row, event) {
|
|
3607
3811
|
event.stopPropagation();
|
|
@@ -3651,146 +3855,68 @@ class NgxBasicTable {
|
|
|
3651
3855
|
rows: this.selection()
|
|
3652
3856
|
});
|
|
3653
3857
|
}
|
|
3654
|
-
|
|
3655
|
-
const config = this.config()();
|
|
3656
|
-
return config.columns.map(c => c.label);
|
|
3657
|
-
}
|
|
3658
|
-
getDocumentRows() {
|
|
3659
|
-
const config = this.config()();
|
|
3660
|
-
const columns = config.columns;
|
|
3661
|
-
const data = this.dataSource().data;
|
|
3662
|
-
return data.map(row => {
|
|
3663
|
-
if (config.mapperForExportData) {
|
|
3664
|
-
const mapped = config.mapperForExportData(row);
|
|
3665
|
-
return columns.map(c => mapped[c.key]);
|
|
3666
|
-
}
|
|
3667
|
-
return columns.map(c => row[c.key] ?? '');
|
|
3668
|
-
});
|
|
3669
|
-
}
|
|
3858
|
+
/** Exporta todos los registros filtrados, con las columnas visibles y en el orden elegido. */
|
|
3670
3859
|
exportToCsv() {
|
|
3671
|
-
|
|
3672
|
-
const title = config.title();
|
|
3673
|
-
const fileName = config.exportFileName?.() ?? title;
|
|
3674
|
-
const headers = this.getDocumentHeaders();
|
|
3675
|
-
const rows = this.getDocumentRows();
|
|
3676
|
-
const aoaData = [headers, ...rows];
|
|
3677
|
-
//const workSheet = utils.json_to_sheet(data);
|
|
3678
|
-
const workSheet = utils.aoa_to_sheet(aoaData);
|
|
3679
|
-
const workBook = utils.book_new();
|
|
3680
|
-
//El nombre de la hoja no puede exceder de 31 caracteres
|
|
3681
|
-
const name = title.substring(0, 31);
|
|
3682
|
-
utils.book_append_sheet(workBook, workSheet, name);
|
|
3683
|
-
writeFileXLSX(workBook, `${fileName}.xlsx`);
|
|
3860
|
+
exportToXlsx(this.exportOptions());
|
|
3684
3861
|
}
|
|
3685
3862
|
exportToPdf() {
|
|
3863
|
+
exportToPdf(this.exportOptions());
|
|
3864
|
+
}
|
|
3865
|
+
exportOptions() {
|
|
3686
3866
|
const config = this.config()();
|
|
3687
3867
|
const title = config.title();
|
|
3688
|
-
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
doc.text(title, 40, 40);
|
|
3698
|
-
autoTable(doc, {
|
|
3699
|
-
startY: 60,
|
|
3700
|
-
head: [headers],
|
|
3701
|
-
body: rows,
|
|
3702
|
-
styles: { fontSize: 9, cellPadding: 4 },
|
|
3703
|
-
headStyles: { fillColor: [192, 0, 28], textColor: 255 },
|
|
3704
|
-
alternateRowStyles: { fillColor: [245, 245, 245] },
|
|
3705
|
-
tableLineColor: [200, 200, 200],
|
|
3706
|
-
tableLineWidth: 0.1,
|
|
3707
|
-
});
|
|
3708
|
-
doc.save(`${fileName}.pdf`);
|
|
3868
|
+
return {
|
|
3869
|
+
title,
|
|
3870
|
+
fileName: config.exportFileName?.() ?? title,
|
|
3871
|
+
columns: visibleColumns(config.columns, this.columnConfig()),
|
|
3872
|
+
rows: this.filteredData(),
|
|
3873
|
+
mapper: config.mapperForExportData,
|
|
3874
|
+
pdf: config.pdfConfig,
|
|
3875
|
+
host: this._host.nativeElement,
|
|
3876
|
+
};
|
|
3709
3877
|
}
|
|
3710
3878
|
onQueryChange(inputElement) {
|
|
3711
3879
|
const query = inputElement.value;
|
|
3712
|
-
this.
|
|
3713
|
-
|
|
3714
|
-
//Hay que ver el tema del paginador si hay que volver a la pagina 1
|
|
3715
|
-
return { ...value, query: query };
|
|
3716
|
-
});
|
|
3880
|
+
this.queryText.set(query);
|
|
3881
|
+
this.filters().update((value) => ({ ...value, query: query }));
|
|
3717
3882
|
}
|
|
3718
3883
|
onQueryReset(inputElement) {
|
|
3719
3884
|
inputElement.value = '';
|
|
3720
3885
|
this.onQueryChange(inputElement);
|
|
3886
|
+
inputElement.focus();
|
|
3721
3887
|
}
|
|
3722
3888
|
onSortChange(sort) {
|
|
3723
3889
|
this.filters().update(value => {
|
|
3724
3890
|
return {
|
|
3725
3891
|
...value,
|
|
3726
|
-
//pageNumber: 1,
|
|
3727
3892
|
sortBy: sort.direction ? { key: sort.active, direction: sort.direction } : undefined
|
|
3728
3893
|
};
|
|
3729
3894
|
});
|
|
3730
3895
|
}
|
|
3731
3896
|
toggleAllPageRowSelection() {
|
|
3732
|
-
const records = this.
|
|
3733
|
-
|
|
3897
|
+
const records = this.pageRows();
|
|
3898
|
+
const primaryKey = this.config()().primaryKey;
|
|
3899
|
+
const pageKeys = new Set(records.map(row => rowKeyOf(row, primaryKey)));
|
|
3900
|
+
if (this.allPageSelected()) {
|
|
3734
3901
|
//Deseleccionar todas las filas de la página actual
|
|
3735
|
-
this.selection.update(
|
|
3736
|
-
return recordsSelected.filter(record => !records.some(row2 => this.areEqualByKeys(record, row2)));
|
|
3737
|
-
});
|
|
3902
|
+
this.selection.update(selected => selected.filter(row => !pageKeys.has(rowKeyOf(row, primaryKey))));
|
|
3738
3903
|
}
|
|
3739
3904
|
else {
|
|
3740
3905
|
//Seleccionar todas las filas visibles que aún no estén seleccionadas
|
|
3741
3906
|
const notSelected = records.filter(record => !this.isRowSelected(record));
|
|
3742
|
-
this.selection.update(
|
|
3743
|
-
// Evitar duplicados por si ya hay seleccionadas
|
|
3744
|
-
const nuevas = notSelected.filter(row => !recordsSelected.some(sel => this.areEqualByKeys(sel, row)));
|
|
3745
|
-
return [...recordsSelected, ...nuevas];
|
|
3746
|
-
});
|
|
3907
|
+
this.selection.update(selected => [...selected, ...notSelected]);
|
|
3747
3908
|
}
|
|
3748
3909
|
}
|
|
3749
|
-
isAllPageRowSelected() {
|
|
3750
|
-
const records = this.getDataOfCurrentPage();
|
|
3751
|
-
//Sin registros no hay nada seleccionado (every sobre un array vacio devuelve true)
|
|
3752
|
-
return records.length > 0 && records.every(record => this.isRowSelected(record));
|
|
3753
|
-
}
|
|
3754
|
-
areEqualByKeys(record1, record2) {
|
|
3755
|
-
const primaryKey = this.config()().primaryKey;
|
|
3756
|
-
if (Array.isArray(primaryKey))
|
|
3757
|
-
return primaryKey.every(key => record1[key] === record2[key]);
|
|
3758
|
-
else
|
|
3759
|
-
return record1[primaryKey] === record2[primaryKey];
|
|
3760
|
-
}
|
|
3761
3910
|
isRowSelected(row) {
|
|
3762
|
-
return this.
|
|
3911
|
+
return this._selectedKeys().has(rowKeyOf(row, this.config()().primaryKey));
|
|
3763
3912
|
}
|
|
3764
3913
|
toggleRowSelection(row) {
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
this.selection.update(recordsSelected => [...recordsSelected, row]);
|
|
3772
|
-
}
|
|
3773
|
-
}
|
|
3774
|
-
applyColumnPipes(value, pipes) {
|
|
3775
|
-
if (!pipes)
|
|
3776
|
-
return value;
|
|
3777
|
-
const pipesArray = Array.isArray(pipes) ? pipes : [pipes];
|
|
3778
|
-
return pipesArray.reduce((v, p) => p.pipe.transform(v, ...(p.args || [])), value);
|
|
3779
|
-
}
|
|
3780
|
-
getTotalPerPageOfColum(columnKey) {
|
|
3781
|
-
const dataOfCurrentPage = this.getDataOfCurrentPage();
|
|
3782
|
-
return dataOfCurrentPage.reduce((previous, item) => (previous + Number(item[columnKey])), 0);
|
|
3783
|
-
}
|
|
3784
|
-
getDataOfCurrentPage() {
|
|
3785
|
-
const paginator = this.dataSource().paginator;
|
|
3786
|
-
if (!paginator)
|
|
3787
|
-
return [];
|
|
3788
|
-
const startIndex = paginator.pageIndex * paginator.pageSize;
|
|
3789
|
-
const endIndex = startIndex + paginator.pageSize;
|
|
3790
|
-
return this.dataSource().data.slice(startIndex, endIndex);
|
|
3791
|
-
}
|
|
3792
|
-
getTotalOfColum(columnKey) {
|
|
3793
|
-
return this.dataSource().data.reduce((previous, item) => (previous + Number(item[columnKey])), 0);
|
|
3914
|
+
const primaryKey = this.config()().primaryKey;
|
|
3915
|
+
const key = rowKeyOf(row, primaryKey);
|
|
3916
|
+
if (this.isRowSelected(row))
|
|
3917
|
+
this.selection.update(selected => selected.filter(record => rowKeyOf(record, primaryKey) !== key));
|
|
3918
|
+
else
|
|
3919
|
+
this.selection.update(selected => [...selected, row]);
|
|
3794
3920
|
}
|
|
3795
3921
|
getValueOfColumnFilter(key) {
|
|
3796
3922
|
return this.filters()().columnsFiltersValue?.[key];
|
|
@@ -3843,18 +3969,19 @@ class NgxBasicTable {
|
|
|
3843
3969
|
};
|
|
3844
3970
|
});
|
|
3845
3971
|
}
|
|
3972
|
+
/** Por clave y no por referencia: el detalle sigue abierto si los datos se recargan. */
|
|
3846
3973
|
rowIsExpanded(row) {
|
|
3847
|
-
|
|
3974
|
+
const expanded = this.expandedItem();
|
|
3975
|
+
const primaryKey = this.config()().primaryKey;
|
|
3976
|
+
return expanded != null && rowKeyOf(expanded, primaryKey) === rowKeyOf(row, primaryKey);
|
|
3848
3977
|
}
|
|
3849
3978
|
expandableToggle(row) {
|
|
3850
|
-
this.
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
return newValue;
|
|
3854
|
-
});
|
|
3979
|
+
const newValue = this.rowIsExpanded(row) ? null : row;
|
|
3980
|
+
this.expandedItem.set(newValue);
|
|
3981
|
+
this.expandedItemChange.emit(newValue);
|
|
3855
3982
|
}
|
|
3856
3983
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3857
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicTable, isStandalone: true, selector: "ngx-basic-table", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, queryFilter: { classPropertyName: "queryFilter", publicName: "queryFilter", isSignal: true, isRequired: false, transformFunction: null }, moreFilters: { classPropertyName: "moreFilters", publicName: "moreFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n <div class=\"headerContainer\">\r\n <div class=\"titleAndButtonContainer\">\r\n <p class=\"title\">{{ config()().title() }}</p>\r\n <div class=\"buttonContainer\">\r\n @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"config()().create?.tooltip?.() ?? texts().table.create\" \r\n [disabled]=\"config()().create?.disabled?.()\" \r\n class=\"newButtonIcon\"\r\n (click)=\"onNewClick()\">\r\n <mat-icon>add_circle</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().hideColumnConfig?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.editColumns\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n <mat-icon>table_edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(selection().length > 0) {\r\n @if(getRowSelectionAction().length > 0) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().table.selectionActions\"\r\n [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n <mat-icon>event_list</mat-icon>\r\n </button>\r\n\r\n <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n <span>{{ texts().table.deselectAll }}</span>\r\n </button>\r\n\r\n @for (action of getRowSelectionAction(); track $index) {\r\n <button mat-menu-item (click)=\"onRowSelectionActionClick(action.id)\">\r\n <mat-icon>{{action.icon}}</mat-icon>\r\n <span>{{action.label(selection(), selection().length)}}</span>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().table.deselectAll\"\r\n (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n }\r\n }\r\n\r\n @if(config()().hideExportData?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.export\" [matMenuTriggerFor]=\"exportMenu\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon>csv</mat-icon>\r\n <span>{{ texts().table.exportExcel }}</span>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"exportToPdf()\">\r\n <mat-icon>picture_as_pdf</mat-icon>\r\n <span>{{ texts().table.exportPdf }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button matIconButton [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\" (click)=\"onToggleFullScreen()\">\r\n <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n </button>\r\n }\r\n\r\n <ng-content select=\"[icon-buttons]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filterContainer\">\r\n <div class=\"moreFiltersContainer\">\r\n <ng-content select=\"[more-filters]\"></ng-content>\r\n </div>\r\n\r\n @if(showQueryFilter()) {\r\n <mat-form-field subscriptSizing=\"dynamic\">\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? texts().common.search\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n </div>\r\n\r\n <ng-content select=\"[extra-header-content]\"></ng-content>\r\n </div>\r\n\r\n <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n <table\r\n mat-table \r\n matSort\r\n [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n [dataSource]=\"dataSource()\" \r\n [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n (matSortChange)=\"onSortChange($event)\">\r\n\r\n @if(config()().enableRowSelection) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n </ng-container>\r\n } \r\n\r\n <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox \r\n class=\"headerCheckbox\"\r\n (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n <mat-checkbox\r\n (change)=\"$event ? toggleRowSelection(row) : null\"\r\n [checked]=\"isRowSelected(row)\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"getKeyAsString(column.key)\" \r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n <p class=\"headerTitle\">\r\n @if(stickyColumnKey() == column.key && isDesktop()) {\r\n <mat-icon>keep</mat-icon>\r\n }\r\n {{ column.label }}\r\n </p>\r\n </th>\r\n\r\n <td \r\n mat-cell \r\n *matCellDef=\"let row\" \r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.style\"\r\n class=\"celdaDatos\">\r\n\r\n @if(column.component) {\r\n <ng-container \r\n ngxDynamicCellHost\r\n [component]=\"column.component\"\r\n [row]=\"row\"\r\n [key]=\"column.key\" />\r\n } @else if(column.templateRef) {\r\n <ng-container \r\n *ngTemplateOutlet=\"column.templateRef(); \r\n context: { $implicit: row }\" />\r\n } @else if(column.valueGetter) {\r\n {{ column.valueGetter(row) }}\r\n } @else {\r\n {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n }\r\n </td>\r\n \r\n <td\r\n mat-footer-cell \r\n *matFooterCellDef\r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.footerStyle\">\r\n\r\n @if(column.showTotalPerPage) {\r\n @if(column.pipes) {\r\n {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n } @else if(column.totalFooterFormatter) {\r\n {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n } @else {\r\n {{ getTotalPerPageOfColum(column.key) }}\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n @if(column.showTotalGeneral) {\r\n @if(column.pipes) {\r\n {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n } @else if(column.totalFooterFormatter) {\r\n {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n } @else {\r\n {{ getTotalOfColum(column.key) }}\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showFiltersRow()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (column.filterType == 'text' || column.filterType == 'number') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n @if(column.endpointForPaginatedFilterOptions) {\r\n <ngx-paginated-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n clearableOptionLabel=\"filtro\"\r\n />\r\n } @else {\r\n <ngx-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n [options]=\"column.filterOptions ?? []\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n clearableOptionLabel=\"filtro\"\r\n />\r\n } \r\n }\r\n \r\n @if(column.filterType == 'date') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <input \r\n matInput \r\n [matDatepicker]=\"picker\" \r\n [placeholder]=\"column.label\"\r\n [value]=\"getValueOfColumnFilter(column.key)\"\r\n (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n\r\n @if(column.filterType == 'date-range') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n <input \r\n matStartDate \r\n [placeholder]=\"texts().table.dateRangeStart\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input \r\n matEndDate \r\n [placeholder]=\"texts().table.dateRangeEnd\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n }\r\n </th>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showActionsColumn()) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n </ng-container>\r\n } \r\n\r\n <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>{{ texts().table.actions }}</th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n <div class=\"contenedorCeldaAcciones\">\r\n @if(config()().expandableDetail) {\r\n <button \r\n matIconButton\r\n (click)=\"expandableToggle(row)\">\r\n <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (rowAction of config()().rowActions; track $index) {\r\n @if(!rowAction.show || rowAction.show(row)) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"rowAction.tooltip(row)\" \r\n [disabled]=\"rowAction.disabled?.(row)\" \r\n [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n <mat-icon>{{rowAction.icon}}</mat-icon>\r\n </button>\r\n } \r\n }\r\n\r\n @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n <button \r\n matIconButton\r\n [matTooltip]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\" \r\n [disabled]=\"config()().update?.disabled?.(row)\" \r\n class=\"editButtonIcon\"\r\n (click)=\"onUpdateClick(row, $event)\">\r\n <mat-icon>edit_square</mat-icon>\r\n </button>\r\n }\r\n \r\n @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\" \r\n [disabled]=\"config()().delete?.disabled?.(row)\" \r\n class=\"deleteButtonIcon\"\r\n (click)=\"onDeleteClick(row, $event)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(config()().expandableDetail) {\r\n <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n <div \r\n class=\"detailWrapper\"\r\n [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n <div class=\"columnDetail\">\r\n @if(config()().expandableDetailTemplateRef) {\r\n <ng-container \r\n *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n context: { $implicit: row }\" />\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n \r\n <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n \r\n @if(showFiltersRow()) {\r\n <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n }\r\n \r\n <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n (click)=\"onRowClick(row)\" \r\n [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n [class.expandableRow]=\"config()().expandableDetail\">\r\n </tr>\r\n \r\n @if(config()().expandableDetail) {\r\n <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n }\r\n\r\n <tr mat-footer-row \r\n *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n class=\"totalPerPageFooter\"\r\n [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n </tr>\r\n\r\n <tr mat-footer-row \r\n *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n class=\"totalFooter\"\r\n [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n </tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? texts().common.loading : texts().common.noData }}</td>\r\n </tr>\r\n </table>\r\n </div>\r\n\r\n <div class=\"paginatorContainer\">\r\n <div class=\"footerLegend\">\r\n @if(showTotalPerPageFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare\"></div>\r\n <p>{{ texts().table.totalPerPage }}</p> \r\n </div>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare totalGeneral\"></div>\r\n <p>{{ texts().table.totalGeneral }}</p>\r\n </div>\r\n }\r\n </div>\r\n <mat-paginator />\r\n </div>\r\n\r\n <ng-content select=\"[end-container]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i10.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i10.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i10.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
|
|
3984
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicTable, isStandalone: true, selector: "ngx-basic-table", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, queryFilter: { classPropertyName: "queryFilter", publicName: "queryFilter", isSignal: true, isRequired: false, transformFunction: null }, moreFilters: { classPropertyName: "moreFilters", publicName: "moreFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n <div class=\"headerContainer\">\r\n <div class=\"titleAndButtonContainer\">\r\n <p class=\"title\">{{ config()().title() }}</p>\r\n <div class=\"buttonContainer\">\r\n @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().create?.tooltip?.() ?? texts().table.create\"\r\n [attr.aria-label]=\"config()().create?.tooltip?.() ?? texts().table.create\" \r\n [disabled]=\"config()().create?.disabled?.()\"\r\n class=\"newButtonIcon\"\r\n (click)=\"onNewClick()\">\r\n <mat-icon>add_circle</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().hideColumnConfig?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.editColumns\" [attr.aria-label]=\"texts().table.editColumns\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n <mat-icon>table_edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(selection().length > 0) {\r\n @if(getRowSelectionAction().length > 0) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().table.selectionActions\"\r\n [attr.aria-label]=\"texts().table.selectionActions\"\r\n [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n <mat-icon>event_list</mat-icon>\r\n </button>\r\n\r\n <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n <span>{{ texts().table.deselectAll }}</span>\r\n </button>\r\n\r\n @for (action of getRowSelectionAction(); track $index) {\r\n <button mat-menu-item (click)=\"onRowSelectionActionClick(action.id)\">\r\n <mat-icon>{{action.icon}}</mat-icon>\r\n <span>{{action.label(selection(), selection().length)}}</span>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().table.deselectAll\"\r\n [attr.aria-label]=\"texts().table.deselectAll\"\r\n (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n }\r\n }\r\n\r\n @if(config()().hideExportData?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.export\" [attr.aria-label]=\"texts().table.export\" [matMenuTriggerFor]=\"exportMenu\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon>csv</mat-icon>\r\n <span>{{ texts().table.exportExcelAll }}</span>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"exportToPdf()\">\r\n <mat-icon>picture_as_pdf</mat-icon>\r\n <span>{{ texts().table.exportPdfAll }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\"\r\n [attr.aria-label]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\"\r\n [attr.aria-pressed]=\"isFullScreen()\"\r\n (click)=\"onToggleFullScreen()\">\r\n <mat-icon aria-hidden=\"true\">{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n </button>\r\n }\r\n\r\n <ng-content select=\"[icon-buttons]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filterContainer\">\r\n <div class=\"moreFiltersContainer\">\r\n <ng-content select=\"[more-filters]\"></ng-content>\r\n </div>\r\n\r\n @if(showQueryFilter()) {\r\n <mat-form-field subscriptSizing=\"dynamic\">\r\n <mat-icon matPrefix aria-hidden=\"true\">search</mat-icon>\r\n <input\r\n #queryElement\r\n matInput\r\n type=\"search\"\r\n [placeholder]=\"config()().queryFilterPlaceholder ?? texts().common.search\"\r\n [attr.aria-label]=\"config()().queryFilterPlaceholder ?? texts().common.search\"\r\n [value]=\"queryText()\"\r\n (input)=\"onQueryChange(queryElement)\">\r\n <button\r\n matIconButton\r\n matSuffix\r\n [attr.aria-label]=\"texts().common.clearSearch\"\r\n (click)=\"onQueryReset(queryElement)\"\r\n [style.visibility]=\"queryText() ? 'visible': 'hidden'\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n </div>\r\n\r\n <ng-content select=\"[extra-header-content]\"></ng-content>\r\n </div>\r\n\r\n <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n <table\r\n mat-table\r\n matSort\r\n [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n [dataSource]=\"dataSource()\"\r\n [matSortActive]=\"filters()().sortBy?.key ?? ''\"\r\n [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n (matSortChange)=\"onSortChange($event)\">\r\n\r\n @if(config()().enableRowSelection) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n </ng-container>\r\n }\r\n\r\n <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n class=\"headerCheckbox\"\r\n [aria-label]=\"texts().table.selectPage\"\r\n (change)=\"toggleAllPageRowSelection()\"\r\n [checked]=\"allPageSelected()\"\r\n [indeterminate]=\"selection().length > 0 && !allPageSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n <mat-checkbox\r\n [aria-label]=\"texts().table.selectRow\"\r\n (change)=\"toggleRowSelection(row)\"\r\n [checked]=\"isRowSelected(row)\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"getKeyAsString(column.key)\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n <p class=\"headerTitle\">\r\n @if(stickyColumnKey() == column.key && isDesktop()) {\r\n <mat-icon>keep</mat-icon>\r\n }\r\n {{ column.label }}\r\n </p>\r\n </th>\r\n\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.style\"\r\n class=\"celdaDatos\">\r\n\r\n @if(column.component) {\r\n <ng-container\r\n ngxDynamicCellHost\r\n [component]=\"column.component\"\r\n [row]=\"row\"\r\n [key]=\"column.key\" />\r\n } @else if(column.templateRef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"column.templateRef();\r\n context: { $implicit: row }\" />\r\n } @else {\r\n {{ cellTexts().get(row)?.[column.key] }}\r\n }\r\n </td>\r\n\r\n <td\r\n mat-footer-cell\r\n *matFooterCellDef\r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.footerStyle\">\r\n\r\n @if(column.showTotalPerPage) {\r\n {{ pageTotals()[getKeyAsString(column.key)] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n @if(column.showTotalGeneral) {\r\n {{ generalTotals()[getKeyAsString(column.key)] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showFiltersRow()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (column.filterType == 'text' || column.filterType == 'number') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [attr.aria-label]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n <mat-icon matSuffix aria-hidden=\"true\">{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n @if(column.endpointForPaginatedFilterOptions) {\r\n <ngx-paginated-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n [clearableOptionLabel]=\"texts().table.columnFilter\"\r\n />\r\n } @else {\r\n <ngx-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n [options]=\"column.filterOptions ?? []\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n [clearableOptionLabel]=\"texts().table.columnFilter\"\r\n />\r\n }\r\n }\r\n\r\n @if(column.filterType == 'date') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [placeholder]=\"column.label\"\r\n [value]=\"getValueOfColumnFilter(column.key)\"\r\n (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n\r\n @if(column.filterType == 'date-range') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n <input\r\n matStartDate\r\n [placeholder]=\"texts().table.dateRangeStart\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input\r\n matEndDate\r\n [placeholder]=\"texts().table.dateRangeEnd\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n }\r\n </th>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showActionsColumn()) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n </ng-container>\r\n }\r\n\r\n <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>{{ texts().table.actions }}</th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n <div class=\"contenedorCeldaAcciones\">\r\n @if(config()().expandableDetail) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"rowIsExpanded(row) ? texts().table.collapseRow : texts().table.expandRow\"\r\n [attr.aria-label]=\"rowIsExpanded(row) ? texts().table.collapseRow : texts().table.expandRow\"\r\n [attr.aria-expanded]=\"rowIsExpanded(row)\"\r\n (click)=\"expandableToggle(row)\">\r\n <mat-icon class=\"expandIcon\" [class.expandIcon--open]=\"rowIsExpanded(row)\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (rowAction of config()().rowActions; track $index) {\r\n @if(!rowAction.show || rowAction.show(row)) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"rowAction.tooltip(row)\"\r\n [attr.aria-label]=\"rowAction.tooltip(row)\"\r\n [disabled]=\"rowAction.disabled?.(row)\"\r\n [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n <mat-icon>{{rowAction.icon}}</mat-icon>\r\n </button>\r\n }\r\n }\r\n\r\n @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\"\r\n [attr.aria-label]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\"\r\n [disabled]=\"config()().update?.disabled?.(row)\"\r\n class=\"editButtonIcon\"\r\n (click)=\"onUpdateClick(row, $event)\">\r\n <mat-icon>edit_square</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\"\r\n [attr.aria-label]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\"\r\n [disabled]=\"config()().delete?.disabled?.(row)\"\r\n class=\"deleteButtonIcon\"\r\n (click)=\"onDeleteClick(row, $event)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(config()().expandableDetail) {\r\n <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n <div\r\n class=\"detailWrapper\"\r\n [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n <div class=\"columnDetail\">\r\n @if(config()().expandableDetailTemplateRef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!();\r\n context: { $implicit: row }\" />\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n\r\n @if(showFiltersRow()) {\r\n <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: keys();\"\r\n (click)=\"onRowClick(row)\"\r\n (keydown.enter)=\"onRowClick(row)\"\r\n [attr.tabindex]=\"isRowEnabled(row) ? 0 : null\"\r\n [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n [class.rowSelected]=\"isRowSelected(row)\"\r\n [class.expandableRow]=\"config()().expandableDetail\">\r\n </tr>\r\n\r\n @if(config()().expandableDetail) {\r\n <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n }\r\n\r\n <tr mat-footer-row\r\n *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\"\r\n class=\"totalPerPageFooter\"\r\n [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n </tr>\r\n\r\n <tr mat-footer-row\r\n *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\"\r\n class=\"totalFooter\"\r\n [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n </tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? texts().common.loading : texts().common.noData }}</td>\r\n </tr>\r\n </table>\r\n </div>\r\n\r\n <div class=\"paginatorContainer\">\r\n <div class=\"footerLegend\">\r\n @if(showTotalPerPageFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare\"></div>\r\n <p>{{ texts().table.totalPerPage }}</p>\r\n </div>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare totalGeneral\"></div>\r\n <p>{{ texts().table.totalGeneral }}</p>\r\n </div>\r\n }\r\n </div>\r\n <mat-paginator />\r\n </div>\r\n\r\n <ng-content select=\"[end-container]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [":host{display:block;border-radius:16px;background:var(--mat-sys-surface);box-shadow:var(--mat-sys-level1);--ngx-table-edit-color: var(--warning, #e6a700);--ngx-table-delete-color: var(--mat-sys-error);--ngx-table-action-yellow: #d4b800;--ngx-table-action-orange: #f57c00;--ngx-table-action-pink: #e91e63;--ngx-table-action-purple: #8e24aa;--ngx-table-action-green: var(--success, #2e7d32);--ngx-table-action-blue: var(--information, #0277bd);--ngx-table-action-sky: #00acc1;--ngx-table-action-brown: #795548}.tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0}.headerContainer{display:flex;flex-direction:column;gap:10px}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.filterContainer{display:flex;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-edit-color) 72%, var(--mat-sys-on-surface))}.deleteButtonIcon{--mat-icon-button-icon-color: var(--ngx-table-delete-color)}.rowActionIconColorYellow{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-yellow) 72%, var(--mat-sys-on-surface))}.rowActionIconColorOrange{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-orange) 72%, var(--mat-sys-on-surface))}.rowActionIconColorPink{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-pink) 72%, var(--mat-sys-on-surface))}.rowActionIconColorPurple{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-purple) 72%, var(--mat-sys-on-surface))}.rowActionIconColorGreen{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-green) 72%, var(--mat-sys-on-surface))}.rowActionIconColorBlue{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-blue) 72%, var(--mat-sys-on-surface))}.rowActionIconColorBrown{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-brown) 72%, var(--mat-sys-on-surface))}.rowActionIconColorSky{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-sky) 72%, var(--mat-sys-on-surface))}.noData{padding:24px;color:var(--mat-sys-on-surface-variant)}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px;margin:0}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos,.celdaAcciones,.celdaSelection,.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.rowSelected>.celdaDatos,.rowSelected>.celdaAcciones,.rowSelected>.celdaSelection,.rowSelected>.columnSticky{background-color:var(--mat-sys-secondary-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.expandIcon{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expandIcon--open{transform:rotate(180deg)}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i10.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i10.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i10.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
|
|
3858
3985
|
}
|
|
3859
3986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, decorators: [{
|
|
3860
3987
|
type: Component,
|
|
@@ -3877,11 +4004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3877
4004
|
MatCheckboxModule,
|
|
3878
4005
|
SearchableSelectComponent,
|
|
3879
4006
|
PaginatedSearchableSelectComponent
|
|
3880
|
-
], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n <div class=\"headerContainer\">\r\n <div class=\"titleAndButtonContainer\">\r\n <p class=\"title\">{{ config()().title() }}</p>\r\n <div class=\"buttonContainer\">\r\n @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"config()().create?.tooltip?.() ?? texts().table.create\" \r\n [disabled]=\"config()().create?.disabled?.()\" \r\n class=\"newButtonIcon\"\r\n (click)=\"onNewClick()\">\r\n <mat-icon>add_circle</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().hideColumnConfig?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.editColumns\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n <mat-icon>table_edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(selection().length > 0) {\r\n @if(getRowSelectionAction().length > 0) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().table.selectionActions\"\r\n [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n <mat-icon>event_list</mat-icon>\r\n </button>\r\n\r\n <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n <span>{{ texts().table.deselectAll }}</span>\r\n </button>\r\n\r\n @for (action of getRowSelectionAction(); track $index) {\r\n <button mat-menu-item (click)=\"onRowSelectionActionClick(action.id)\">\r\n <mat-icon>{{action.icon}}</mat-icon>\r\n <span>{{action.label(selection(), selection().length)}}</span>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"texts().table.deselectAll\"\r\n (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n }\r\n }\r\n\r\n @if(config()().hideExportData?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.export\" [matMenuTriggerFor]=\"exportMenu\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon>csv</mat-icon>\r\n <span>{{ texts().table.exportExcel }}</span>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"exportToPdf()\">\r\n <mat-icon>picture_as_pdf</mat-icon>\r\n <span>{{ texts().table.exportPdf }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button matIconButton [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\" (click)=\"onToggleFullScreen()\">\r\n <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n </button>\r\n }\r\n\r\n <ng-content select=\"[icon-buttons]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filterContainer\">\r\n <div class=\"moreFiltersContainer\">\r\n <ng-content select=\"[more-filters]\"></ng-content>\r\n </div>\r\n\r\n @if(showQueryFilter()) {\r\n <mat-form-field subscriptSizing=\"dynamic\">\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? texts().common.search\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n </div>\r\n\r\n <ng-content select=\"[extra-header-content]\"></ng-content>\r\n </div>\r\n\r\n <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n <table\r\n mat-table \r\n matSort\r\n [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n [dataSource]=\"dataSource()\" \r\n [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n (matSortChange)=\"onSortChange($event)\">\r\n\r\n @if(config()().enableRowSelection) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n </ng-container>\r\n } \r\n\r\n <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox \r\n class=\"headerCheckbox\"\r\n (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n <mat-checkbox\r\n (change)=\"$event ? toggleRowSelection(row) : null\"\r\n [checked]=\"isRowSelected(row)\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"getKeyAsString(column.key)\" \r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n <p class=\"headerTitle\">\r\n @if(stickyColumnKey() == column.key && isDesktop()) {\r\n <mat-icon>keep</mat-icon>\r\n }\r\n {{ column.label }}\r\n </p>\r\n </th>\r\n\r\n <td \r\n mat-cell \r\n *matCellDef=\"let row\" \r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.style\"\r\n class=\"celdaDatos\">\r\n\r\n @if(column.component) {\r\n <ng-container \r\n ngxDynamicCellHost\r\n [component]=\"column.component\"\r\n [row]=\"row\"\r\n [key]=\"column.key\" />\r\n } @else if(column.templateRef) {\r\n <ng-container \r\n *ngTemplateOutlet=\"column.templateRef(); \r\n context: { $implicit: row }\" />\r\n } @else if(column.valueGetter) {\r\n {{ column.valueGetter(row) }}\r\n } @else {\r\n {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n }\r\n </td>\r\n \r\n <td\r\n mat-footer-cell \r\n *matFooterCellDef\r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.footerStyle\">\r\n\r\n @if(column.showTotalPerPage) {\r\n @if(column.pipes) {\r\n {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n } @else if(column.totalFooterFormatter) {\r\n {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n } @else {\r\n {{ getTotalPerPageOfColum(column.key) }}\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n @if(column.showTotalGeneral) {\r\n @if(column.pipes) {\r\n {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n } @else if(column.totalFooterFormatter) {\r\n {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n } @else {\r\n {{ getTotalOfColum(column.key) }}\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showFiltersRow()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container \r\n [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (column.filterType == 'text' || column.filterType == 'number') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n @if(column.endpointForPaginatedFilterOptions) {\r\n <ngx-paginated-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n clearableOptionLabel=\"filtro\"\r\n />\r\n } @else {\r\n <ngx-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n [options]=\"column.filterOptions ?? []\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n clearableOptionLabel=\"filtro\"\r\n />\r\n } \r\n }\r\n \r\n @if(column.filterType == 'date') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <input \r\n matInput \r\n [matDatepicker]=\"picker\" \r\n [placeholder]=\"column.label\"\r\n [value]=\"getValueOfColumnFilter(column.key)\"\r\n (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n\r\n @if(column.filterType == 'date-range') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n <input \r\n matStartDate \r\n [placeholder]=\"texts().table.dateRangeStart\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input \r\n matEndDate \r\n [placeholder]=\"texts().table.dateRangeEnd\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n }\r\n </th>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showActionsColumn()) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n </ng-container>\r\n } \r\n\r\n <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>{{ texts().table.actions }}</th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n <div class=\"contenedorCeldaAcciones\">\r\n @if(config()().expandableDetail) {\r\n <button \r\n matIconButton\r\n (click)=\"expandableToggle(row)\">\r\n <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (rowAction of config()().rowActions; track $index) {\r\n @if(!rowAction.show || rowAction.show(row)) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"rowAction.tooltip(row)\" \r\n [disabled]=\"rowAction.disabled?.(row)\" \r\n [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n <mat-icon>{{rowAction.icon}}</mat-icon>\r\n </button>\r\n } \r\n }\r\n\r\n @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n <button \r\n matIconButton\r\n [matTooltip]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\" \r\n [disabled]=\"config()().update?.disabled?.(row)\" \r\n class=\"editButtonIcon\"\r\n (click)=\"onUpdateClick(row, $event)\">\r\n <mat-icon>edit_square</mat-icon>\r\n </button>\r\n }\r\n \r\n @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\" \r\n [disabled]=\"config()().delete?.disabled?.(row)\" \r\n class=\"deleteButtonIcon\"\r\n (click)=\"onDeleteClick(row, $event)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(config()().expandableDetail) {\r\n <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n <div \r\n class=\"detailWrapper\"\r\n [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n <div class=\"columnDetail\">\r\n @if(config()().expandableDetailTemplateRef) {\r\n <ng-container \r\n *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n context: { $implicit: row }\" />\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n \r\n <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n \r\n @if(showFiltersRow()) {\r\n <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n }\r\n \r\n <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n (click)=\"onRowClick(row)\" \r\n [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n [class.expandableRow]=\"config()().expandableDetail\">\r\n </tr>\r\n \r\n @if(config()().expandableDetail) {\r\n <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n }\r\n\r\n <tr mat-footer-row \r\n *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n class=\"totalPerPageFooter\"\r\n [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n </tr>\r\n\r\n <tr mat-footer-row \r\n *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n class=\"totalFooter\"\r\n [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n </tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? texts().common.loading : texts().common.noData }}</td>\r\n </tr>\r\n </table>\r\n </div>\r\n\r\n <div class=\"paginatorContainer\">\r\n <div class=\"footerLegend\">\r\n @if(showTotalPerPageFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare\"></div>\r\n <p>{{ texts().table.totalPerPage }}</p> \r\n </div>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare totalGeneral\"></div>\r\n <p>{{ texts().table.totalGeneral }}</p>\r\n </div>\r\n }\r\n </div>\r\n <mat-paginator />\r\n </div>\r\n\r\n <ng-content select=\"[end-container]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
|
|
3881
|
-
}], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], queryFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryFilter", required: false }] }], moreFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreFilters", required: false }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }],
|
|
3882
|
-
type: HostListener,
|
|
3883
|
-
args: ['document:keydown.escape']
|
|
3884
|
-
}] } });
|
|
4007
|
+
], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n <div class=\"headerContainer\">\r\n <div class=\"titleAndButtonContainer\">\r\n <p class=\"title\">{{ config()().title() }}</p>\r\n <div class=\"buttonContainer\">\r\n @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().create?.tooltip?.() ?? texts().table.create\"\r\n [attr.aria-label]=\"config()().create?.tooltip?.() ?? texts().table.create\" \r\n [disabled]=\"config()().create?.disabled?.()\"\r\n class=\"newButtonIcon\"\r\n (click)=\"onNewClick()\">\r\n <mat-icon>add_circle</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().hideColumnConfig?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.editColumns\" [attr.aria-label]=\"texts().table.editColumns\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n <mat-icon>table_edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(selection().length > 0) {\r\n @if(getRowSelectionAction().length > 0) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().table.selectionActions\"\r\n [attr.aria-label]=\"texts().table.selectionActions\"\r\n [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n <mat-icon>event_list</mat-icon>\r\n </button>\r\n\r\n <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n <span>{{ texts().table.deselectAll }}</span>\r\n </button>\r\n\r\n @for (action of getRowSelectionAction(); track $index) {\r\n <button mat-menu-item (click)=\"onRowSelectionActionClick(action.id)\">\r\n <mat-icon>{{action.icon}}</mat-icon>\r\n <span>{{action.label(selection(), selection().length)}}</span>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"texts().table.deselectAll\"\r\n [attr.aria-label]=\"texts().table.deselectAll\"\r\n (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n }\r\n }\r\n\r\n @if(config()().hideExportData?.() !== true) {\r\n <button matIconButton [matTooltip]=\"texts().table.export\" [attr.aria-label]=\"texts().table.export\" [matMenuTriggerFor]=\"exportMenu\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon>csv</mat-icon>\r\n <span>{{ texts().table.exportExcelAll }}</span>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"exportToPdf()\">\r\n <mat-icon>picture_as_pdf</mat-icon>\r\n <span>{{ texts().table.exportPdfAll }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\"\r\n [attr.aria-label]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\"\r\n [attr.aria-pressed]=\"isFullScreen()\"\r\n (click)=\"onToggleFullScreen()\">\r\n <mat-icon aria-hidden=\"true\">{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n </button>\r\n }\r\n\r\n <ng-content select=\"[icon-buttons]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filterContainer\">\r\n <div class=\"moreFiltersContainer\">\r\n <ng-content select=\"[more-filters]\"></ng-content>\r\n </div>\r\n\r\n @if(showQueryFilter()) {\r\n <mat-form-field subscriptSizing=\"dynamic\">\r\n <mat-icon matPrefix aria-hidden=\"true\">search</mat-icon>\r\n <input\r\n #queryElement\r\n matInput\r\n type=\"search\"\r\n [placeholder]=\"config()().queryFilterPlaceholder ?? texts().common.search\"\r\n [attr.aria-label]=\"config()().queryFilterPlaceholder ?? texts().common.search\"\r\n [value]=\"queryText()\"\r\n (input)=\"onQueryChange(queryElement)\">\r\n <button\r\n matIconButton\r\n matSuffix\r\n [attr.aria-label]=\"texts().common.clearSearch\"\r\n (click)=\"onQueryReset(queryElement)\"\r\n [style.visibility]=\"queryText() ? 'visible': 'hidden'\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n </div>\r\n\r\n <ng-content select=\"[extra-header-content]\"></ng-content>\r\n </div>\r\n\r\n <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n <table\r\n mat-table\r\n matSort\r\n [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n [dataSource]=\"dataSource()\"\r\n [matSortActive]=\"filters()().sortBy?.key ?? ''\"\r\n [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n (matSortChange)=\"onSortChange($event)\">\r\n\r\n @if(config()().enableRowSelection) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n </ng-container>\r\n }\r\n\r\n <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox\r\n class=\"headerCheckbox\"\r\n [aria-label]=\"texts().table.selectPage\"\r\n (change)=\"toggleAllPageRowSelection()\"\r\n [checked]=\"allPageSelected()\"\r\n [indeterminate]=\"selection().length > 0 && !allPageSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n <mat-checkbox\r\n [aria-label]=\"texts().table.selectRow\"\r\n (change)=\"toggleRowSelection(row)\"\r\n [checked]=\"isRowSelected(row)\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"getKeyAsString(column.key)\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n <p class=\"headerTitle\">\r\n @if(stickyColumnKey() == column.key && isDesktop()) {\r\n <mat-icon>keep</mat-icon>\r\n }\r\n {{ column.label }}\r\n </p>\r\n </th>\r\n\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.style\"\r\n class=\"celdaDatos\">\r\n\r\n @if(column.component) {\r\n <ng-container\r\n ngxDynamicCellHost\r\n [component]=\"column.component\"\r\n [row]=\"row\"\r\n [key]=\"column.key\" />\r\n } @else if(column.templateRef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"column.templateRef();\r\n context: { $implicit: row }\" />\r\n } @else {\r\n {{ cellTexts().get(row)?.[column.key] }}\r\n }\r\n </td>\r\n\r\n <td\r\n mat-footer-cell\r\n *matFooterCellDef\r\n [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n [style]=\"column.footerStyle\">\r\n\r\n @if(column.showTotalPerPage) {\r\n {{ pageTotals()[getKeyAsString(column.key)] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n @if(column.showTotalGeneral) {\r\n {{ generalTotals()[getKeyAsString(column.key)] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showFiltersRow()) {\r\n @for (column of config()().columns; track $index) {\r\n <ng-container\r\n [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (column.filterType == 'text' || column.filterType == 'number') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [attr.aria-label]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n <mat-icon matSuffix aria-hidden=\"true\">{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n @if(column.endpointForPaginatedFilterOptions) {\r\n <ngx-paginated-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n [clearableOptionLabel]=\"texts().table.columnFilter\"\r\n />\r\n } @else {\r\n <ngx-searchable-select\r\n class=\"selectColumn\"\r\n [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n [options]=\"column.filterOptions ?? []\"\r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n subscriptSizing=\"dynamic\"\r\n [selectPlaceholder]=\"column.label\"\r\n (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n [clearableOptionLabel]=\"texts().table.columnFilter\"\r\n />\r\n }\r\n }\r\n\r\n @if(column.filterType == 'date') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [placeholder]=\"column.label\"\r\n [value]=\"getValueOfColumnFilter(column.key)\"\r\n (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n\r\n @if(column.filterType == 'date-range') {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n <input\r\n matStartDate\r\n [placeholder]=\"texts().table.dateRangeStart\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input\r\n matEndDate\r\n [placeholder]=\"texts().table.dateRangeEnd\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n }\r\n </th>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(showActionsColumn()) {\r\n @if(showFiltersRow()) {\r\n <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n </ng-container>\r\n }\r\n\r\n <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n <th mat-header-cell *matHeaderCellDef>{{ texts().table.actions }}</th>\r\n <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n <div class=\"contenedorCeldaAcciones\">\r\n @if(config()().expandableDetail) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"rowIsExpanded(row) ? texts().table.collapseRow : texts().table.expandRow\"\r\n [attr.aria-label]=\"rowIsExpanded(row) ? texts().table.collapseRow : texts().table.expandRow\"\r\n [attr.aria-expanded]=\"rowIsExpanded(row)\"\r\n (click)=\"expandableToggle(row)\">\r\n <mat-icon class=\"expandIcon\" [class.expandIcon--open]=\"rowIsExpanded(row)\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (rowAction of config()().rowActions; track $index) {\r\n @if(!rowAction.show || rowAction.show(row)) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"rowAction.tooltip(row)\"\r\n [attr.aria-label]=\"rowAction.tooltip(row)\"\r\n [disabled]=\"rowAction.disabled?.(row)\"\r\n [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n <mat-icon>{{rowAction.icon}}</mat-icon>\r\n </button>\r\n }\r\n }\r\n\r\n @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\"\r\n [attr.aria-label]=\"config()().update?.tooltip?.(row) ?? texts().table.edit\"\r\n [disabled]=\"config()().update?.disabled?.(row)\"\r\n class=\"editButtonIcon\"\r\n (click)=\"onUpdateClick(row, $event)\">\r\n <mat-icon>edit_square</mat-icon>\r\n </button>\r\n }\r\n\r\n @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n <button\r\n matIconButton\r\n [matTooltip]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\"\r\n [attr.aria-label]=\"config()().delete?.tooltip?.(row) ?? texts().table.delete\"\r\n [disabled]=\"config()().delete?.disabled?.(row)\"\r\n class=\"deleteButtonIcon\"\r\n (click)=\"onDeleteClick(row, $event)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n }\r\n\r\n @if(config()().expandableDetail) {\r\n <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n <div\r\n class=\"detailWrapper\"\r\n [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n <div class=\"columnDetail\">\r\n @if(config()().expandableDetailTemplateRef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!();\r\n context: { $implicit: row }\" />\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n\r\n @if(showFiltersRow()) {\r\n <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: keys();\"\r\n (click)=\"onRowClick(row)\"\r\n (keydown.enter)=\"onRowClick(row)\"\r\n [attr.tabindex]=\"isRowEnabled(row) ? 0 : null\"\r\n [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n [class.rowSelected]=\"isRowSelected(row)\"\r\n [class.expandableRow]=\"config()().expandableDetail\">\r\n </tr>\r\n\r\n @if(config()().expandableDetail) {\r\n <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n }\r\n\r\n <tr mat-footer-row\r\n *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\"\r\n class=\"totalPerPageFooter\"\r\n [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n </tr>\r\n\r\n <tr mat-footer-row\r\n *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\"\r\n class=\"totalFooter\"\r\n [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n </tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? texts().common.loading : texts().common.noData }}</td>\r\n </tr>\r\n </table>\r\n </div>\r\n\r\n <div class=\"paginatorContainer\">\r\n <div class=\"footerLegend\">\r\n @if(showTotalPerPageFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare\"></div>\r\n <p>{{ texts().table.totalPerPage }}</p>\r\n </div>\r\n }\r\n\r\n @if(showTotalGeneralFooter()) {\r\n <div class=\"legendItem\">\r\n <div class=\"legendSquare totalGeneral\"></div>\r\n <p>{{ texts().table.totalGeneral }}</p>\r\n </div>\r\n }\r\n </div>\r\n <mat-paginator />\r\n </div>\r\n\r\n <ng-content select=\"[end-container]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [":host{display:block;border-radius:16px;background:var(--mat-sys-surface);box-shadow:var(--mat-sys-level1);--ngx-table-edit-color: var(--warning, #e6a700);--ngx-table-delete-color: var(--mat-sys-error);--ngx-table-action-yellow: #d4b800;--ngx-table-action-orange: #f57c00;--ngx-table-action-pink: #e91e63;--ngx-table-action-purple: #8e24aa;--ngx-table-action-green: var(--success, #2e7d32);--ngx-table-action-blue: var(--information, #0277bd);--ngx-table-action-sky: #00acc1;--ngx-table-action-brown: #795548}.tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0}.headerContainer{display:flex;flex-direction:column;gap:10px}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.filterContainer{display:flex;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-edit-color) 72%, var(--mat-sys-on-surface))}.deleteButtonIcon{--mat-icon-button-icon-color: var(--ngx-table-delete-color)}.rowActionIconColorYellow{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-yellow) 72%, var(--mat-sys-on-surface))}.rowActionIconColorOrange{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-orange) 72%, var(--mat-sys-on-surface))}.rowActionIconColorPink{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-pink) 72%, var(--mat-sys-on-surface))}.rowActionIconColorPurple{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-purple) 72%, var(--mat-sys-on-surface))}.rowActionIconColorGreen{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-green) 72%, var(--mat-sys-on-surface))}.rowActionIconColorBlue{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-blue) 72%, var(--mat-sys-on-surface))}.rowActionIconColorBrown{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-brown) 72%, var(--mat-sys-on-surface))}.rowActionIconColorSky{--mat-icon-button-icon-color: color-mix(in srgb, var(--ngx-table-action-sky) 72%, var(--mat-sys-on-surface))}.noData{padding:24px;color:var(--mat-sys-on-surface-variant)}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px;margin:0}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos,.celdaAcciones,.celdaSelection,.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.rowSelected>.celdaDatos,.rowSelected>.celdaAcciones,.rowSelected>.celdaSelection,.rowSelected>.columnSticky{background-color:var(--mat-sys-secondary-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.expandIcon{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expandIcon--open{transform:rotate(180deg)}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
|
|
4008
|
+
}], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], queryFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryFilter", required: false }] }], moreFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreFilters", required: false }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], tableContentTemplate: [{ type: i0.ViewChild, args: ['tableContent', { isSignal: true }] }] } });
|
|
3885
4009
|
|
|
3886
4010
|
const DEFAULT_ICONS = {
|
|
3887
4011
|
info: 'info',
|
|
@@ -3934,7 +4058,7 @@ class NgxAlert {
|
|
|
3934
4058
|
this.dismissed.emit();
|
|
3935
4059
|
}
|
|
3936
4060
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3937
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxAlert, isStandalone: true, selector: "ngx-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, politeness: { classPropertyName: "politeness", publicName: "politeness", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "isDismissed() ? null : resolvedRole()", "class.ngx-alert--dismissed": "isDismissed()" } }, ngImport: i0, template: "@if (!isDismissed()) {\n <div class=\"alert\" [class]=\"'alert alert--' + type() + ' alert--' + appearance()\">\n @if (!hideIcon()) {\n <mat-icon class=\"alert__icon\" aria-hidden=\"true\">{{ resolvedIcon() }}</mat-icon>\n }\n\n <div class=\"alert__content\">\n @if (title()) {\n <div class=\"alert__title\">{{ title() }}</div>\n }\n\n <div class=\"alert__description\">\n @if (message()) {\n <p class=\"alert__message\">{{ message() }}</p>\n }\n <ng-content />\n </div>\n\n <div class=\"alert__actions\">\n <ng-content select=\"[alertActions]\" />\n </div>\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"alert__dismiss\"\n matIconButton\n [attr.aria-label]=\"resolvedDismissLabel()\"\n [matTooltip]=\"resolvedDismissLabel()\"\n (click)=\"dismiss()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n}\n", styles: [":host{display:block}:host(.ngx-alert--dismissed){display:none}.alert{--_accent: var(--ngx-alert-info-color, #1a73e8);--_container: color-mix(in srgb, var(--_accent) 12%, var(--mat-sys-surface));--_icon: color-mix(in srgb, var(--_accent) 85%, var(--mat-sys-on-surface));display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--ngx-alert-radius, 12px);color:var(--mat-sys-on-surface)}.alert--success{--_accent: var(--ngx-alert-success-color, #1e8e3e)}.alert--warning{--_accent: var(--ngx-alert-warning-color, #e37400)}.alert--error{--_accent: var(--ngx-alert-error-color, var(--mat-sys-error))}.alert--standard{background-color:var(--_container);box-shadow:inset 4px 0 0 var(--_accent);padding-left:20px}.alert--soft{background-color:var(--_container)}.alert--outlined{background-color:transparent;border:1px solid color-mix(in srgb,var(--_accent) 55%,var(--mat-sys-surface))}.alert__icon{flex:none;margin-top:1px;color:var(--_icon)}.alert__content{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.alert__title{font:var(--mat-sys-title-small);color:var(--mat-sys-on-surface)}.alert__description{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);overflow-wrap:anywhere}.alert__description ::ng-deep>:first-child{margin-top:0}.alert__description ::ng-deep>:last-child{margin-bottom:0}.alert__description ::ng-deep a{color:var(--_icon)}.alert__message{margin:0}.alert__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.alert__actions:empty{display:none}.alert__dismiss{flex:none;margin:-8px -8px -8px 0;color:var(--mat-sys-on-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$
|
|
4061
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxAlert, isStandalone: true, selector: "ngx-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, politeness: { classPropertyName: "politeness", publicName: "politeness", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "isDismissed() ? null : resolvedRole()", "class.ngx-alert--dismissed": "isDismissed()" } }, ngImport: i0, template: "@if (!isDismissed()) {\n <div class=\"alert\" [class]=\"'alert alert--' + type() + ' alert--' + appearance()\">\n @if (!hideIcon()) {\n <mat-icon class=\"alert__icon\" aria-hidden=\"true\">{{ resolvedIcon() }}</mat-icon>\n }\n\n <div class=\"alert__content\">\n @if (title()) {\n <div class=\"alert__title\">{{ title() }}</div>\n }\n\n <div class=\"alert__description\">\n @if (message()) {\n <p class=\"alert__message\">{{ message() }}</p>\n }\n <ng-content />\n </div>\n\n <div class=\"alert__actions\">\n <ng-content select=\"[alertActions]\" />\n </div>\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"alert__dismiss\"\n matIconButton\n [attr.aria-label]=\"resolvedDismissLabel()\"\n [matTooltip]=\"resolvedDismissLabel()\"\n (click)=\"dismiss()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n}\n", styles: [":host{display:block}:host(.ngx-alert--dismissed){display:none}.alert{--_accent: var(--ngx-alert-info-color, #1a73e8);--_container: color-mix(in srgb, var(--_accent) 12%, var(--mat-sys-surface));--_icon: color-mix(in srgb, var(--_accent) 85%, var(--mat-sys-on-surface));display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--ngx-alert-radius, 12px);color:var(--mat-sys-on-surface)}.alert--success{--_accent: var(--ngx-alert-success-color, #1e8e3e)}.alert--warning{--_accent: var(--ngx-alert-warning-color, #e37400)}.alert--error{--_accent: var(--ngx-alert-error-color, var(--mat-sys-error))}.alert--standard{background-color:var(--_container);box-shadow:inset 4px 0 0 var(--_accent);padding-left:20px}.alert--soft{background-color:var(--_container)}.alert--outlined{background-color:transparent;border:1px solid color-mix(in srgb,var(--_accent) 55%,var(--mat-sys-surface))}.alert__icon{flex:none;margin-top:1px;color:var(--_icon)}.alert__content{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.alert__title{font:var(--mat-sys-title-small);color:var(--mat-sys-on-surface)}.alert__description{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);overflow-wrap:anywhere}.alert__description ::ng-deep>:first-child{margin-top:0}.alert__description ::ng-deep>:last-child{margin-bottom:0}.alert__description ::ng-deep a{color:var(--_icon)}.alert__message{margin:0}.alert__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.alert__actions:empty{display:none}.alert__dismiss{flex:none;margin:-8px -8px -8px 0;color:var(--mat-sys-on-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3938
4062
|
}
|
|
3939
4063
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxAlert, decorators: [{
|
|
3940
4064
|
type: Component,
|
|
@@ -3944,19 +4068,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3944
4068
|
}, template: "@if (!isDismissed()) {\n <div class=\"alert\" [class]=\"'alert alert--' + type() + ' alert--' + appearance()\">\n @if (!hideIcon()) {\n <mat-icon class=\"alert__icon\" aria-hidden=\"true\">{{ resolvedIcon() }}</mat-icon>\n }\n\n <div class=\"alert__content\">\n @if (title()) {\n <div class=\"alert__title\">{{ title() }}</div>\n }\n\n <div class=\"alert__description\">\n @if (message()) {\n <p class=\"alert__message\">{{ message() }}</p>\n }\n <ng-content />\n </div>\n\n <div class=\"alert__actions\">\n <ng-content select=\"[alertActions]\" />\n </div>\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"alert__dismiss\"\n matIconButton\n [attr.aria-label]=\"resolvedDismissLabel()\"\n [matTooltip]=\"resolvedDismissLabel()\"\n (click)=\"dismiss()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n}\n", styles: [":host{display:block}:host(.ngx-alert--dismissed){display:none}.alert{--_accent: var(--ngx-alert-info-color, #1a73e8);--_container: color-mix(in srgb, var(--_accent) 12%, var(--mat-sys-surface));--_icon: color-mix(in srgb, var(--_accent) 85%, var(--mat-sys-on-surface));display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--ngx-alert-radius, 12px);color:var(--mat-sys-on-surface)}.alert--success{--_accent: var(--ngx-alert-success-color, #1e8e3e)}.alert--warning{--_accent: var(--ngx-alert-warning-color, #e37400)}.alert--error{--_accent: var(--ngx-alert-error-color, var(--mat-sys-error))}.alert--standard{background-color:var(--_container);box-shadow:inset 4px 0 0 var(--_accent);padding-left:20px}.alert--soft{background-color:var(--_container)}.alert--outlined{background-color:transparent;border:1px solid color-mix(in srgb,var(--_accent) 55%,var(--mat-sys-surface))}.alert__icon{flex:none;margin-top:1px;color:var(--_icon)}.alert__content{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.alert__title{font:var(--mat-sys-title-small);color:var(--mat-sys-on-surface)}.alert__description{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);overflow-wrap:anywhere}.alert__description ::ng-deep>:first-child{margin-top:0}.alert__description ::ng-deep>:last-child{margin-bottom:0}.alert__description ::ng-deep a{color:var(--_icon)}.alert__message{margin:0}.alert__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.alert__actions:empty{display:none}.alert__dismiss{flex:none;margin:-8px -8px -8px 0;color:var(--mat-sys-on-surface-variant)}\n"] }]
|
|
3945
4069
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], politeness: [{ type: i0.Input, args: [{ isSignal: true, alias: "politeness", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
|
|
3946
4070
|
|
|
4071
|
+
let nextSheetId = 0;
|
|
4072
|
+
const DIACRITICS = /[̀-ͯ]/g;
|
|
4073
|
+
const normalizeChar = (char) => char.normalize('NFD').replace(DIACRITICS, '').toLowerCase();
|
|
4074
|
+
/** Divide `label` en trozos según dónde aparece `query`, sin distinguir mayúsculas ni acentos. */
|
|
4075
|
+
function highlight(label, query) {
|
|
4076
|
+
const q = query.normalize('NFD').replace(DIACRITICS, '').toLowerCase().trim();
|
|
4077
|
+
if (!q)
|
|
4078
|
+
return [{ text: label, match: false }];
|
|
4079
|
+
// Texto normalizado carácter a carácter, recordando a qué posición del original corresponde
|
|
4080
|
+
const chars = [...label];
|
|
4081
|
+
let normalized = '';
|
|
4082
|
+
const origin = [];
|
|
4083
|
+
chars.forEach((char, i) => {
|
|
4084
|
+
for (const n of normalizeChar(char)) {
|
|
4085
|
+
normalized += n;
|
|
4086
|
+
origin.push(i);
|
|
4087
|
+
}
|
|
4088
|
+
});
|
|
4089
|
+
const parts = [];
|
|
4090
|
+
let cursor = 0;
|
|
4091
|
+
let from = normalized.indexOf(q);
|
|
4092
|
+
while (from !== -1) {
|
|
4093
|
+
const start = origin[from];
|
|
4094
|
+
const end = origin[from + q.length - 1] + 1;
|
|
4095
|
+
if (start > cursor)
|
|
4096
|
+
parts.push({ text: chars.slice(cursor, start).join(''), match: false });
|
|
4097
|
+
parts.push({ text: chars.slice(start, end).join(''), match: true });
|
|
4098
|
+
cursor = end;
|
|
4099
|
+
from = normalized.indexOf(q, from + q.length);
|
|
4100
|
+
}
|
|
4101
|
+
if (cursor < chars.length)
|
|
4102
|
+
parts.push({ text: chars.slice(cursor).join(''), match: false });
|
|
4103
|
+
return parts;
|
|
4104
|
+
}
|
|
4105
|
+
/** Tono 0-3 a partir de la clave: el mismo elemento siempre tiene el mismo color de avatar. */
|
|
4106
|
+
function toneOf(key) {
|
|
4107
|
+
const text = String(key ?? '');
|
|
4108
|
+
let hash = 0;
|
|
4109
|
+
for (let i = 0; i < text.length; i++)
|
|
4110
|
+
hash = (hash * 31 + text.charCodeAt(i)) | 0;
|
|
4111
|
+
return Math.abs(hash) % 4;
|
|
4112
|
+
}
|
|
3947
4113
|
class NgxPaginatedSelectBottomSheetComponent {
|
|
3948
4114
|
// ─── Dependencies ──────────────────────────────────────────────────────────
|
|
3949
4115
|
_ref = inject((MatBottomSheetRef));
|
|
3950
4116
|
_destroy = inject(DestroyRef);
|
|
4117
|
+
_host = inject(ElementRef);
|
|
4118
|
+
_injector = inject(Injector);
|
|
3951
4119
|
data = inject(MAT_BOTTOM_SHEET_DATA);
|
|
3952
4120
|
texts = inject(NgxTexts).texts;
|
|
4121
|
+
/** Prefijo de ids para aria-activedescendant. */
|
|
4122
|
+
listId = `ngx-ps-list-${nextSheetId++}`;
|
|
4123
|
+
_key = this.data.config.valueKey;
|
|
4124
|
+
/** Mínimo de caracteres para lanzar una búsqueda. */
|
|
4125
|
+
minSearch = Math.max(1, this.data.config.minSearchLength ?? 1);
|
|
3953
4126
|
// ─── State ─────────────────────────────────────────────────────────────────
|
|
3954
4127
|
/** Raw input value — updates on every keystroke, does NOT trigger the resource */
|
|
3955
4128
|
query = signal(this.data.filters().query, ...(ngDevMode ? [{ debugName: "query" }] : []));
|
|
4129
|
+
/** Claves de items cuya imagen de avatar falló al cargar (para el fallback). */
|
|
4130
|
+
failedImages = signal(new Set(), ...(ngDevMode ? [{ debugName: "failedImages" }] : []));
|
|
3956
4131
|
/** Holds Partial<T> initially; items get upgraded to full T when toggled from the list */
|
|
3957
4132
|
selectedItems = signal([...this.data.selectedItems], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
4133
|
+
/** Claves seleccionadas al abrir: para saber si hay cambios sin confirmar. */
|
|
4134
|
+
_initialKeys = this.data.selectedItems.map(item => item[this._key]);
|
|
4135
|
+
/** Aviso «¿Descartar los cambios?» visible (múltiple). */
|
|
4136
|
+
confirmDiscard = signal(false, ...(ngDevMode ? [{ debugName: "confirmDiscard" }] : []));
|
|
3958
4137
|
/**
|
|
3959
|
-
* Subject used to bypass the
|
|
4138
|
+
* Subject used to bypass the debounce (e.g. when the user clears
|
|
3960
4139
|
* the search field — we want an immediate response).
|
|
3961
4140
|
*/
|
|
3962
4141
|
_immediateQuery$ = new Subject();
|
|
@@ -3970,9 +4149,9 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
3970
4149
|
*/
|
|
3971
4150
|
resource = rxResource({
|
|
3972
4151
|
params: () => ({ ...this.data.filters() }),
|
|
3973
|
-
//
|
|
3974
|
-
//
|
|
3975
|
-
stream: ({ params }) => this.data.endpoint(params)
|
|
4152
|
+
// Los errores se dejan en el resource: la plantilla muestra «No se pudieron cargar los datos»
|
|
4153
|
+
// con «Reintentar». (Antes se convertían en una lista vacía y parecía que no había resultados.)
|
|
4154
|
+
stream: ({ params }) => this.data.endpoint(params),
|
|
3976
4155
|
defaultValue: { items: [], total: 0 },
|
|
3977
4156
|
});
|
|
3978
4157
|
// ─── Computed ──────────────────────────────────────────────────────────────
|
|
@@ -3980,6 +4159,58 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
3980
4159
|
options = computed(() => this.accumulatedItems(), ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
3981
4160
|
hasError = computed(() => !!this.resource.error(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
3982
4161
|
selectedCount = computed(() => this.selectedItems().length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
|
|
4162
|
+
/** Claves seleccionadas en un Set: comprobar si una opción está elegida es O(1). */
|
|
4163
|
+
_selectedKeys = computed(() => new Set(this.selectedItems().map(item => item[this._key])), ...(ngDevMode ? [{ debugName: "_selectedKeys" }] : []));
|
|
4164
|
+
/** Hay cambios respecto a la selección con la que se abrió el panel. */
|
|
4165
|
+
isDirty = computed(() => {
|
|
4166
|
+
const now = this._selectedKeys();
|
|
4167
|
+
return now.size !== this._initialKeys.length || this._initialKeys.some(key => !now.has(key));
|
|
4168
|
+
}, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
|
|
4169
|
+
/** Búsqueda escrita pero más corta que minSearchLength. */
|
|
4170
|
+
searchTooShort = computed(() => {
|
|
4171
|
+
const length = (this.query() ?? '').trim().length;
|
|
4172
|
+
return length > 0 && length < this.minSearch;
|
|
4173
|
+
}, ...(ngDevMode ? [{ debugName: "searchTooShort" }] : []));
|
|
4174
|
+
/** Opción activa del teclado (índice en optionViews); -1 = ninguna. */
|
|
4175
|
+
activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
|
|
4176
|
+
activeId = computed(() => {
|
|
4177
|
+
const view = this.optionViews()[this.activeIndex()];
|
|
4178
|
+
return view ? view.id : null;
|
|
4179
|
+
}, ...(ngDevMode ? [{ debugName: "activeId" }] : []));
|
|
4180
|
+
/**
|
|
4181
|
+
* Todo lo que pinta cada fila, resuelto de una vez. En simple, si lo seleccionado no está en
|
|
4182
|
+
* las páginas cargadas y no se está buscando, se fija arriba para que se vea al abrir.
|
|
4183
|
+
*/
|
|
4184
|
+
optionViews = computed(() => {
|
|
4185
|
+
const cfg = this.data.config;
|
|
4186
|
+
const selectedKeys = this._selectedKeys();
|
|
4187
|
+
const failed = this.failedImages();
|
|
4188
|
+
const query = this.data.optionTemplate ? '' : (this.query() ?? '');
|
|
4189
|
+
const loaded = this.options();
|
|
4190
|
+
const loadedKeys = new Set(loaded.map(item => item[this._key]));
|
|
4191
|
+
const pinned = !this.data.multiple && !query.trim()
|
|
4192
|
+
? this.selectedItems().filter(item => !loadedKeys.has(item[this._key]))
|
|
4193
|
+
: [];
|
|
4194
|
+
return [...pinned, ...loaded].map((item, index) => {
|
|
4195
|
+
const value = item[this._key];
|
|
4196
|
+
const label = this.getLabel(item);
|
|
4197
|
+
return {
|
|
4198
|
+
item,
|
|
4199
|
+
key: value,
|
|
4200
|
+
index,
|
|
4201
|
+
id: `${this.listId}-opt-${index}`,
|
|
4202
|
+
label,
|
|
4203
|
+
labelParts: highlight(label, query),
|
|
4204
|
+
subtitle: (cfg.subtitle ? this._safe(() => cfg.subtitle(item)) : null) ?? null,
|
|
4205
|
+
disabled: cfg.disabled ? this._safe(() => cfg.disabled(item)) ?? false : false,
|
|
4206
|
+
selected: selectedKeys.has(value),
|
|
4207
|
+
pinned: index < pinned.length,
|
|
4208
|
+
avatarImage: failed.has(value) ? null : (this._safe(() => cfg.avatarImage?.(item)) ?? null),
|
|
4209
|
+
avatarText: this.getAvatarText(item),
|
|
4210
|
+
avatarTone: toneOf(value),
|
|
4211
|
+
};
|
|
4212
|
+
});
|
|
4213
|
+
}, ...(ngDevMode ? [{ debugName: "optionViews" }] : []));
|
|
3983
4214
|
/**
|
|
3984
4215
|
* Total como signal, actualizado SOLO cuando el recurso no está cargando. Durante
|
|
3985
4216
|
* la carga por scroll, resource.value() pasa transitoriamente al defaultValue
|
|
@@ -4000,10 +4231,10 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
4000
4231
|
// se conserva el último total y no se rompe el ciclo de detección de cambios.
|
|
4001
4232
|
}
|
|
4002
4233
|
}, ...(ngDevMode ? [{ debugName: "_totalEffect" }] : []));
|
|
4003
|
-
/** Cargando la PRIMERA página
|
|
4234
|
+
/** Cargando la PRIMERA página sin nada que enseñar → skeletons. */
|
|
4004
4235
|
isInitialLoading = computed(() => this.isLoading() && this.options().length === 0, ...(ngDevMode ? [{ debugName: "isInitialLoading" }] : []));
|
|
4005
|
-
/** Cargando MÁS páginas (scroll) → fila
|
|
4006
|
-
isLoadingMore = computed(() => this.isLoading() && this.options().length > 0, ...(ngDevMode ? [{ debugName: "isLoadingMore" }] : []));
|
|
4236
|
+
/** Cargando MÁS páginas (scroll) → fila «cargando más…». Recargar la primera (caché) no la muestra. */
|
|
4237
|
+
isLoadingMore = computed(() => this.isLoading() && this.options().length > 0 && this.data.filters().pageNumber > 1, ...(ngDevMode ? [{ debugName: "isLoadingMore" }] : []));
|
|
4007
4238
|
/** Ya se han cargado todos los resultados disponibles. */
|
|
4008
4239
|
allLoaded = computed(() => this.total() > 0 && this.options().length >= this.total(), ...(ngDevMode ? [{ debugName: "allLoaded" }] : []));
|
|
4009
4240
|
/** Cabecera con sombra solo cuando la lista está desplazada. */
|
|
@@ -4025,81 +4256,95 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
4025
4256
|
/**
|
|
4026
4257
|
* Reactively depends ONLY on `resource.value()`. The filter snapshot is read
|
|
4027
4258
|
* via `untracked` so external filter changes (parent-driven, e.g. an extra
|
|
4028
|
-
* filters panel) do NOT create a reactive dependency here
|
|
4029
|
-
* the effect re-run on scroll page increments with stale resource data,
|
|
4030
|
-
* duplicating items and breaking `onScroll` (see original limitation).
|
|
4259
|
+
* filters panel) do NOT create a reactive dependency here.
|
|
4031
4260
|
*
|
|
4032
4261
|
* Reset logic:
|
|
4033
4262
|
* - Fingerprint the current filter identity (everything except `pageNumber`).
|
|
4034
|
-
* - If the fingerprint changed since the previous fetch, this
|
|
4035
|
-
* to a different filter set → replace the accumulated array.
|
|
4263
|
+
* - If the fingerprint changed since the previous fetch, or this is page 1 → replace.
|
|
4036
4264
|
* - If only `pageNumber` moved, this is a scroll-load-more → append.
|
|
4037
|
-
*
|
|
4038
|
-
* This is what allows callers to mutate `data.filters` from outside (extra
|
|
4039
|
-
* filter selects, checkboxes, etc.) and have the list refresh cleanly
|
|
4040
|
-
* without the previous page's items lingering.
|
|
4041
4265
|
*/
|
|
4042
4266
|
_lastFilterFingerprint = null;
|
|
4043
4267
|
_accumEffect = effect(() => {
|
|
4044
|
-
// Si el endpoint falla, resource.value() lanza
|
|
4268
|
+
// Si el endpoint falla, resource.value() lanza. En la primera página no hay nada que
|
|
4269
|
+
// enseñar; al cargar más (scroll) se conservan las páginas ya cargadas y se ofrece reintentar.
|
|
4045
4270
|
if (this.resource.error()) {
|
|
4046
|
-
this.
|
|
4271
|
+
if (untracked(() => this.data.filters()).pageNumber <= 1)
|
|
4272
|
+
this.accumulatedItems.set([]);
|
|
4047
4273
|
return;
|
|
4048
4274
|
}
|
|
4275
|
+
if (this.resource.isLoading())
|
|
4276
|
+
return;
|
|
4049
4277
|
let value;
|
|
4050
4278
|
try {
|
|
4051
4279
|
value = this.resource.value();
|
|
4052
4280
|
}
|
|
4053
4281
|
catch {
|
|
4054
|
-
// El recurso puede lanzar si se elimina durante el teardown; se ignora
|
|
4055
|
-
// no romper el ciclo de detección de cambios.
|
|
4282
|
+
// El recurso puede lanzar si se elimina durante el teardown; se ignora.
|
|
4056
4283
|
return;
|
|
4057
4284
|
}
|
|
4058
|
-
const
|
|
4059
|
-
const fingerprint =
|
|
4060
|
-
|
|
4061
|
-
// devuelve el defaultValue del resource...): se reemplaza en vez de acumular.
|
|
4062
|
-
if (fingerprint !== this._lastFilterFingerprint || pageNumber <= 1) {
|
|
4285
|
+
const filters = untracked(() => this.data.filters());
|
|
4286
|
+
const fingerprint = this._fingerprint(filters);
|
|
4287
|
+
if (fingerprint !== this._lastFilterFingerprint || filters.pageNumber <= 1) {
|
|
4063
4288
|
this._lastFilterFingerprint = fingerprint;
|
|
4064
4289
|
this.accumulatedItems.set([...value.items]);
|
|
4290
|
+
// Primera página para la próxima apertura
|
|
4291
|
+
if (filters.pageNumber <= 1 && this.data.cache)
|
|
4292
|
+
this.data.cache.value = { fingerprint, page: value };
|
|
4065
4293
|
return;
|
|
4066
4294
|
}
|
|
4067
|
-
// Scroll: se
|
|
4068
|
-
// misma
|
|
4069
|
-
const key = this.data.config.valueKey;
|
|
4295
|
+
// Scroll: se añaden solo los que no estuvieran ya, para que un refetch de la
|
|
4296
|
+
// misma página no duplique elementos en la lista.
|
|
4070
4297
|
this.accumulatedItems.update(acc => {
|
|
4071
|
-
const known = new Set(acc.map(item => item[
|
|
4072
|
-
const nuevos = value.items.filter(item => !known.has(item[
|
|
4298
|
+
const known = new Set(acc.map(item => item[this._key]));
|
|
4299
|
+
const nuevos = value.items.filter(item => !known.has(item[this._key]));
|
|
4073
4300
|
return nuevos.length > 0 ? [...acc, ...nuevos] : acc;
|
|
4074
4301
|
});
|
|
4075
4302
|
}, ...(ngDevMode ? [{ debugName: "_accumEffect" }] : []));
|
|
4076
4303
|
constructor() {
|
|
4077
|
-
// Reset to page 1 when the sheet opens
|
|
4078
|
-
this.accumulatedItems.set([]);
|
|
4079
4304
|
this.data.filters.update(f => ({ ...f, pageNumber: 1 }));
|
|
4305
|
+
// Primera página de la apertura anterior con los mismos filtros: se enseña al instante
|
|
4306
|
+
// (sin skeletons) mientras se recarga por detrás.
|
|
4307
|
+
const cached = this.data.cache?.value;
|
|
4308
|
+
const fingerprint = this._fingerprint(untracked(() => this.data.filters()));
|
|
4309
|
+
if (cached && cached.fingerprint === fingerprint) {
|
|
4310
|
+
this.accumulatedItems.set([...cached.page.items]);
|
|
4311
|
+
this._total.set(cached.page.total);
|
|
4312
|
+
this._lastFilterFingerprint = fingerprint;
|
|
4313
|
+
}
|
|
4314
|
+
else {
|
|
4315
|
+
this.accumulatedItems.set([]);
|
|
4316
|
+
}
|
|
4080
4317
|
/**
|
|
4081
|
-
*
|
|
4082
|
-
*
|
|
4083
|
-
* _immediateQuery$
|
|
4084
|
-
*
|
|
4085
|
-
* The merged stream has a final distinctUntilChanged so that an immediate
|
|
4086
|
-
* clear followed by the debounced '' 400 ms later does NOT fire twice.
|
|
4318
|
+
* Búsqueda:
|
|
4319
|
+
* lo que se escribe → espera searchDebounce ms (400 por defecto) → data.filters
|
|
4320
|
+
* _immediateQuery$ → sin espera → data.filters (al limpiar el buscador)
|
|
4321
|
+
* Con menos de minSearchLength caracteres no se busca (se mantiene la lista y se avisa).
|
|
4087
4322
|
*/
|
|
4323
|
+
const wait = this.data.config.searchDebounce ?? 400;
|
|
4088
4324
|
merge(this._immediateQuery$,
|
|
4089
|
-
// skip(1)
|
|
4090
|
-
|
|
4091
|
-
|
|
4092
|
-
.pipe(distinctUntilChanged(), takeUntilDestroyed(this._destroy))
|
|
4325
|
+
// skip(1): la emisión inicial de toObservable no debe relanzar la búsqueda al abrir
|
|
4326
|
+
toObservable(this.query).pipe(skip(1), debounce(() => timer(wait))))
|
|
4327
|
+
.pipe(filter(q => !q || q.trim().length >= this.minSearch), distinctUntilChanged(), takeUntilDestroyed(this._destroy))
|
|
4093
4328
|
.subscribe(q => {
|
|
4094
4329
|
this.accumulatedItems.set([]);
|
|
4330
|
+
this.activeIndex.set(-1);
|
|
4095
4331
|
this.data.filters.update(f => ({ ...f, query: q, pageNumber: 1 }));
|
|
4096
4332
|
});
|
|
4333
|
+
// En múltiple el panel se abre con disableClose: Escape y el fondo pasan por requestClose,
|
|
4334
|
+
// que avisa si hay cambios sin confirmar en vez de perderlos.
|
|
4335
|
+
if (this.data.multiple) {
|
|
4336
|
+
this._ref.backdropClick().pipe(takeUntilDestroyed(this._destroy)).subscribe(() => this.requestClose());
|
|
4337
|
+
this._ref.keydownEvents()
|
|
4338
|
+
.pipe(filter(e => e.key === 'Escape'), takeUntilDestroyed(this._destroy))
|
|
4339
|
+
.subscribe(e => {
|
|
4340
|
+
e.preventDefault();
|
|
4341
|
+
this.requestClose();
|
|
4342
|
+
});
|
|
4343
|
+
}
|
|
4097
4344
|
}
|
|
4098
4345
|
// ─── Helpers ────────────────────────────────────────────────────────────────
|
|
4099
4346
|
isSelected(item) {
|
|
4100
|
-
|
|
4101
|
-
const val = item[key];
|
|
4102
|
-
return this.selectedItems().some(s => s[key] === val);
|
|
4347
|
+
return this._selectedKeys().has(item[this._key]);
|
|
4103
4348
|
}
|
|
4104
4349
|
/**
|
|
4105
4350
|
* Safe label: tries displayedLabel(item), falls back to String(item[valueKey]).
|
|
@@ -4108,7 +4353,8 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
4108
4353
|
getLabel(item) {
|
|
4109
4354
|
const cfg = this.data.config;
|
|
4110
4355
|
const keyVal = String(item[cfg.valueKey] ?? '');
|
|
4111
|
-
|
|
4356
|
+
// Solo con la clave (writeValue con ids) displayedLabel daría «undefined undefined»
|
|
4357
|
+
if (!cfg.displayedLabel || Object.keys(item).length <= 1)
|
|
4112
4358
|
return keyVal;
|
|
4113
4359
|
try {
|
|
4114
4360
|
return cfg.displayedLabel(item) ?? keyVal;
|
|
@@ -4126,36 +4372,30 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
4126
4372
|
}
|
|
4127
4373
|
return this.getLabel(item).charAt(0).toUpperCase();
|
|
4128
4374
|
}
|
|
4129
|
-
/** Claves de items cuya imagen de avatar falló al cargar (para el fallback). */
|
|
4130
|
-
failedImages = signal(new Set(), ...(ngDevMode ? [{ debugName: "failedImages" }] : []));
|
|
4131
4375
|
/** URL de imagen del avatar, o null si no hay o si falló al cargar. */
|
|
4132
4376
|
getAvatarImage(item) {
|
|
4133
|
-
const key = item[this.
|
|
4377
|
+
const key = item[this._key];
|
|
4134
4378
|
if (this.failedImages().has(key))
|
|
4135
4379
|
return null;
|
|
4136
|
-
return this.data.config.avatarImage?.(item);
|
|
4380
|
+
return this._safe(() => this.data.config.avatarImage?.(item));
|
|
4137
4381
|
}
|
|
4138
4382
|
/** Marca la imagen como fallida para caer al texto/icono. */
|
|
4139
4383
|
onAvatarError(item) {
|
|
4140
|
-
const key = item[this.
|
|
4384
|
+
const key = item[this._key];
|
|
4141
4385
|
this.failedImages.update(s => new Set(s).add(key));
|
|
4142
4386
|
}
|
|
4143
4387
|
// ─── Selection ──────────────────────────────────────────────────────────────
|
|
4144
4388
|
toggleItem(item) {
|
|
4145
|
-
if (this.data.config.disabled
|
|
4389
|
+
if (this.data.config.disabled && this._safe(() => this.data.config.disabled(item)))
|
|
4146
4390
|
return;
|
|
4147
|
-
const
|
|
4148
|
-
const val = item[key];
|
|
4391
|
+
const val = item[this._key];
|
|
4149
4392
|
if (this.data.multiple) {
|
|
4150
4393
|
if (this.isSelected(item)) {
|
|
4151
|
-
this.selectedItems.update(items => items.filter(s => s[
|
|
4394
|
+
this.selectedItems.update(items => items.filter(s => s[this._key] !== val));
|
|
4152
4395
|
}
|
|
4153
4396
|
else {
|
|
4154
4397
|
// Remove any existing partial with the same key, then add the full object
|
|
4155
|
-
this.selectedItems.update(items => [
|
|
4156
|
-
...items.filter(s => s[key] !== val),
|
|
4157
|
-
item,
|
|
4158
|
-
]);
|
|
4398
|
+
this.selectedItems.update(items => [...items.filter(s => s[this._key] !== val), item]);
|
|
4159
4399
|
}
|
|
4160
4400
|
}
|
|
4161
4401
|
else {
|
|
@@ -4169,9 +4409,84 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
4169
4409
|
}
|
|
4170
4410
|
}
|
|
4171
4411
|
removeSelectedChip(item) {
|
|
4172
|
-
const
|
|
4173
|
-
|
|
4174
|
-
|
|
4412
|
+
const val = item[this._key];
|
|
4413
|
+
this.selectedItems.update(items => items.filter(s => s[this._key] !== val));
|
|
4414
|
+
}
|
|
4415
|
+
// ─── Teclado (combobox / listbox) ───────────────────────────────────────────
|
|
4416
|
+
/**
|
|
4417
|
+
* Patrón combobox: el foco se queda en el buscador (se puede seguir escribiendo) y la opción
|
|
4418
|
+
* activa se marca con aria-activedescendant. Flechas y RePág/AvPág la mueven; Intro elige.
|
|
4419
|
+
*/
|
|
4420
|
+
onSearchKeydown(event) {
|
|
4421
|
+
if (this._moveActive(event))
|
|
4422
|
+
return;
|
|
4423
|
+
if (event.key === 'Enter')
|
|
4424
|
+
this._chooseActive(event);
|
|
4425
|
+
}
|
|
4426
|
+
/** Sin buscador, la propia lista recibe el foco: además, Inicio/Fin y Espacio. */
|
|
4427
|
+
onListKeydown(event) {
|
|
4428
|
+
if (this.data.showSearch)
|
|
4429
|
+
return;
|
|
4430
|
+
const count = this.optionViews().length;
|
|
4431
|
+
if (event.key === 'Home' && count) {
|
|
4432
|
+
event.preventDefault();
|
|
4433
|
+
this._setActive(0);
|
|
4434
|
+
return;
|
|
4435
|
+
}
|
|
4436
|
+
if (event.key === 'End' && count) {
|
|
4437
|
+
event.preventDefault();
|
|
4438
|
+
this._setActive(count - 1);
|
|
4439
|
+
return;
|
|
4440
|
+
}
|
|
4441
|
+
if (this._moveActive(event))
|
|
4442
|
+
return;
|
|
4443
|
+
if (event.key === 'Enter' || event.key === ' ')
|
|
4444
|
+
this._chooseActive(event);
|
|
4445
|
+
}
|
|
4446
|
+
onOptionClick(view) {
|
|
4447
|
+
this.activeIndex.set(view.index);
|
|
4448
|
+
this.toggleItem(view.item);
|
|
4449
|
+
}
|
|
4450
|
+
_moveActive(event) {
|
|
4451
|
+
const count = this.optionViews().length;
|
|
4452
|
+
if (!count)
|
|
4453
|
+
return false;
|
|
4454
|
+
const current = this.activeIndex();
|
|
4455
|
+
let next;
|
|
4456
|
+
switch (event.key) {
|
|
4457
|
+
case 'ArrowDown':
|
|
4458
|
+
next = current < 0 ? 0 : Math.min(current + 1, count - 1);
|
|
4459
|
+
break;
|
|
4460
|
+
case 'ArrowUp':
|
|
4461
|
+
next = current < 0 ? 0 : Math.max(current - 1, 0);
|
|
4462
|
+
break;
|
|
4463
|
+
case 'PageDown':
|
|
4464
|
+
next = Math.min(Math.max(current, 0) + 10, count - 1);
|
|
4465
|
+
break;
|
|
4466
|
+
case 'PageUp':
|
|
4467
|
+
next = Math.max(current - 10, 0);
|
|
4468
|
+
break;
|
|
4469
|
+
default: return false;
|
|
4470
|
+
}
|
|
4471
|
+
event.preventDefault();
|
|
4472
|
+
this._setActive(next);
|
|
4473
|
+
return true;
|
|
4474
|
+
}
|
|
4475
|
+
_chooseActive(event) {
|
|
4476
|
+
const view = this.optionViews()[this.activeIndex()];
|
|
4477
|
+
if (!view || view.disabled)
|
|
4478
|
+
return;
|
|
4479
|
+
event.preventDefault();
|
|
4480
|
+
this.toggleItem(view.item);
|
|
4481
|
+
}
|
|
4482
|
+
/** Activa una opción y la trae a la vista (si es de las últimas, el scroll carga la siguiente página). */
|
|
4483
|
+
_setActive(index) {
|
|
4484
|
+
this.activeIndex.set(index);
|
|
4485
|
+
queueMicrotask(() => {
|
|
4486
|
+
this._host.nativeElement
|
|
4487
|
+
.querySelector(`#${this.listId}-opt-${index}`)
|
|
4488
|
+
?.scrollIntoView({ block: 'nearest' });
|
|
4489
|
+
});
|
|
4175
4490
|
}
|
|
4176
4491
|
// ─── Search ──────────────────────────────────────────────────────────────────
|
|
4177
4492
|
onQueryInput(event, container) {
|
|
@@ -4180,12 +4495,10 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
4180
4495
|
this.query.set(event.target.value);
|
|
4181
4496
|
}
|
|
4182
4497
|
clearQuery(container) {
|
|
4183
|
-
// El input refleja la query vía [value]="query()", así que basta con resetear
|
|
4184
|
-
// el signal (no hace falta el ref del DOM, que no está en scope en el estado vacío).
|
|
4185
4498
|
if (container)
|
|
4186
4499
|
container.scrollTop = 0;
|
|
4187
4500
|
this.query.set('');
|
|
4188
|
-
// Emit on the immediate subject to bypass the
|
|
4501
|
+
// Emit on the immediate subject to bypass the debounce
|
|
4189
4502
|
this._immediateQuery$.next('');
|
|
4190
4503
|
}
|
|
4191
4504
|
// ─── Scroll ──────────────────────────────────────────────────────────────────
|
|
@@ -4197,8 +4510,7 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
4197
4510
|
const { scrollTop, clientHeight, scrollHeight } = container;
|
|
4198
4511
|
// Prefetch: se pide la siguiente página ~320px antes del final para que la
|
|
4199
4512
|
// fila de "cargando más" apenas se vea (scroll infinito fluido).
|
|
4200
|
-
if (scrollTop + clientHeight + 320 >= scrollHeight &&
|
|
4201
|
-
this.options().length < this.total()) {
|
|
4513
|
+
if (scrollTop + clientHeight + 320 >= scrollHeight && this.options().length < this.total()) {
|
|
4202
4514
|
this.data.filters.update(f => ({ ...f, pageNumber: f.pageNumber + 1 }));
|
|
4203
4515
|
}
|
|
4204
4516
|
}
|
|
@@ -4208,13 +4520,12 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
4208
4520
|
}
|
|
4209
4521
|
// ─── Select all ─────────────────────────────────────────────────────────────
|
|
4210
4522
|
toggleSelectAll() {
|
|
4211
|
-
const key = this.data.config.valueKey;
|
|
4212
4523
|
if (this.allSelected()) {
|
|
4213
|
-
const visibleValues = new Set(this.options().map(item => item[
|
|
4214
|
-
this.selectedItems.update(items => items.filter(s => !visibleValues.has(s[
|
|
4524
|
+
const visibleValues = new Set(this.options().map(item => item[this._key]));
|
|
4525
|
+
this.selectedItems.update(items => items.filter(s => !visibleValues.has(s[this._key])));
|
|
4215
4526
|
}
|
|
4216
4527
|
else {
|
|
4217
|
-
const newItems = this.options().filter(item => !this.isSelected(item) && !this.data.config.disabled
|
|
4528
|
+
const newItems = this.options().filter(item => !this.isSelected(item) && !(this.data.config.disabled && this._safe(() => this.data.config.disabled(item))));
|
|
4218
4529
|
this.selectedItems.update(items => [...items, ...newItems]);
|
|
4219
4530
|
}
|
|
4220
4531
|
}
|
|
@@ -4225,11 +4536,43 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
4225
4536
|
reset() {
|
|
4226
4537
|
this.selectedItems.set([]);
|
|
4227
4538
|
}
|
|
4539
|
+
/** Cierra sin aplicar cambios (botón X). En múltiple con cambios, pregunta antes. */
|
|
4228
4540
|
close() {
|
|
4541
|
+
this.requestClose();
|
|
4542
|
+
}
|
|
4543
|
+
/** Cerrar desde la X, Escape o el fondo: si hay cambios sin confirmar, avisa primero. */
|
|
4544
|
+
requestClose() {
|
|
4545
|
+
if (this.data.multiple && this.isDirty() && !this.confirmDiscard()) {
|
|
4546
|
+
this.confirmDiscard.set(true);
|
|
4547
|
+
// El foco va a «Seguir editando»: lo seguro si se pulsa Intro sin mirar
|
|
4548
|
+
afterNextRender(() => this._host.nativeElement.querySelector('.ps-bs__discard button')?.focus(), { injector: this._injector });
|
|
4549
|
+
return;
|
|
4550
|
+
}
|
|
4229
4551
|
this._ref.dismiss(undefined);
|
|
4230
4552
|
}
|
|
4553
|
+
discardChanges() {
|
|
4554
|
+
this._ref.dismiss(undefined);
|
|
4555
|
+
}
|
|
4556
|
+
keepEditing() {
|
|
4557
|
+
this.confirmDiscard.set(false);
|
|
4558
|
+
}
|
|
4559
|
+
// ─── Privado ─────────────────────────────────────────────────────────────────
|
|
4560
|
+
/** Identidad de unos filtros sin la página: misma huella = misma lista. */
|
|
4561
|
+
_fingerprint(filters) {
|
|
4562
|
+
const { pageNumber, ...rest } = filters;
|
|
4563
|
+
return JSON.stringify(rest);
|
|
4564
|
+
}
|
|
4565
|
+
/** Las funciones de config pueden fallar con objetos parciales (solo valueKey): se tratan como vacías. */
|
|
4566
|
+
_safe(fn) {
|
|
4567
|
+
try {
|
|
4568
|
+
return fn();
|
|
4569
|
+
}
|
|
4570
|
+
catch {
|
|
4571
|
+
return undefined;
|
|
4572
|
+
}
|
|
4573
|
+
}
|
|
4231
4574
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelectBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4232
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectBottomSheetComponent, isStandalone: true, selector: "ngx-paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"ps-bs\">\r\n\r\n <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"ps-bs__handle\">\r\n <div class=\"ps-bs__handle-bar\"></div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Header (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\r\n <div class=\"ps-bs__header-top\">\r\n <div class=\"ps-bs__title-area\">\r\n <span class=\"ps-bs__title\">{{ data.title }}</span>\r\n @if (data.multiple && selectedCount() > 0) {\r\n <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\r\n }\r\n </div>\r\n <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"texts().common.close\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Pill search -->\r\n @if (data.showSearch) {\r\n <div class=\"ps-bs__search\">\r\n <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\r\n <input\r\n class=\"ps-bs__search-input\"\r\n #searchInput\r\n type=\"text\"\r\n [value]=\"query() ?? ''\"\r\n [placeholder]=\"data.searchPlaceholder\"\r\n (input)=\"onQueryInput($event, bodyContainer)\"\r\n />\r\n @if (searchInput.value.length > 0) {\r\n <button\r\n class=\"ps-bs__search-clear\"\r\n type=\"button\"\r\n [attr.aria-label]=\"texts().common.clearSearch\"\r\n (click)=\"clearQuery(bodyContainer); $event.stopPropagation()\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\r\n <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\r\n\r\n <!-- Extra filters projection -->\r\n @if (data.extraFiltersTemplate) {\r\n <div class=\"ps-bs__extra-filters\">\r\n <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\r\n </div>\r\n }\r\n\r\n <!-- Selected chips (custom lightweight chips) -->\r\n @if (data.multiple && selectedItems().length > 0) {\r\n <div class=\"ps-bs__selected-chips\">\r\n @for (item of selectedItems(); track item[data.config.valueKey]) {\r\n <div class=\"ps-bs__chip\">\r\n <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\r\n <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"removeSelectedChip(item)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Select all (sticky top of the scroll area) -->\r\n @if (data.multiple && data.showSelectAll && options().length > 0) {\r\n <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\r\n <mat-checkbox\r\n [checked]=\"allSelected()\"\r\n [indeterminate]=\"someSelected()\"\r\n (click)=\"$event.preventDefault()\"\r\n />\r\n <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\r\n </div>\r\n }\r\n\r\n <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"ps-bs__list\">\r\n\r\n <!-- Skeleton loading (only for the first page) -->\r\n @if (isInitialLoading()) {\r\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n <div class=\"ps-bs__skeleton\">\r\n <div class=\"ps-bs__skeleton-avatar\"></div>\r\n <div class=\"ps-bs__skeleton-content\">\r\n <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\r\n <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n\r\n <!-- Error state -->\r\n @if (hasError() && !isLoading() && options().length === 0) {\r\n <div class=\"ps-bs__state ps-bs__error\">\r\n <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\r\n <mat-icon>error_outline</mat-icon>\r\n </div>\r\n <div class=\"ps-bs__state-title\">{{ texts().paginatedSelect.errorTitle }}</div>\r\n <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.errorHint }}</div>\r\n <button matButton=\"tonal\" (click)=\"retry()\">\r\n <mat-icon>refresh</mat-icon>\r\n {{ texts().paginatedSelect.retry }}\r\n </button>\r\n </div>\r\n }\r\n\r\n <!-- Empty state -->\r\n @if (!hasError() && options().length === 0 && !isLoading()) {\r\n <div class=\"ps-bs__state ps-bs__empty\">\r\n <div class=\"ps-bs__state-icon-wrap\">\r\n <mat-icon>search_off</mat-icon>\r\n </div>\r\n <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\r\n @if (query()) {\r\n <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.noResultsHint }}</div>\r\n <button matButton (click)=\"clearQuery(bodyContainer)\">\r\n {{ texts().paginatedSelect.clearSearch }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Option rows -->\r\n @for (item of options(); track item[data.config.valueKey]) {\r\n @let disabled = data.config.disabled ? data.config.disabled(item) : false;\r\n @let selected = isSelected(item);\r\n @let avatarImg = getAvatarImage(item);\r\n\r\n <div\r\n class=\"ps-bs__option\"\r\n [class.ps-bs__option--selected]=\"selected\"\r\n [class.ps-bs__option--disabled]=\"disabled\"\r\n matRipple\r\n [matRippleDisabled]=\"disabled\"\r\n (click)=\"toggleItem(item)\"\r\n role=\"option\"\r\n [attr.aria-selected]=\"selected\"\r\n [attr.aria-disabled]=\"disabled\"\r\n >\r\n <!-- Avatar (al seleccionar se voltea a un check, estilo Gmail) -->\r\n <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\r\n @if (selected) {\r\n <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\r\n } @else if (avatarImg) {\r\n <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\r\n } @else if (data.config.avatarText) {\r\n {{ getAvatarText(item) }}\r\n } @else if (data.config.avatarIcon) {\r\n <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\r\n } @else {\r\n {{ getAvatarText(item) }}\r\n }\r\n </div>\r\n\r\n <!-- Content -->\r\n <div class=\"ps-bs__option-content\">\r\n @if (data.optionTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\r\n } @else {\r\n <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\r\n @if (data.config.subtitle) {\r\n <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Check indicator -->\r\n @if (data.multiple) {\r\n <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\r\n } @else if (selected) {\r\n <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Loading more (pagination) / end of list -->\r\n @if (isLoadingMore()) {\r\n <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\r\n <span class=\"ps-bs__loading-more-dot\"></span>\r\n <span class=\"ps-bs__loading-more-dot\"></span>\r\n <span class=\"ps-bs__loading-more-dot\"></span>\r\n <span class=\"ps-bs__loading-more-text\">{{ texts().paginatedSelect.loadingMore }}</span>\r\n </div>\r\n } @else if (allLoaded() && options().length > 0) {\r\n <div class=\"ps-bs__list-end\">{{ texts().paginatedSelect.endOfList }}</div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"ps-bs__footer\">\r\n <span class=\"ps-bs__footer-count\">\r\n @if (data.multiple) {\r\n {{ texts().paginatedSelect.selectedCount(selectedCount(), total()) }}\r\n } @else {\r\n {{ texts().paginatedSelect.resultsCount(total()) }}\r\n }\r\n </span>\r\n\r\n @if (data.multiple) {\r\n <div class=\"ps-bs__footer-actions\">\r\n @if (selectedCount() > 0) {\r\n <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\r\n }\r\n <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px)!important;max-height:min(86vh,760px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 14px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4575
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectBottomSheetComponent, isStandalone: true, selector: "ngx-paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"ps-bs\">\n\n <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__handle\">\n <div class=\"ps-bs__handle-bar\"></div>\n </div>\n\n <!-- \u2500\u2500 Header (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n <div class=\"ps-bs__header-top\">\n <div class=\"ps-bs__title-area\">\n <span class=\"ps-bs__title\">{{ data.title }}</span>\n @if (data.multiple && selectedCount() > 0) {\n <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n }\n </div>\n <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"texts().common.close\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Pill search -->\n @if (data.showSearch) {\n <div class=\"ps-bs__search\">\n <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n <input\n class=\"ps-bs__search-input\"\n type=\"text\"\n role=\"combobox\"\n aria-expanded=\"true\"\n aria-autocomplete=\"list\"\n autocomplete=\"off\"\n [value]=\"query() ?? ''\"\n [placeholder]=\"data.searchPlaceholder\"\n [attr.aria-label]=\"data.searchPlaceholder\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeId()\"\n (input)=\"onQueryInput($event, bodyContainer)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n @if (query()) {\n <button\n class=\"ps-bs__search-clear\"\n type=\"button\"\n [attr.aria-label]=\"texts().common.clearSearch\"\n (click)=\"clearQuery(bodyContainer); $event.stopPropagation()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n @if (searchTooShort()) {\n <div class=\"ps-bs__search-hint\" aria-live=\"polite\">{{ texts().paginatedSelect.minSearch(minSearch) }}</div>\n }\n }\n </div>\n\n <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\n\n <!-- Extra filters projection -->\n @if (data.extraFiltersTemplate) {\n <div class=\"ps-bs__extra-filters\">\n <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n </div>\n }\n\n <!-- Selected chips (custom lightweight chips) -->\n @if (data.multiple && selectedItems().length > 0) {\n <div class=\"ps-bs__selected-chips\">\n @for (item of selectedItems(); track item[data.config.valueKey]) {\n <div class=\"ps-bs__chip\">\n <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"texts().paginatedSelect.removeItem(getLabel(item))\" (click)=\"removeSelectedChip(item)\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n </div>\n }\n\n <!-- Select all (sticky top of the scroll area) -->\n @if (data.multiple && data.showSelectAll && options().length > 0) {\n <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n <mat-checkbox\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (click)=\"$event.preventDefault()\"\n />\n <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n </div>\n }\n\n <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div\n class=\"ps-bs__list\"\n role=\"listbox\"\n [id]=\"listId\"\n [attr.aria-label]=\"data.title\"\n [attr.aria-multiselectable]=\"data.multiple || null\"\n [attr.aria-busy]=\"isLoading() || null\"\n [attr.tabindex]=\"data.showSearch ? null : 0\"\n [attr.aria-activedescendant]=\"data.showSearch ? null : activeId()\"\n (keydown)=\"onListKeydown($event)\">\n\n <!-- Skeleton loading (only for the first page) -->\n @if (isInitialLoading()) {\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n <div class=\"ps-bs__skeleton\">\n <div class=\"ps-bs__skeleton-avatar\"></div>\n <div class=\"ps-bs__skeleton-content\">\n <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n </div>\n </div>\n }\n }\n\n <!-- Error state -->\n @if (hasError() && !isLoading() && options().length === 0) {\n <div class=\"ps-bs__state ps-bs__error\">\n <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n <mat-icon>error_outline</mat-icon>\n </div>\n <div class=\"ps-bs__state-title\">{{ texts().paginatedSelect.errorTitle }}</div>\n <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.errorHint }}</div>\n <button matButton=\"tonal\" (click)=\"retry()\">\n <mat-icon>refresh</mat-icon>\n {{ texts().paginatedSelect.retry }}\n </button>\n </div>\n }\n\n <!-- Empty state -->\n @if (!hasError() && options().length === 0 && !isLoading()) {\n <div class=\"ps-bs__state ps-bs__empty\">\n <div class=\"ps-bs__state-icon-wrap\">\n <mat-icon>search_off</mat-icon>\n </div>\n <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n @if (query()) {\n <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.noResultsHint }}</div>\n <button matButton (click)=\"clearQuery(bodyContainer)\">\n {{ texts().paginatedSelect.clearSearch }}\n </button>\n }\n </div>\n }\n\n <!-- Option rows (estado precalculado en optionViews) -->\n @for (view of optionViews(); track view.key) {\n <div\n class=\"ps-bs__option\"\n [class.ps-bs__option--selected]=\"view.selected\"\n [class.ps-bs__option--disabled]=\"view.disabled\"\n [class.ps-bs__option--active]=\"view.index === activeIndex()\"\n [class.ps-bs__option--pinned]=\"view.pinned\"\n matRipple\n [matRippleDisabled]=\"view.disabled\"\n role=\"option\"\n [id]=\"view.id\"\n [attr.aria-selected]=\"view.selected\"\n [attr.aria-disabled]=\"view.disabled || null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onOptionClick(view)\"\n >\n <!-- Avatar (al seleccionar se voltea a un check, estilo Gmail) -->\n <div\n class=\"ps-bs__option-avatar\"\n [class]=\"'ps-bs__option-avatar--tone-' + view.avatarTone\"\n [class.ps-bs__option-avatar--selected]=\"view.selected\"\n aria-hidden=\"true\">\n @if (view.selected) {\n <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\n } @else if (view.avatarImage) {\n <img [src]=\"view.avatarImage\" alt=\"\" (error)=\"onAvatarError(view.item)\" loading=\"lazy\" />\n } @else if (data.config.avatarText) {\n {{ view.avatarText }}\n } @else if (data.config.avatarIcon) {\n <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n } @else {\n {{ view.avatarText }}\n }\n </div>\n\n <!-- Content -->\n <div class=\"ps-bs__option-content\">\n @if (data.optionTemplate) {\n <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: view.item }\" />\n } @else {\n <!-- En una l\u00EDnea: cualquier salto entre trozos se pintar\u00EDa como un espacio -->\n <span class=\"ps-bs__option-label\">@for (part of view.labelParts; track $index) {@if (part.match) {<mark class=\"ps-bs__match\">{{ part.text }}</mark>} @else {<span>{{ part.text }}</span>}}</span>\n @if (view.subtitle) {\n <span class=\"ps-bs__option-subtitle\">{{ view.subtitle }}</span>\n }\n }\n </div>\n\n <!-- Check indicator (decorativo: el estado lo da aria-selected) -->\n @if (data.multiple) {\n <mat-checkbox [checked]=\"view.selected\" [disabled]=\"view.disabled\" [tabIndex]=\"-1\" aria-hidden=\"true\" (click)=\"$event.preventDefault()\" />\n } @else if (view.selected) {\n <mat-icon class=\"ps-bs__option-check\" aria-hidden=\"true\">check_circle</mat-icon>\n }\n </div>\n }\n\n <!-- Fallo al cargar m\u00E1s p\u00E1ginas: se conservan las cargadas y se ofrece reintentar -->\n @if (hasError() && !isLoading() && options().length > 0) {\n <div class=\"ps-bs__list-end ps-bs__list-error\" role=\"alert\">\n {{ texts().paginatedSelect.errorTitle }}\n <button matButton (click)=\"retry()\">\n <mat-icon>refresh</mat-icon>\n {{ texts().paginatedSelect.retry }}\n </button>\n </div>\n }\n\n <!-- Loading more (pagination) / end of list -->\n @if (isLoadingMore()) {\n <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n <span class=\"ps-bs__loading-more-dot\"></span>\n <span class=\"ps-bs__loading-more-dot\"></span>\n <span class=\"ps-bs__loading-more-dot\"></span>\n <span class=\"ps-bs__loading-more-text\">{{ texts().paginatedSelect.loadingMore }}</span>\n </div>\n } @else if (allLoaded() && options().length > 0) {\n <div class=\"ps-bs__list-end\">{{ texts().paginatedSelect.endOfList }}</div>\n }\n </div>\n </div>\n\n <!-- \u2500\u2500 Aviso de cambios sin confirmar (m\u00FAltiple) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (confirmDiscard()) {\n <div class=\"ps-bs__discard\" role=\"alertdialog\" [attr.aria-label]=\"texts().paginatedSelect.discardChanges\">\n <span class=\"ps-bs__discard-text\">{{ texts().paginatedSelect.discardChanges }}</span>\n <div class=\"ps-bs__discard-actions\">\n <button matButton (click)=\"keepEditing()\">{{ texts().paginatedSelect.keepEditing }}</button>\n <button matButton=\"tonal\" (click)=\"discardChanges()\">{{ texts().paginatedSelect.discard }}</button>\n </div>\n </div>\n }\n\n <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__footer\">\n <span class=\"ps-bs__footer-count\">\n @if (data.multiple) {\n {{ texts().paginatedSelect.selectedCount(selectedCount(), total()) }}\n } @else {\n {{ texts().paginatedSelect.resultsCount(total()) }}\n }\n </span>\n\n @if (data.multiple) {\n <div class=\"ps-bs__footer-actions\">\n @if (selectedCount() > 0) {\n <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n }\n <button matButton=\"filled\" (click)=\"confirm()\">\n {{ data.confirmLabel }}@if (isDirty() && selectedCount() > 0) { ({{ selectedCount() }})}\n </button>\n </div>\n }\n </div>\n</div>\n", styles: ["::ng-deep .cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}::ng-deep .ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}::ng-deep .ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0;overflow:hidden;display:flex;flex-direction:column;width:min(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px);max-height:min(86vh,760px);border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px color-mix(in srgb,var(--mat-sys-shadow) 12%,transparent),0 8px 24px color-mix(in srgb,var(--mat-sys-shadow) 14%,transparent),0 24px 48px color-mix(in srgb,var(--mat-sys-shadow) 10%,transparent)}@media (max-width: 600px){::ng-deep .cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}::ng-deep .ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh;max-height:90vh;border-radius:24px 24px 0 0;border-bottom:none}}:host{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 14px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px color-mix(in srgb,var(--mat-sys-shadow) 35%,transparent)}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__search-hint{padding:6px 16px 0;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.ps-bs__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.ps-bs__list:focus-visible{outline:none}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option--active{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.ps-bs__option--pinned+.ps-bs__option:not(.ps-bs__option--pinned){margin-top:9px;position:relative}.ps-bs__option--pinned+.ps-bs__option:not(.ps-bs__option--pinned):before{content:\"\";position:absolute;top:-6px;left:12px;right:12px;border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__option ::ng-deep .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--tone-1{background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}.ps-bs__option-avatar--tone-2{background:var(--mat-sys-tertiary-container);color:var(--mat-sys-on-tertiary-container)}.ps-bs__option-avatar--tone-3{background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant)}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__match{background:none;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--mat-sys-primary) 60%,transparent);text-underline-offset:3px}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__discard{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:10px 16px 10px 24px;background:var(--mat-sys-inverse-surface);color:var(--mat-sys-inverse-on-surface);animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__discard-text{flex:1 1 200px;font:var(--mat-sys-body-medium)}.ps-bs__discard-actions{display:flex;gap:8px;margin-left:auto}.ps-bs__discard .mat-mdc-button{--mat-button-text-label-text-color: var(--mat-sys-inverse-primary)}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4233
4576
|
}
|
|
4234
4577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelectBottomSheetComponent, decorators: [{
|
|
4235
4578
|
type: Component,
|
|
@@ -4247,7 +4590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4247
4590
|
MatCheckboxModule,
|
|
4248
4591
|
MatTooltipModule,
|
|
4249
4592
|
MatBadgeModule,
|
|
4250
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ps-bs\">\r\n\r\n <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"ps-bs__handle\">\r\n <div class=\"ps-bs__handle-bar\"></div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Header (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\r\n <div class=\"ps-bs__header-top\">\r\n <div class=\"ps-bs__title-area\">\r\n <span class=\"ps-bs__title\">{{ data.title }}</span>\r\n @if (data.multiple && selectedCount() > 0) {\r\n <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\r\n }\r\n </div>\r\n <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"texts().common.close\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Pill search -->\r\n @if (data.showSearch) {\r\n <div class=\"ps-bs__search\">\r\n <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\r\n <input\r\n class=\"ps-bs__search-input\"\r\n #searchInput\r\n type=\"text\"\r\n [value]=\"query() ?? ''\"\r\n [placeholder]=\"data.searchPlaceholder\"\r\n (input)=\"onQueryInput($event, bodyContainer)\"\r\n />\r\n @if (searchInput.value.length > 0) {\r\n <button\r\n class=\"ps-bs__search-clear\"\r\n type=\"button\"\r\n [attr.aria-label]=\"texts().common.clearSearch\"\r\n (click)=\"clearQuery(bodyContainer); $event.stopPropagation()\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\r\n <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\r\n\r\n <!-- Extra filters projection -->\r\n @if (data.extraFiltersTemplate) {\r\n <div class=\"ps-bs__extra-filters\">\r\n <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\r\n </div>\r\n }\r\n\r\n <!-- Selected chips (custom lightweight chips) -->\r\n @if (data.multiple && selectedItems().length > 0) {\r\n <div class=\"ps-bs__selected-chips\">\r\n @for (item of selectedItems(); track item[data.config.valueKey]) {\r\n <div class=\"ps-bs__chip\">\r\n <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\r\n <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"removeSelectedChip(item)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Select all (sticky top of the scroll area) -->\r\n @if (data.multiple && data.showSelectAll && options().length > 0) {\r\n <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\r\n <mat-checkbox\r\n [checked]=\"allSelected()\"\r\n [indeterminate]=\"someSelected()\"\r\n (click)=\"$event.preventDefault()\"\r\n />\r\n <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\r\n </div>\r\n }\r\n\r\n <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"ps-bs__list\">\r\n\r\n <!-- Skeleton loading (only for the first page) -->\r\n @if (isInitialLoading()) {\r\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n <div class=\"ps-bs__skeleton\">\r\n <div class=\"ps-bs__skeleton-avatar\"></div>\r\n <div class=\"ps-bs__skeleton-content\">\r\n <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\r\n <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n\r\n <!-- Error state -->\r\n @if (hasError() && !isLoading() && options().length === 0) {\r\n <div class=\"ps-bs__state ps-bs__error\">\r\n <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\r\n <mat-icon>error_outline</mat-icon>\r\n </div>\r\n <div class=\"ps-bs__state-title\">{{ texts().paginatedSelect.errorTitle }}</div>\r\n <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.errorHint }}</div>\r\n <button matButton=\"tonal\" (click)=\"retry()\">\r\n <mat-icon>refresh</mat-icon>\r\n {{ texts().paginatedSelect.retry }}\r\n </button>\r\n </div>\r\n }\r\n\r\n <!-- Empty state -->\r\n @if (!hasError() && options().length === 0 && !isLoading()) {\r\n <div class=\"ps-bs__state ps-bs__empty\">\r\n <div class=\"ps-bs__state-icon-wrap\">\r\n <mat-icon>search_off</mat-icon>\r\n </div>\r\n <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\r\n @if (query()) {\r\n <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.noResultsHint }}</div>\r\n <button matButton (click)=\"clearQuery(bodyContainer)\">\r\n {{ texts().paginatedSelect.clearSearch }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Option rows -->\r\n @for (item of options(); track item[data.config.valueKey]) {\r\n @let disabled = data.config.disabled ? data.config.disabled(item) : false;\r\n @let selected = isSelected(item);\r\n @let avatarImg = getAvatarImage(item);\r\n\r\n <div\r\n class=\"ps-bs__option\"\r\n [class.ps-bs__option--selected]=\"selected\"\r\n [class.ps-bs__option--disabled]=\"disabled\"\r\n matRipple\r\n [matRippleDisabled]=\"disabled\"\r\n (click)=\"toggleItem(item)\"\r\n role=\"option\"\r\n [attr.aria-selected]=\"selected\"\r\n [attr.aria-disabled]=\"disabled\"\r\n >\r\n <!-- Avatar (al seleccionar se voltea a un check, estilo Gmail) -->\r\n <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\r\n @if (selected) {\r\n <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\r\n } @else if (avatarImg) {\r\n <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\r\n } @else if (data.config.avatarText) {\r\n {{ getAvatarText(item) }}\r\n } @else if (data.config.avatarIcon) {\r\n <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\r\n } @else {\r\n {{ getAvatarText(item) }}\r\n }\r\n </div>\r\n\r\n <!-- Content -->\r\n <div class=\"ps-bs__option-content\">\r\n @if (data.optionTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\r\n } @else {\r\n <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\r\n @if (data.config.subtitle) {\r\n <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Check indicator -->\r\n @if (data.multiple) {\r\n <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\r\n } @else if (selected) {\r\n <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Loading more (pagination) / end of list -->\r\n @if (isLoadingMore()) {\r\n <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\r\n <span class=\"ps-bs__loading-more-dot\"></span>\r\n <span class=\"ps-bs__loading-more-dot\"></span>\r\n <span class=\"ps-bs__loading-more-dot\"></span>\r\n <span class=\"ps-bs__loading-more-text\">{{ texts().paginatedSelect.loadingMore }}</span>\r\n </div>\r\n } @else if (allLoaded() && options().length > 0) {\r\n <div class=\"ps-bs__list-end\">{{ texts().paginatedSelect.endOfList }}</div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"ps-bs__footer\">\r\n <span class=\"ps-bs__footer-count\">\r\n @if (data.multiple) {\r\n {{ texts().paginatedSelect.selectedCount(selectedCount(), total()) }}\r\n } @else {\r\n {{ texts().paginatedSelect.resultsCount(total()) }}\r\n }\r\n </span>\r\n\r\n @if (data.multiple) {\r\n <div class=\"ps-bs__footer-actions\">\r\n @if (selectedCount() > 0) {\r\n <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\r\n }\r\n <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px)!important;max-height:min(86vh,760px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 14px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"] }]
|
|
4593
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ps-bs\">\n\n <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__handle\">\n <div class=\"ps-bs__handle-bar\"></div>\n </div>\n\n <!-- \u2500\u2500 Header (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n <div class=\"ps-bs__header-top\">\n <div class=\"ps-bs__title-area\">\n <span class=\"ps-bs__title\">{{ data.title }}</span>\n @if (data.multiple && selectedCount() > 0) {\n <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n }\n </div>\n <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"texts().common.close\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Pill search -->\n @if (data.showSearch) {\n <div class=\"ps-bs__search\">\n <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n <input\n class=\"ps-bs__search-input\"\n type=\"text\"\n role=\"combobox\"\n aria-expanded=\"true\"\n aria-autocomplete=\"list\"\n autocomplete=\"off\"\n [value]=\"query() ?? ''\"\n [placeholder]=\"data.searchPlaceholder\"\n [attr.aria-label]=\"data.searchPlaceholder\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeId()\"\n (input)=\"onQueryInput($event, bodyContainer)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n @if (query()) {\n <button\n class=\"ps-bs__search-clear\"\n type=\"button\"\n [attr.aria-label]=\"texts().common.clearSearch\"\n (click)=\"clearQuery(bodyContainer); $event.stopPropagation()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n @if (searchTooShort()) {\n <div class=\"ps-bs__search-hint\" aria-live=\"polite\">{{ texts().paginatedSelect.minSearch(minSearch) }}</div>\n }\n }\n </div>\n\n <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\n\n <!-- Extra filters projection -->\n @if (data.extraFiltersTemplate) {\n <div class=\"ps-bs__extra-filters\">\n <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n </div>\n }\n\n <!-- Selected chips (custom lightweight chips) -->\n @if (data.multiple && selectedItems().length > 0) {\n <div class=\"ps-bs__selected-chips\">\n @for (item of selectedItems(); track item[data.config.valueKey]) {\n <div class=\"ps-bs__chip\">\n <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"texts().paginatedSelect.removeItem(getLabel(item))\" (click)=\"removeSelectedChip(item)\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n </div>\n }\n\n <!-- Select all (sticky top of the scroll area) -->\n @if (data.multiple && data.showSelectAll && options().length > 0) {\n <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n <mat-checkbox\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (click)=\"$event.preventDefault()\"\n />\n <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n </div>\n }\n\n <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div\n class=\"ps-bs__list\"\n role=\"listbox\"\n [id]=\"listId\"\n [attr.aria-label]=\"data.title\"\n [attr.aria-multiselectable]=\"data.multiple || null\"\n [attr.aria-busy]=\"isLoading() || null\"\n [attr.tabindex]=\"data.showSearch ? null : 0\"\n [attr.aria-activedescendant]=\"data.showSearch ? null : activeId()\"\n (keydown)=\"onListKeydown($event)\">\n\n <!-- Skeleton loading (only for the first page) -->\n @if (isInitialLoading()) {\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n <div class=\"ps-bs__skeleton\">\n <div class=\"ps-bs__skeleton-avatar\"></div>\n <div class=\"ps-bs__skeleton-content\">\n <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n </div>\n </div>\n }\n }\n\n <!-- Error state -->\n @if (hasError() && !isLoading() && options().length === 0) {\n <div class=\"ps-bs__state ps-bs__error\">\n <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n <mat-icon>error_outline</mat-icon>\n </div>\n <div class=\"ps-bs__state-title\">{{ texts().paginatedSelect.errorTitle }}</div>\n <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.errorHint }}</div>\n <button matButton=\"tonal\" (click)=\"retry()\">\n <mat-icon>refresh</mat-icon>\n {{ texts().paginatedSelect.retry }}\n </button>\n </div>\n }\n\n <!-- Empty state -->\n @if (!hasError() && options().length === 0 && !isLoading()) {\n <div class=\"ps-bs__state ps-bs__empty\">\n <div class=\"ps-bs__state-icon-wrap\">\n <mat-icon>search_off</mat-icon>\n </div>\n <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n @if (query()) {\n <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.noResultsHint }}</div>\n <button matButton (click)=\"clearQuery(bodyContainer)\">\n {{ texts().paginatedSelect.clearSearch }}\n </button>\n }\n </div>\n }\n\n <!-- Option rows (estado precalculado en optionViews) -->\n @for (view of optionViews(); track view.key) {\n <div\n class=\"ps-bs__option\"\n [class.ps-bs__option--selected]=\"view.selected\"\n [class.ps-bs__option--disabled]=\"view.disabled\"\n [class.ps-bs__option--active]=\"view.index === activeIndex()\"\n [class.ps-bs__option--pinned]=\"view.pinned\"\n matRipple\n [matRippleDisabled]=\"view.disabled\"\n role=\"option\"\n [id]=\"view.id\"\n [attr.aria-selected]=\"view.selected\"\n [attr.aria-disabled]=\"view.disabled || null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onOptionClick(view)\"\n >\n <!-- Avatar (al seleccionar se voltea a un check, estilo Gmail) -->\n <div\n class=\"ps-bs__option-avatar\"\n [class]=\"'ps-bs__option-avatar--tone-' + view.avatarTone\"\n [class.ps-bs__option-avatar--selected]=\"view.selected\"\n aria-hidden=\"true\">\n @if (view.selected) {\n <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\n } @else if (view.avatarImage) {\n <img [src]=\"view.avatarImage\" alt=\"\" (error)=\"onAvatarError(view.item)\" loading=\"lazy\" />\n } @else if (data.config.avatarText) {\n {{ view.avatarText }}\n } @else if (data.config.avatarIcon) {\n <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n } @else {\n {{ view.avatarText }}\n }\n </div>\n\n <!-- Content -->\n <div class=\"ps-bs__option-content\">\n @if (data.optionTemplate) {\n <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: view.item }\" />\n } @else {\n <!-- En una l\u00EDnea: cualquier salto entre trozos se pintar\u00EDa como un espacio -->\n <span class=\"ps-bs__option-label\">@for (part of view.labelParts; track $index) {@if (part.match) {<mark class=\"ps-bs__match\">{{ part.text }}</mark>} @else {<span>{{ part.text }}</span>}}</span>\n @if (view.subtitle) {\n <span class=\"ps-bs__option-subtitle\">{{ view.subtitle }}</span>\n }\n }\n </div>\n\n <!-- Check indicator (decorativo: el estado lo da aria-selected) -->\n @if (data.multiple) {\n <mat-checkbox [checked]=\"view.selected\" [disabled]=\"view.disabled\" [tabIndex]=\"-1\" aria-hidden=\"true\" (click)=\"$event.preventDefault()\" />\n } @else if (view.selected) {\n <mat-icon class=\"ps-bs__option-check\" aria-hidden=\"true\">check_circle</mat-icon>\n }\n </div>\n }\n\n <!-- Fallo al cargar m\u00E1s p\u00E1ginas: se conservan las cargadas y se ofrece reintentar -->\n @if (hasError() && !isLoading() && options().length > 0) {\n <div class=\"ps-bs__list-end ps-bs__list-error\" role=\"alert\">\n {{ texts().paginatedSelect.errorTitle }}\n <button matButton (click)=\"retry()\">\n <mat-icon>refresh</mat-icon>\n {{ texts().paginatedSelect.retry }}\n </button>\n </div>\n }\n\n <!-- Loading more (pagination) / end of list -->\n @if (isLoadingMore()) {\n <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n <span class=\"ps-bs__loading-more-dot\"></span>\n <span class=\"ps-bs__loading-more-dot\"></span>\n <span class=\"ps-bs__loading-more-dot\"></span>\n <span class=\"ps-bs__loading-more-text\">{{ texts().paginatedSelect.loadingMore }}</span>\n </div>\n } @else if (allLoaded() && options().length > 0) {\n <div class=\"ps-bs__list-end\">{{ texts().paginatedSelect.endOfList }}</div>\n }\n </div>\n </div>\n\n <!-- \u2500\u2500 Aviso de cambios sin confirmar (m\u00FAltiple) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (confirmDiscard()) {\n <div class=\"ps-bs__discard\" role=\"alertdialog\" [attr.aria-label]=\"texts().paginatedSelect.discardChanges\">\n <span class=\"ps-bs__discard-text\">{{ texts().paginatedSelect.discardChanges }}</span>\n <div class=\"ps-bs__discard-actions\">\n <button matButton (click)=\"keepEditing()\">{{ texts().paginatedSelect.keepEditing }}</button>\n <button matButton=\"tonal\" (click)=\"discardChanges()\">{{ texts().paginatedSelect.discard }}</button>\n </div>\n </div>\n }\n\n <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__footer\">\n <span class=\"ps-bs__footer-count\">\n @if (data.multiple) {\n {{ texts().paginatedSelect.selectedCount(selectedCount(), total()) }}\n } @else {\n {{ texts().paginatedSelect.resultsCount(total()) }}\n }\n </span>\n\n @if (data.multiple) {\n <div class=\"ps-bs__footer-actions\">\n @if (selectedCount() > 0) {\n <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n }\n <button matButton=\"filled\" (click)=\"confirm()\">\n {{ data.confirmLabel }}@if (isDirty() && selectedCount() > 0) { ({{ selectedCount() }})}\n </button>\n </div>\n }\n </div>\n</div>\n", styles: ["::ng-deep .cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}::ng-deep .ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}::ng-deep .ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0;overflow:hidden;display:flex;flex-direction:column;width:min(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px);max-height:min(86vh,760px);border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px color-mix(in srgb,var(--mat-sys-shadow) 12%,transparent),0 8px 24px color-mix(in srgb,var(--mat-sys-shadow) 14%,transparent),0 24px 48px color-mix(in srgb,var(--mat-sys-shadow) 10%,transparent)}@media (max-width: 600px){::ng-deep .cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}::ng-deep .ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh;max-height:90vh;border-radius:24px 24px 0 0;border-bottom:none}}:host{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 14px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px color-mix(in srgb,var(--mat-sys-shadow) 35%,transparent)}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__search-hint{padding:6px 16px 0;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.ps-bs__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.ps-bs__list:focus-visible{outline:none}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option--active{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.ps-bs__option--pinned+.ps-bs__option:not(.ps-bs__option--pinned){margin-top:9px;position:relative}.ps-bs__option--pinned+.ps-bs__option:not(.ps-bs__option--pinned):before{content:\"\";position:absolute;top:-6px;left:12px;right:12px;border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__option ::ng-deep .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--tone-1{background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}.ps-bs__option-avatar--tone-2{background:var(--mat-sys-tertiary-container);color:var(--mat-sys-on-tertiary-container)}.ps-bs__option-avatar--tone-3{background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant)}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__match{background:none;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--mat-sys-primary) 60%,transparent);text-underline-offset:3px}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__discard{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:10px 16px 10px 24px;background:var(--mat-sys-inverse-surface);color:var(--mat-sys-inverse-on-surface);animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__discard-text{flex:1 1 200px;font:var(--mat-sys-body-medium)}.ps-bs__discard-actions{display:flex;gap:8px;margin-left:auto}.ps-bs__discard .mat-mdc-button{--mat-button-text-label-text-color: var(--mat-sys-inverse-primary)}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"] }]
|
|
4251
4594
|
}], ctorParameters: () => [] });
|
|
4252
4595
|
|
|
4253
4596
|
class NgxPaginatedSelect {
|
|
@@ -4259,6 +4602,8 @@ class NgxPaginatedSelect {
|
|
|
4259
4602
|
_parentFormGroup = inject(FormGroupDirective, { optional: true });
|
|
4260
4603
|
_parentForm = inject(NgForm, { optional: true });
|
|
4261
4604
|
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
4605
|
+
_destroyRef = inject(DestroyRef);
|
|
4606
|
+
_host = inject(ElementRef);
|
|
4262
4607
|
texts = inject(NgxTexts).texts;
|
|
4263
4608
|
// ─── Inputs ────────────────────────────────────────────────────────────────
|
|
4264
4609
|
/** Label that floats on the form field */
|
|
@@ -4344,18 +4689,42 @@ class NgxPaginatedSelect {
|
|
|
4344
4689
|
_suppressEmit = false;
|
|
4345
4690
|
/** Huella de la última selección aplicada desde el input `selectedItems`. */
|
|
4346
4691
|
_lastSyncedSelection = null;
|
|
4692
|
+
/** Primera página de la última apertura: la siguiente se pinta al instante mientras recarga. */
|
|
4693
|
+
_pageCache = { value: null };
|
|
4694
|
+
/** Claves ya pedidas a config.loadByKeys (no se repiten aunque fallen). */
|
|
4695
|
+
_requestedKeys = new Set();
|
|
4696
|
+
/** Resolviendo etiquetas con config.loadByKeys. */
|
|
4697
|
+
isResolving = signal(false, ...(ngDevMode ? [{ debugName: "isResolving" }] : []));
|
|
4347
4698
|
// ─── Computed ──────────────────────────────────────────────────────────────
|
|
4348
4699
|
isDisabled = computed(() => this.disabled() || this._cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
4700
|
+
/** Todas las etiquetas seleccionadas, separadas por comas (tooltip del modo texto). */
|
|
4701
|
+
fullLabel = computed(() => this._selectedItems().map(i => this.getLabel(i)).join(', '), ...(ngDevMode ? [{ debugName: "fullLabel" }] : []));
|
|
4702
|
+
/** Lo que se ve en el modo texto: en múltiple, las 3 primeras y «y N más». */
|
|
4349
4703
|
selectedLabel = computed(() => {
|
|
4350
4704
|
const items = this._selectedItems();
|
|
4351
4705
|
if (items.length === 0)
|
|
4352
4706
|
return '';
|
|
4353
|
-
|
|
4707
|
+
if (!this.multiple())
|
|
4708
|
+
return this.getLabel(items[0]);
|
|
4709
|
+
const shown = items.slice(0, 3).map(i => this.getLabel(i));
|
|
4710
|
+
return this.texts().paginatedSelect.summary(shown, items.length - shown.length);
|
|
4354
4711
|
}, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
|
|
4355
4712
|
hasSelection = computed(() => this._selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
|
|
4356
4713
|
showChips = computed(() => this.multiple() && this.displayMode() === 'chips', ...(ngDevMode ? [{ debugName: "showChips" }] : []));
|
|
4357
4714
|
displayedChips = computed(() => this._selectedItems().slice(0, this.maxChipsDisplayed()), ...(ngDevMode ? [{ debugName: "displayedChips" }] : []));
|
|
4358
|
-
|
|
4715
|
+
/**
|
|
4716
|
+
* En fila (chipsDirection="row"), cuántos de los chips mostrados caben enteros en el ancho del
|
|
4717
|
+
* campo; null = sin medir. Los que no caben se ocultan y pasan a contar en el «+N», en vez de
|
|
4718
|
+
* quedar cortados a medias.
|
|
4719
|
+
*/
|
|
4720
|
+
_fittingChips = signal(null, ...(ngDevMode ? [{ debugName: "_fittingChips" }] : []));
|
|
4721
|
+
/** Chips visibles de verdad: los de maxChipsDisplayed que caben (en fila) o todos (en columna). */
|
|
4722
|
+
visibleChipCount = computed(() => {
|
|
4723
|
+
const shown = this.displayedChips().length;
|
|
4724
|
+
const fit = this._fittingChips();
|
|
4725
|
+
return this.chipsDirection() === 'row' && fit !== null ? Math.min(shown, fit) : shown;
|
|
4726
|
+
}, ...(ngDevMode ? [{ debugName: "visibleChipCount" }] : []));
|
|
4727
|
+
remainingChipsCount = computed(() => Math.max(0, this._selectedItems().length - this.visibleChipCount()), ...(ngDevMode ? [{ debugName: "remainingChipsCount" }] : []));
|
|
4359
4728
|
/** ErrorStateMatcher que refleja el estado del control del formulario. */
|
|
4360
4729
|
errorStateMatcher = {
|
|
4361
4730
|
isErrorState: () => !!(this._ngControl?.invalid && (this._ngControl?.touched || this._isParentFormSubmitted())),
|
|
@@ -4365,13 +4734,13 @@ class NgxPaginatedSelect {
|
|
|
4365
4734
|
return this._parentFormGroup?.submitted || this._parentForm?.submitted || false;
|
|
4366
4735
|
}
|
|
4367
4736
|
/**
|
|
4368
|
-
* Obligatorio si el control del formulario tiene el validador `required
|
|
4369
|
-
*
|
|
4370
|
-
* igual que hace Material con un `<input matInput>` normal.
|
|
4737
|
+
* Obligatorio si el control del formulario tiene el validador `required`: el mat-form-field pinta
|
|
4738
|
+
* el asterisco. Signal (no método en plantilla) que se actualiza en ngDoCheck.
|
|
4371
4739
|
*/
|
|
4372
|
-
isRequired(
|
|
4373
|
-
|
|
4374
|
-
}
|
|
4740
|
+
isRequired = signal(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
4741
|
+
/** Control visible según el modo (chips o texto), para recalcular su error con OnPush. */
|
|
4742
|
+
_chipGrid = viewChild(MatChipGrid, ...(ngDevMode ? [{ debugName: "_chipGrid" }] : []));
|
|
4743
|
+
_textInput = viewChild(MatInput, ...(ngDevMode ? [{ debugName: "_textInput" }] : []));
|
|
4375
4744
|
// Etiquetas efectivas (override por input o valor por defecto de NgxTexts)
|
|
4376
4745
|
effectiveSearchPlaceholder = computed(() => this.searchPlaceholder() ?? this.texts().common.search, ...(ngDevMode ? [{ debugName: "effectiveSearchPlaceholder" }] : []));
|
|
4377
4746
|
effectiveNoResults = computed(() => this.noResultsMessage() ?? this.texts().select.noResults, ...(ngDevMode ? [{ debugName: "effectiveNoResults" }] : []));
|
|
@@ -4389,9 +4758,45 @@ class NgxPaginatedSelect {
|
|
|
4389
4758
|
const fingerprint = JSON.stringify(incoming.map(item => item?.[key]));
|
|
4390
4759
|
if (fingerprint === this._lastSyncedSelection)
|
|
4391
4760
|
return;
|
|
4761
|
+
// La primera vez sin selectedItems no hay nada que aplicar: si se pusiera [] se perdería
|
|
4762
|
+
// el valor que writeValue ya ha escrito (el efecto corre después que el formulario)
|
|
4763
|
+
const first = this._lastSyncedSelection === null;
|
|
4392
4764
|
this._lastSyncedSelection = fingerprint;
|
|
4765
|
+
if (first && incoming.length === 0)
|
|
4766
|
+
return;
|
|
4393
4767
|
this._selectedItems.set(incoming);
|
|
4394
4768
|
});
|
|
4769
|
+
// Si el endpoint cambia, la primera página guardada ya no vale
|
|
4770
|
+
effect(() => {
|
|
4771
|
+
this.endpoint();
|
|
4772
|
+
this._pageCache.value = null;
|
|
4773
|
+
});
|
|
4774
|
+
// Elementos que solo tienen la clave (writeValue con ids): se piden a config.loadByKeys
|
|
4775
|
+
effect(() => {
|
|
4776
|
+
const items = this._selectedItems();
|
|
4777
|
+
untracked(() => this._resolvePartials(items));
|
|
4778
|
+
});
|
|
4779
|
+
// Chips en fila: se vuelve a medir al cambiar los chips, la dirección o el ancho del campo
|
|
4780
|
+
let observed = null;
|
|
4781
|
+
const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => this._measureChips());
|
|
4782
|
+
this._destroyRef.onDestroy(() => resize?.disconnect());
|
|
4783
|
+
afterRenderEffect(() => {
|
|
4784
|
+
this.displayedChips();
|
|
4785
|
+
this.texts();
|
|
4786
|
+
if (this.chipsDirection() !== 'row' || !this.showChips()) {
|
|
4787
|
+
this._fittingChips.set(null);
|
|
4788
|
+
return;
|
|
4789
|
+
}
|
|
4790
|
+
const grid = this._host.nativeElement.querySelector('.ps-trigger__chip-grid');
|
|
4791
|
+
if (grid !== observed) {
|
|
4792
|
+
if (observed)
|
|
4793
|
+
resize?.unobserve(observed);
|
|
4794
|
+
if (grid)
|
|
4795
|
+
resize?.observe(grid);
|
|
4796
|
+
observed = grid;
|
|
4797
|
+
}
|
|
4798
|
+
this._measureChips();
|
|
4799
|
+
});
|
|
4395
4800
|
// Estado interno → formulario + outputs (se omite cuando el cambio viene de writeValue).
|
|
4396
4801
|
effect(() => {
|
|
4397
4802
|
const items = this._selectedItems();
|
|
@@ -4426,6 +4831,36 @@ class NgxPaginatedSelect {
|
|
|
4426
4831
|
this.innerControl.enable({ emitEvent: false });
|
|
4427
4832
|
});
|
|
4428
4833
|
}
|
|
4834
|
+
ngAfterViewInit() {
|
|
4835
|
+
// formControlName asigna su control después de registrar el value accessor: aquí ya está
|
|
4836
|
+
this._syncFormState();
|
|
4837
|
+
}
|
|
4838
|
+
ngDoCheck() {
|
|
4839
|
+
// Validadores añadidos después, resetForm que quita el «enviado»…: no avisan con eventos
|
|
4840
|
+
this._syncFormState();
|
|
4841
|
+
}
|
|
4842
|
+
/** Cuenta los chips que acaban dentro del ancho visible del grid (al menos uno). */
|
|
4843
|
+
_measureChips() {
|
|
4844
|
+
if (this.chipsDirection() !== 'row')
|
|
4845
|
+
return;
|
|
4846
|
+
const grid = this._host.nativeElement.querySelector('.ps-trigger__chip-grid');
|
|
4847
|
+
if (!grid)
|
|
4848
|
+
return;
|
|
4849
|
+
const limit = grid.getBoundingClientRect().right + 0.5;
|
|
4850
|
+
const chips = Array.from(grid.querySelectorAll('.ps-trigger__chip'));
|
|
4851
|
+
const fit = chips.filter(chip => chip.getBoundingClientRect().right <= limit).length;
|
|
4852
|
+
this._fittingChips.set(Math.max(1, fit));
|
|
4853
|
+
}
|
|
4854
|
+
_syncFormState() {
|
|
4855
|
+
this.isRequired.set(this._ngControl?.control?.hasValidator(Validators.required) ?? false);
|
|
4856
|
+
const field = this._chipGrid() ?? this._textInput();
|
|
4857
|
+
if (!field)
|
|
4858
|
+
return;
|
|
4859
|
+
const before = field.errorState;
|
|
4860
|
+
field.updateErrorState();
|
|
4861
|
+
if (field.errorState !== before)
|
|
4862
|
+
this._changeDetectorRef.markForCheck();
|
|
4863
|
+
}
|
|
4429
4864
|
// ─── ControlValueAccessor ───────────────────────────────────────────────────
|
|
4430
4865
|
writeValue(value) {
|
|
4431
4866
|
const key = this.config().valueKey;
|
|
@@ -4486,7 +4921,8 @@ class NgxPaginatedSelect {
|
|
|
4486
4921
|
getLabel(item) {
|
|
4487
4922
|
const cfg = this.config();
|
|
4488
4923
|
const keyVal = String(item[cfg.valueKey] ?? '');
|
|
4489
|
-
|
|
4924
|
+
// Solo con la clave (writeValue con ids) displayedLabel daría «undefined undefined»
|
|
4925
|
+
if (!cfg.displayedLabel || Object.keys(item).length <= 1)
|
|
4490
4926
|
return keyVal;
|
|
4491
4927
|
try {
|
|
4492
4928
|
return cfg.displayedLabel(item) ?? keyVal;
|
|
@@ -4495,6 +4931,36 @@ class NgxPaginatedSelect {
|
|
|
4495
4931
|
return keyVal;
|
|
4496
4932
|
}
|
|
4497
4933
|
}
|
|
4934
|
+
/** Pide a config.loadByKeys los elementos de los que solo se conoce la clave. */
|
|
4935
|
+
_resolvePartials(items) {
|
|
4936
|
+
const loadByKeys = this.config().loadByKeys;
|
|
4937
|
+
if (!loadByKeys)
|
|
4938
|
+
return;
|
|
4939
|
+
const key = this.config().valueKey;
|
|
4940
|
+
const missing = items
|
|
4941
|
+
.filter(item => item != null && item[key] != null && Object.keys(item).length === 1)
|
|
4942
|
+
.map(item => item[key])
|
|
4943
|
+
.filter(k => !this._requestedKeys.has(k));
|
|
4944
|
+
if (missing.length === 0)
|
|
4945
|
+
return;
|
|
4946
|
+
missing.forEach(k => this._requestedKeys.add(k));
|
|
4947
|
+
this.isResolving.set(true);
|
|
4948
|
+
loadByKeys(missing)
|
|
4949
|
+
.pipe(takeUntilDestroyed(this._destroyRef))
|
|
4950
|
+
.subscribe({
|
|
4951
|
+
next: loaded => {
|
|
4952
|
+
const byKey = new Map(loaded.map(item => [item[key], item]));
|
|
4953
|
+
const current = this._selectedItems();
|
|
4954
|
+
if (!current.some(item => byKey.has(item[key])))
|
|
4955
|
+
return;
|
|
4956
|
+
// Mismas claves, solo cambian las etiquetas: no es un cambio de valor para el formulario
|
|
4957
|
+
this._suppressEmit = true;
|
|
4958
|
+
this._selectedItems.set(current.map(item => byKey.get(item[key]) ?? item));
|
|
4959
|
+
},
|
|
4960
|
+
error: () => this.isResolving.set(false),
|
|
4961
|
+
complete: () => this.isResolving.set(false),
|
|
4962
|
+
});
|
|
4963
|
+
}
|
|
4498
4964
|
// ─── Bottom sheet ──────────────────────────────────────────────────────────
|
|
4499
4965
|
openBottomSheet(event) {
|
|
4500
4966
|
event.stopPropagation();
|
|
@@ -4521,13 +4987,16 @@ class NgxPaginatedSelect {
|
|
|
4521
4987
|
extraFiltersTemplate: this.extraFiltersTemplate(),
|
|
4522
4988
|
showSelectAll: this.showSelectAll(),
|
|
4523
4989
|
selectAllLabel: this.effectiveSelectAllLabel(),
|
|
4990
|
+
cache: this._pageCache,
|
|
4524
4991
|
};
|
|
4525
4992
|
this._bottomSheet
|
|
4526
4993
|
.open(NgxPaginatedSelectBottomSheetComponent, {
|
|
4527
4994
|
data,
|
|
4528
4995
|
panelClass: 'ngx-paginated-select-panel',
|
|
4529
4996
|
backdropClass: 'ngx-paginated-select-backdrop',
|
|
4530
|
-
autoFocus: data.showSearch ? '.ps-bs__search-input' : '
|
|
4997
|
+
autoFocus: data.showSearch ? '.ps-bs__search-input' : '.ps-bs__list',
|
|
4998
|
+
// En múltiple, Escape y el fondo pasan por el panel: avisa antes de perder cambios
|
|
4999
|
+
disableClose: data.multiple,
|
|
4531
5000
|
})
|
|
4532
5001
|
.afterDismissed()
|
|
4533
5002
|
.subscribe(result => {
|
|
@@ -4564,7 +5033,7 @@ class NgxPaginatedSelect {
|
|
|
4564
5033
|
this._ngControl?.control?.markAsTouched();
|
|
4565
5034
|
}
|
|
4566
5035
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4567
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelect, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraFiltersTemplate: { classPropertyName: "extraFiltersTemplate", publicName: "extraFiltersTemplate", isSignal: true, isRequired: false, transformFunction: null }, maxChipsDisplayed: { classPropertyName: "maxChipsDisplayed", publicName: "maxChipsDisplayed", isSignal: true, isRequired: false, transformFunction: null }, chipsDirection: { classPropertyName: "chipsDirection", publicName: "chipsDirection", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n@if (showChips()) {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n class=\"ps-trigger\"\r\n [class.ps-trigger--disabled]=\"isDisabled()\"\r\n [class.ps-trigger--open]=\"_isOpen()\"\r\n [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\r\n (click)=\"openBottomSheet($event)\"\r\n >\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <mat-chip-grid\r\n #chipGrid\r\n class=\"ps-trigger__chip-grid\"\r\n [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n >\r\n @for (item of displayedChips(); track item[config().valueKey]) {\r\n <mat-chip-row\r\n class=\"ps-trigger__chip\"\r\n [value]=\"item[config().valueKey]\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(item, $event)\"\r\n >\r\n {{ getLabel(item) }}\r\n <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n @if (remainingChipsCount() > 0) {\r\n <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\r\n }\r\n\r\n <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\r\n <input\r\n matInput\r\n [matChipInputFor]=\"chipGrid\"\r\n class=\"ps-trigger__kbd-input\"\r\n [required]=\"isRequired()\"\r\n readonly\r\n role=\"combobox\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n [attr.aria-expanded]=\"_isOpen()\"\r\n [attr.aria-label]=\"label()\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n />\r\n\r\n <div matSuffix class=\"ps-trigger__suffix\">\r\n @if (clearable() && hasSelection() && !isDisabled()) {\r\n <button matIconButton matSuffix [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSelection($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n </div>\r\n\r\n @if (error()) {\r\n <mat-error>{{ error() }}</mat-error>\r\n }\r\n @if (hint()) {\r\n <mat-hint>{{ hint() }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n}\r\n\r\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n@if (!showChips()) {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n class=\"ps-trigger\"\r\n [class.ps-trigger--disabled]=\"isDisabled()\"\r\n [class.ps-trigger--open]=\"_isOpen()\"\r\n (click)=\"openBottomSheet($event)\"\r\n >\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <input\r\n matInput\r\n class=\"ps-trigger__input\"\r\n [required]=\"isRequired()\"\r\n readonly\r\n role=\"combobox\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n [attr.aria-expanded]=\"_isOpen()\"\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n />\r\n\r\n <div matSuffix class=\"ps-trigger__suffix\">\r\n @if (clearable() && hasSelection() && !isDisabled()) {\r\n <button matIconButton matSuffix [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSelection($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n </div>\r\n\r\n @if (error()) {\r\n <mat-error>{{ error() }}</mat-error>\r\n }\r\n @if (hint()) {\r\n <mat-hint>{{ hint() }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger--open{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-focus-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary)}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__kbd-input{width:0;min-width:0;flex:0 0 0;padding:0;margin:0;caret-color:transparent}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden;gap:6px}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip.mat-mdc-chip{height:30px;border:none!important;background-color:var(--mat-sys-secondary-container)!important;color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);box-shadow:none!important;--mdc-chip-elevated-container-elevation: none;--mdc-chip-outline-width: 0}.ps-trigger__chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-focus-overlay{display:none}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--row ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;min-height:56px}.ps-trigger--row .ps-trigger__chip-grid{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ps-trigger--row .ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{min-height:0}.ps-trigger--row .ps-trigger__remaining{flex:0 0 auto}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}.ps-trigger--disabled .ps-trigger__input,.ps-trigger--disabled .ps-trigger__chip,.ps-trigger--disabled .ps-trigger__suffix{opacity:.38}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5036
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelect, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraFiltersTemplate: { classPropertyName: "extraFiltersTemplate", publicName: "extraFiltersTemplate", isSignal: true, isRequired: false, transformFunction: null }, maxChipsDisplayed: { classPropertyName: "maxChipsDisplayed", publicName: "maxChipsDisplayed", isSignal: true, isRequired: false, transformFunction: null }, chipsDirection: { classPropertyName: "chipsDirection", publicName: "chipsDirection", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "_chipGrid", first: true, predicate: MatChipGrid, descendants: true, isSignal: true }, { propertyName: "_textInput", first: true, predicate: MatInput, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n@if (showChips()) {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n class=\"ps-trigger\"\r\n [class.ps-trigger--disabled]=\"isDisabled()\"\r\n [class.ps-trigger--open]=\"_isOpen()\"\r\n [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\r\n (click)=\"openBottomSheet($event)\"\r\n >\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <mat-chip-grid\r\n #chipGrid\r\n class=\"ps-trigger__chip-grid\"\r\n [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n >\r\n @for (item of displayedChips(); track item[config().valueKey]) {\r\n <mat-chip-row\r\n class=\"ps-trigger__chip\"\r\n [class.ps-trigger__chip--overflow]=\"$index >= visibleChipCount()\"\r\n [attr.aria-hidden]=\"$index >= visibleChipCount() || null\"\r\n [value]=\"item[config().valueKey]\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(item, $event)\"\r\n >\r\n {{ getLabel(item) }}\r\n <button matChipRemove [disabled]=\"isDisabled()\" [attr.aria-label]=\"texts().paginatedSelect.removeItem(getLabel(item))\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n @if (remainingChipsCount() > 0) {\r\n <span class=\"ps-trigger__remaining\" [attr.aria-label]=\"texts().paginatedSelect.moreSelected(remainingChipsCount())\">+{{ remainingChipsCount() }}</span>\r\n }\r\n\r\n <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\r\n <input\r\n matInput\r\n [matChipInputFor]=\"chipGrid\"\r\n class=\"ps-trigger__kbd-input\"\r\n [required]=\"isRequired()\"\r\n readonly\r\n role=\"combobox\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n [attr.aria-expanded]=\"_isOpen()\"\r\n [attr.aria-label]=\"label()\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n />\r\n\r\n <div matSuffix class=\"ps-trigger__suffix\">\r\n @if (isResolving()) {\r\n <mat-spinner diameter=\"18\" [attr.aria-label]=\"texts().common.loading\" />\r\n }\r\n @if (clearable() && hasSelection() && !isDisabled()) {\r\n <button matIconButton matSuffix [attr.aria-label]=\"texts().select.clear\" (click)=\"clearSelection($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-icon aria-hidden=\"true\" [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n </div>\r\n\r\n @if (error()) {\r\n <mat-error>{{ error() }}</mat-error>\r\n }\r\n @if (hint()) {\r\n <mat-hint>{{ hint() }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n}\r\n\r\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n@if (!showChips()) {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n class=\"ps-trigger\"\r\n [class.ps-trigger--disabled]=\"isDisabled()\"\r\n [class.ps-trigger--open]=\"_isOpen()\"\r\n (click)=\"openBottomSheet($event)\"\r\n >\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <input\r\n matInput\r\n class=\"ps-trigger__input\"\r\n [required]=\"isRequired()\"\r\n readonly\r\n role=\"combobox\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n [attr.aria-expanded]=\"_isOpen()\"\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [attr.title]=\"multiple() && fullLabel() !== selectedLabel() ? fullLabel() : null\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n />\r\n\r\n <div matSuffix class=\"ps-trigger__suffix\">\r\n @if (isResolving()) {\r\n <mat-spinner diameter=\"18\" [attr.aria-label]=\"texts().common.loading\" />\r\n }\r\n @if (clearable() && hasSelection() && !isDisabled()) {\r\n <button matIconButton matSuffix [attr.aria-label]=\"texts().select.clear\" (click)=\"clearSelection($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-icon aria-hidden=\"true\" [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n </div>\r\n\r\n @if (error()) {\r\n <mat-error>{{ error() }}</mat-error>\r\n }\r\n @if (hint()) {\r\n <mat-hint>{{ hint() }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger--open{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-focus-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary)}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__kbd-input{width:0;min-width:0;flex:0 0 0;padding:0;margin:0;caret-color:transparent}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden;gap:6px}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip.mat-mdc-chip{height:30px;border:none!important;background-color:var(--mat-sys-secondary-container)!important;color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);box-shadow:none!important;--mdc-chip-elevated-container-elevation: none;--mdc-chip-outline-width: 0}.ps-trigger__chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-focus-overlay{display:none}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--row ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;min-height:56px}.ps-trigger--row .ps-trigger__chip-grid{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ps-trigger--row .ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{min-height:0}.ps-trigger--row .ps-trigger__remaining{flex:0 0 auto}.ps-trigger--row .ps-trigger__chip--overflow{visibility:hidden}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}.ps-trigger--disabled .ps-trigger__input,.ps-trigger--disabled .ps-trigger__chip,.ps-trigger--disabled .ps-trigger__suffix{opacity:.38}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4568
5037
|
}
|
|
4569
5038
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, decorators: [{
|
|
4570
5039
|
type: Component,
|
|
@@ -4579,8 +5048,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4579
5048
|
MatInputModule,
|
|
4580
5049
|
MatTooltipModule,
|
|
4581
5050
|
MatProgressSpinnerModule,
|
|
4582
|
-
], template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n@if (showChips()) {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n class=\"ps-trigger\"\r\n [class.ps-trigger--disabled]=\"isDisabled()\"\r\n [class.ps-trigger--open]=\"_isOpen()\"\r\n [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\r\n (click)=\"openBottomSheet($event)\"\r\n >\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <mat-chip-grid\r\n #chipGrid\r\n class=\"ps-trigger__chip-grid\"\r\n [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n >\r\n @for (item of displayedChips(); track item[config().valueKey]) {\r\n <mat-chip-row\r\n class=\"ps-trigger__chip\"\r\n [value]=\"item[config().valueKey]\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(item, $event)\"\r\n >\r\n {{ getLabel(item) }}\r\n <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n @if (remainingChipsCount() > 0) {\r\n <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\r\n }\r\n\r\n <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\r\n <input\r\n matInput\r\n [matChipInputFor]=\"chipGrid\"\r\n class=\"ps-trigger__kbd-input\"\r\n [required]=\"isRequired()\"\r\n readonly\r\n role=\"combobox\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n [attr.aria-expanded]=\"_isOpen()\"\r\n [attr.aria-label]=\"label()\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n />\r\n\r\n <div matSuffix class=\"ps-trigger__suffix\">\r\n @if (clearable() && hasSelection() && !isDisabled()) {\r\n <button matIconButton matSuffix [attr.aria-label]=\"texts().
|
|
4583
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], extraFiltersTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFiltersTemplate", required: false }] }], maxChipsDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChipsDisplayed", required: false }] }], chipsDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsDirection", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
5051
|
+
], template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n@if (showChips()) {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n class=\"ps-trigger\"\r\n [class.ps-trigger--disabled]=\"isDisabled()\"\r\n [class.ps-trigger--open]=\"_isOpen()\"\r\n [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\r\n (click)=\"openBottomSheet($event)\"\r\n >\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <mat-chip-grid\r\n #chipGrid\r\n class=\"ps-trigger__chip-grid\"\r\n [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [required]=\"isRequired()\"\r\n >\r\n @for (item of displayedChips(); track item[config().valueKey]) {\r\n <mat-chip-row\r\n class=\"ps-trigger__chip\"\r\n [class.ps-trigger__chip--overflow]=\"$index >= visibleChipCount()\"\r\n [attr.aria-hidden]=\"$index >= visibleChipCount() || null\"\r\n [value]=\"item[config().valueKey]\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(item, $event)\"\r\n >\r\n {{ getLabel(item) }}\r\n <button matChipRemove [disabled]=\"isDisabled()\" [attr.aria-label]=\"texts().paginatedSelect.removeItem(getLabel(item))\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n @if (remainingChipsCount() > 0) {\r\n <span class=\"ps-trigger__remaining\" [attr.aria-label]=\"texts().paginatedSelect.moreSelected(remainingChipsCount())\">+{{ remainingChipsCount() }}</span>\r\n }\r\n\r\n <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\r\n <input\r\n matInput\r\n [matChipInputFor]=\"chipGrid\"\r\n class=\"ps-trigger__kbd-input\"\r\n [required]=\"isRequired()\"\r\n readonly\r\n role=\"combobox\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n [attr.aria-expanded]=\"_isOpen()\"\r\n [attr.aria-label]=\"label()\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n />\r\n\r\n <div matSuffix class=\"ps-trigger__suffix\">\r\n @if (isResolving()) {\r\n <mat-spinner diameter=\"18\" [attr.aria-label]=\"texts().common.loading\" />\r\n }\r\n @if (clearable() && hasSelection() && !isDisabled()) {\r\n <button matIconButton matSuffix [attr.aria-label]=\"texts().select.clear\" (click)=\"clearSelection($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-icon aria-hidden=\"true\" [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n </div>\r\n\r\n @if (error()) {\r\n <mat-error>{{ error() }}</mat-error>\r\n }\r\n @if (hint()) {\r\n <mat-hint>{{ hint() }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n}\r\n\r\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n@if (!showChips()) {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n class=\"ps-trigger\"\r\n [class.ps-trigger--disabled]=\"isDisabled()\"\r\n [class.ps-trigger--open]=\"_isOpen()\"\r\n (click)=\"openBottomSheet($event)\"\r\n >\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <input\r\n matInput\r\n class=\"ps-trigger__input\"\r\n [required]=\"isRequired()\"\r\n readonly\r\n role=\"combobox\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n [attr.aria-expanded]=\"_isOpen()\"\r\n [formControl]=\"innerControl\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [attr.title]=\"multiple() && fullLabel() !== selectedLabel() ? fullLabel() : null\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n />\r\n\r\n <div matSuffix class=\"ps-trigger__suffix\">\r\n @if (isResolving()) {\r\n <mat-spinner diameter=\"18\" [attr.aria-label]=\"texts().common.loading\" />\r\n }\r\n @if (clearable() && hasSelection() && !isDisabled()) {\r\n <button matIconButton matSuffix [attr.aria-label]=\"texts().select.clear\" (click)=\"clearSelection($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-icon aria-hidden=\"true\" [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n </div>\r\n\r\n @if (error()) {\r\n <mat-error>{{ error() }}</mat-error>\r\n }\r\n @if (hint()) {\r\n <mat-hint>{{ hint() }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger--open{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-focus-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary)}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__kbd-input{width:0;min-width:0;flex:0 0 0;padding:0;margin:0;caret-color:transparent}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden;gap:6px}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip.mat-mdc-chip{height:30px;border:none!important;background-color:var(--mat-sys-secondary-container)!important;color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);box-shadow:none!important;--mdc-chip-elevated-container-elevation: none;--mdc-chip-outline-width: 0}.ps-trigger__chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-focus-overlay{display:none}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--row ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;min-height:56px}.ps-trigger--row .ps-trigger__chip-grid{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ps-trigger--row .ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{min-height:0}.ps-trigger--row .ps-trigger__remaining{flex:0 0 auto}.ps-trigger--row .ps-trigger__chip--overflow{visibility:hidden}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}.ps-trigger--disabled .ps-trigger__input,.ps-trigger--disabled .ps-trigger__chip,.ps-trigger--disabled .ps-trigger__suffix{opacity:.38}\n"] }]
|
|
5052
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], extraFiltersTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFiltersTemplate", required: false }] }], maxChipsDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChipsDisplayed", required: false }] }], chipsDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsDirection", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], _chipGrid: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatChipGrid), { isSignal: true }] }], _textInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatInput), { isSignal: true }] }] } });
|
|
4584
5053
|
|
|
4585
5054
|
const UNITLESS_NUMBER = /^-?\d+(\.\d+)?$/;
|
|
4586
5055
|
/**
|
|
@@ -4948,7 +5417,7 @@ class NgxFileInput {
|
|
|
4948
5417
|
this._confirmTimer = setTimeout(() => this.showDropConfirm.set(false), 450);
|
|
4949
5418
|
}
|
|
4950
5419
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4951
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxFileInput, isStandalone: true, selector: "ngx-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesSelected: "filesSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.ngx-fi--default": "variant() === 'default'", "class.ngx-fi--compact": "variant() === 'compact'", "class.ngx-fi--button": "variant() === 'button'", "class.ngx-fi--disabled": "isDisabled()", "class.ngx-fi--dragover": "isDragOver()", "class.ngx-fi--invalid": "showError()" }, classAttribute: "ngx-file-input" }, viewQueries: [{ propertyName: "_nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Input nativo oculto: lo abre la zona o el bot\u00F3n -->\n<input\n #nativeInput\n class=\"ngx-fi__native\"\n type=\"file\"\n hidden\n tabindex=\"-1\"\n [accept]=\"acceptAttr()\"\n [multiple]=\"multiple()\"\n [disabled]=\"isDisabled()\"\n (change)=\"onNativeChange($event)\"\n (cancel)=\"onZoneBlur()\" />\n\n@switch (variant()) {\n @case ('button') {\n <button\n matButton=\"filled\"\n type=\"button\"\n class=\"ngx-fi__button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-describedby]=\"describedBy()\"\n (click)=\"openFilePicker()\"\n (blur)=\"onZoneBlur()\">\n <mat-icon>attach_file</mat-icon>\n {{ resolvedLabel() }}@if (isRequired()) {<span class=\"ngx-fi__required\" aria-hidden=\"true\">*</span>}\n </button>\n @if (hint()) {\n <span class=\"ngx-fi__hint\" [id]=\"id + '-hint'\">{{ hint() }}</span>\n }\n }\n\n @default {\n <!-- Zona de arrastre: es un bot\u00F3n (abre el selector) con la etiqueta como nombre accesible -->\n <div\n class=\"ngx-fi__zone\"\n [class.ngx-fi__zone--compact]=\"variant() === 'compact'\"\n role=\"button\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-describedby]=\"describedBy()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onZoneKeydown($event)\"\n (blur)=\"onZoneBlur()\">\n <mat-icon class=\"ngx-fi__zone-icon\" aria-hidden=\"true\">cloud_upload</mat-icon>\n\n <span class=\"ngx-fi__zone-text\">\n <span class=\"ngx-fi__label\">\n {{ resolvedLabel() }}@if (isRequired()) {<span class=\"ngx-fi__required\" aria-hidden=\"true\">*</span>}\n </span>\n @if (hint()) {\n <span class=\"ngx-fi__hint\" [id]=\"id + '-hint'\">{{ hint() }}</span>\n }\n @if (variant() === 'default') {\n <span class=\"ngx-fi__browse\">{{ texts().fileInput.browse }}</span>\n }\n </span>\n\n @if (showDropConfirm()) {\n <span class=\"ngx-fi__confirm\" aria-hidden=\"true\"><mat-icon>check_circle</mat-icon></span>\n }\n </div>\n }\n}\n\n@if (showError() && error()) {\n <span class=\"ngx-fi__error\" [id]=\"id + '-error'\">{{ error() }}</span>\n}\n\n@if (showPreview() && views().length) {\n <ul class=\"ngx-fi__list\">\n @for (view of views(); track view.item.id) {\n <li class=\"ngx-fi__item\" [class.ngx-fi__item--error]=\"view.error\">\n <span class=\"ngx-fi__thumb\" [attr.data-kind]=\"view.kind\">\n @if (view.item.preview) {\n <img [src]=\"view.item.preview\" alt=\"\" />\n } @else {\n <mat-icon aria-hidden=\"true\">{{ view.icon }}</mat-icon>\n }\n </span>\n\n <span class=\"ngx-fi__info\">\n <span class=\"ngx-fi__name\" [title]=\"view.item.name\">{{ view.item.name }}</span>\n <span class=\"ngx-fi__meta\">\n {{ view.size }}\n @if (view.error) {\n <span class=\"ngx-fi__item-error\"><mat-icon aria-hidden=\"true\">error</mat-icon>{{ view.error }}</span>\n }\n </span>\n </span>\n\n <button\n matIconButton\n type=\"button\"\n class=\"ngx-fi__remove\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"texts().fileInput.remove(view.item.name)\"\n [matTooltip]=\"texts().fileInput.remove(view.item.name)\"\n (click)=\"removeFile(view.item)\">\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n </ul>\n}\n\n<!-- Regi\u00F3n viva fija: a\u00F1adidos, quitados y rechazados -->\n<div class=\"ngx-fi__live\" aria-live=\"polite\">{{ announcement() }}</div>\n", styles: [":host{--ngx-file-input-image-color: var(--mat-sys-primary);--ngx-file-input-pdf-color: var(--mat-sys-error);--ngx-file-input-video-color: var(--mat-sys-tertiary);--ngx-file-input-audio-color: var(--mat-sys-secondary);--ngx-file-input-generic-color: var(--mat-sys-on-surface-variant);display:flex;flex-direction:column;gap:8px}:host(.ngx-fi--button){display:inline-flex;align-items:flex-start}.ngx-fi__zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:180px;padding:32px 24px;border:2px dashed var(--mat-sys-outline-variant);border-radius:var(--mat-sys-corner-large, 16px);background:var(--mat-sys-surface-container-low);color:var(--mat-sys-on-surface);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:border-color .15s,background-color .15s}.ngx-fi__zone:hover{border-color:var(--mat-sys-outline);background:var(--mat-sys-surface-container)}.ngx-fi__zone:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.ngx-fi__zone--compact{flex-direction:row;justify-content:flex-start;gap:16px;min-height:0;padding:16px 20px;border-radius:var(--mat-sys-corner-medium, 12px);text-align:start}.ngx-fi__zone--compact .ngx-fi__zone-icon{width:32px;height:32px;font-size:32px}.ngx-fi__zone--compact .ngx-fi__zone-text{align-items:flex-start}.ngx-fi__zone-icon{flex:none;width:48px;height:48px;font-size:48px;color:var(--mat-sys-on-surface-variant);transition:transform .15s,color .15s}.ngx-fi__zone-text{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.ngx-fi__label{font:var(--mat-sys-title-medium)}.ngx-fi__required{margin-inline-start:2px}.ngx-fi__hint{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.ngx-fi__browse{margin-top:4px;font:var(--mat-sys-label-large);color:var(--mat-sys-primary)}:host(.ngx-fi--dragover) .ngx-fi__zone{border-style:solid;border-color:var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 8%,var(--mat-sys-surface-container-low))}:host(.ngx-fi--dragover) .ngx-fi__zone .ngx-fi__zone-icon{color:var(--mat-sys-primary);transform:scale(1.1)}:host(.ngx-fi--dragover) .ngx-fi__button{outline:2px dashed var(--mat-sys-primary);outline-offset:3px}:host(.ngx-fi--invalid) .ngx-fi__zone{border-color:var(--mat-sys-error)}:host(.ngx-fi--invalid) .ngx-fi__zone .ngx-fi__label,:host(.ngx-fi--invalid) .ngx-fi__zone .ngx-fi__zone-icon{color:var(--mat-sys-error)}:host(.ngx-fi--disabled) .ngx-fi__zone{cursor:default;border-color:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent);background:transparent;color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__zone-icon,:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__hint,:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__browse{color:inherit}.ngx-fi__confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent);pointer-events:none;animation:ngx-fi-flash .45s ease-out forwards}.ngx-fi__confirm mat-icon{width:56px;height:56px;font-size:56px;color:var(--mat-sys-primary)}.ngx-fi__error{padding-inline:4px;font:var(--mat-sys-body-small);color:var(--mat-sys-error)}.ngx-fi__list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}:host(.ngx-fi--button) .ngx-fi__list{align-self:stretch}.ngx-fi__item{display:flex;align-items:center;gap:12px;padding:8px 4px 8px 8px;border:1px solid var(--mat-sys-outline-variant);border-radius:var(--mat-sys-corner-medium, 12px);background:var(--mat-sys-surface-container-lowest);animation:ngx-fi-enter .2s ease-out both}.ngx-fi__item--error{border-color:color-mix(in srgb,var(--mat-sys-error) 40%,transparent);background:color-mix(in srgb,var(--mat-sys-error) 6%,var(--mat-sys-surface-container-lowest))}.ngx-fi__thumb{--ngx-fi-kind-color: var(--ngx-file-input-generic-color);flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--mat-sys-corner-small, 8px);background:color-mix(in srgb,var(--ngx-fi-kind-color) 12%,var(--mat-sys-surface));overflow:hidden}.ngx-fi__thumb[data-kind=image]{--ngx-fi-kind-color: var(--ngx-file-input-image-color)}.ngx-fi__thumb[data-kind=pdf]{--ngx-fi-kind-color: var(--ngx-file-input-pdf-color)}.ngx-fi__thumb[data-kind=video]{--ngx-fi-kind-color: var(--ngx-file-input-video-color)}.ngx-fi__thumb[data-kind=audio]{--ngx-fi-kind-color: var(--ngx-file-input-audio-color)}.ngx-fi__thumb mat-icon{color:var(--ngx-fi-kind-color)}.ngx-fi__thumb img{width:100%;height:100%;object-fit:cover}.ngx-fi__info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ngx-fi__name{overflow:hidden;font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface);text-overflow:ellipsis;white-space:nowrap}.ngx-fi__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.ngx-fi__item-error{display:inline-flex;align-items:center;gap:4px;color:var(--mat-sys-error)}.ngx-fi__item-error mat-icon{width:16px;height:16px;font-size:16px}.ngx-fi__remove{flex:none}.ngx-fi__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@keyframes ngx-fi-enter{0%{opacity:0;transform:translateY(-4px)}}@keyframes ngx-fi-flash{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ngx-fi__item,.ngx-fi__confirm{animation:none}.ngx-fi__zone,.ngx-fi__zone-icon{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5420
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxFileInput, isStandalone: true, selector: "ngx-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesSelected: "filesSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.ngx-fi--default": "variant() === 'default'", "class.ngx-fi--compact": "variant() === 'compact'", "class.ngx-fi--button": "variant() === 'button'", "class.ngx-fi--disabled": "isDisabled()", "class.ngx-fi--dragover": "isDragOver()", "class.ngx-fi--invalid": "showError()" }, classAttribute: "ngx-file-input" }, viewQueries: [{ propertyName: "_nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Input nativo oculto: lo abre la zona o el bot\u00F3n -->\n<input\n #nativeInput\n class=\"ngx-fi__native\"\n type=\"file\"\n hidden\n tabindex=\"-1\"\n [accept]=\"acceptAttr()\"\n [multiple]=\"multiple()\"\n [disabled]=\"isDisabled()\"\n (change)=\"onNativeChange($event)\"\n (cancel)=\"onZoneBlur()\" />\n\n@switch (variant()) {\n @case ('button') {\n <button\n matButton=\"filled\"\n type=\"button\"\n class=\"ngx-fi__button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-describedby]=\"describedBy()\"\n (click)=\"openFilePicker()\"\n (blur)=\"onZoneBlur()\">\n <mat-icon>attach_file</mat-icon>\n {{ resolvedLabel() }}@if (isRequired()) {<span class=\"ngx-fi__required\" aria-hidden=\"true\">*</span>}\n </button>\n @if (hint()) {\n <span class=\"ngx-fi__hint\" [id]=\"id + '-hint'\">{{ hint() }}</span>\n }\n }\n\n @default {\n <!-- Zona de arrastre: es un bot\u00F3n (abre el selector) con la etiqueta como nombre accesible -->\n <div\n class=\"ngx-fi__zone\"\n [class.ngx-fi__zone--compact]=\"variant() === 'compact'\"\n role=\"button\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-describedby]=\"describedBy()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onZoneKeydown($event)\"\n (blur)=\"onZoneBlur()\">\n <mat-icon class=\"ngx-fi__zone-icon\" aria-hidden=\"true\">cloud_upload</mat-icon>\n\n <span class=\"ngx-fi__zone-text\">\n <span class=\"ngx-fi__label\">\n {{ resolvedLabel() }}@if (isRequired()) {<span class=\"ngx-fi__required\" aria-hidden=\"true\">*</span>}\n </span>\n @if (hint()) {\n <span class=\"ngx-fi__hint\" [id]=\"id + '-hint'\">{{ hint() }}</span>\n }\n @if (variant() === 'default') {\n <span class=\"ngx-fi__browse\">{{ texts().fileInput.browse }}</span>\n }\n </span>\n\n @if (showDropConfirm()) {\n <span class=\"ngx-fi__confirm\" aria-hidden=\"true\"><mat-icon>check_circle</mat-icon></span>\n }\n </div>\n }\n}\n\n@if (showError() && error()) {\n <span class=\"ngx-fi__error\" [id]=\"id + '-error'\">{{ error() }}</span>\n}\n\n@if (showPreview() && views().length) {\n <ul class=\"ngx-fi__list\">\n @for (view of views(); track view.item.id) {\n <li class=\"ngx-fi__item\" [class.ngx-fi__item--error]=\"view.error\">\n <span class=\"ngx-fi__thumb\" [attr.data-kind]=\"view.kind\">\n @if (view.item.preview) {\n <img [src]=\"view.item.preview\" alt=\"\" />\n } @else {\n <mat-icon aria-hidden=\"true\">{{ view.icon }}</mat-icon>\n }\n </span>\n\n <span class=\"ngx-fi__info\">\n <span class=\"ngx-fi__name\" [title]=\"view.item.name\">{{ view.item.name }}</span>\n <span class=\"ngx-fi__meta\">\n {{ view.size }}\n @if (view.error) {\n <span class=\"ngx-fi__item-error\"><mat-icon aria-hidden=\"true\">error</mat-icon>{{ view.error }}</span>\n }\n </span>\n </span>\n\n <button\n matIconButton\n type=\"button\"\n class=\"ngx-fi__remove\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"texts().fileInput.remove(view.item.name)\"\n [matTooltip]=\"texts().fileInput.remove(view.item.name)\"\n (click)=\"removeFile(view.item)\">\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n </ul>\n}\n\n<!-- Regi\u00F3n viva fija: a\u00F1adidos, quitados y rechazados -->\n<div class=\"ngx-fi__live\" aria-live=\"polite\">{{ announcement() }}</div>\n", styles: [":host{--ngx-file-input-image-color: var(--mat-sys-primary);--ngx-file-input-pdf-color: var(--mat-sys-error);--ngx-file-input-video-color: var(--mat-sys-tertiary);--ngx-file-input-audio-color: var(--mat-sys-secondary);--ngx-file-input-generic-color: var(--mat-sys-on-surface-variant);display:flex;flex-direction:column;gap:8px}:host(.ngx-fi--button){display:inline-flex;align-items:flex-start}.ngx-fi__zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:180px;padding:32px 24px;border:2px dashed var(--mat-sys-outline-variant);border-radius:var(--mat-sys-corner-large, 16px);background:var(--mat-sys-surface-container-low);color:var(--mat-sys-on-surface);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:border-color .15s,background-color .15s}.ngx-fi__zone:hover{border-color:var(--mat-sys-outline);background:var(--mat-sys-surface-container)}.ngx-fi__zone:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.ngx-fi__zone--compact{flex-direction:row;justify-content:flex-start;gap:16px;min-height:0;padding:16px 20px;border-radius:var(--mat-sys-corner-medium, 12px);text-align:start}.ngx-fi__zone--compact .ngx-fi__zone-icon{width:32px;height:32px;font-size:32px}.ngx-fi__zone--compact .ngx-fi__zone-text{align-items:flex-start}.ngx-fi__zone-icon{flex:none;width:48px;height:48px;font-size:48px;color:var(--mat-sys-on-surface-variant);transition:transform .15s,color .15s}.ngx-fi__zone-text{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.ngx-fi__label{font:var(--mat-sys-title-medium)}.ngx-fi__required{margin-inline-start:2px}.ngx-fi__hint{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.ngx-fi__browse{margin-top:4px;font:var(--mat-sys-label-large);color:var(--mat-sys-primary)}:host(.ngx-fi--dragover) .ngx-fi__zone{border-style:solid;border-color:var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 8%,var(--mat-sys-surface-container-low))}:host(.ngx-fi--dragover) .ngx-fi__zone .ngx-fi__zone-icon{color:var(--mat-sys-primary);transform:scale(1.1)}:host(.ngx-fi--dragover) .ngx-fi__button{outline:2px dashed var(--mat-sys-primary);outline-offset:3px}:host(.ngx-fi--invalid) .ngx-fi__zone{border-color:var(--mat-sys-error)}:host(.ngx-fi--invalid) .ngx-fi__zone .ngx-fi__label,:host(.ngx-fi--invalid) .ngx-fi__zone .ngx-fi__zone-icon{color:var(--mat-sys-error)}:host(.ngx-fi--disabled) .ngx-fi__zone{cursor:default;border-color:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent);background:transparent;color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__zone-icon,:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__hint,:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__browse{color:inherit}.ngx-fi__confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent);pointer-events:none;animation:ngx-fi-flash .45s ease-out forwards}.ngx-fi__confirm mat-icon{width:56px;height:56px;font-size:56px;color:var(--mat-sys-primary)}.ngx-fi__error{padding-inline:4px;font:var(--mat-sys-body-small);color:var(--mat-sys-error)}.ngx-fi__list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}:host(.ngx-fi--button) .ngx-fi__list{align-self:stretch}.ngx-fi__item{display:flex;align-items:center;gap:12px;padding:8px 4px 8px 8px;border:1px solid var(--mat-sys-outline-variant);border-radius:var(--mat-sys-corner-medium, 12px);background:var(--mat-sys-surface-container-lowest);animation:ngx-fi-enter .2s ease-out both}.ngx-fi__item--error{border-color:color-mix(in srgb,var(--mat-sys-error) 40%,transparent);background:color-mix(in srgb,var(--mat-sys-error) 6%,var(--mat-sys-surface-container-lowest))}.ngx-fi__thumb{--ngx-fi-kind-color: var(--ngx-file-input-generic-color);flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--mat-sys-corner-small, 8px);background:color-mix(in srgb,var(--ngx-fi-kind-color) 12%,var(--mat-sys-surface));overflow:hidden}.ngx-fi__thumb[data-kind=image]{--ngx-fi-kind-color: var(--ngx-file-input-image-color)}.ngx-fi__thumb[data-kind=pdf]{--ngx-fi-kind-color: var(--ngx-file-input-pdf-color)}.ngx-fi__thumb[data-kind=video]{--ngx-fi-kind-color: var(--ngx-file-input-video-color)}.ngx-fi__thumb[data-kind=audio]{--ngx-fi-kind-color: var(--ngx-file-input-audio-color)}.ngx-fi__thumb mat-icon{color:var(--ngx-fi-kind-color)}.ngx-fi__thumb img{width:100%;height:100%;object-fit:cover}.ngx-fi__info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ngx-fi__name{overflow:hidden;font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface);text-overflow:ellipsis;white-space:nowrap}.ngx-fi__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.ngx-fi__item-error{display:inline-flex;align-items:center;gap:4px;color:var(--mat-sys-error)}.ngx-fi__item-error mat-icon{width:16px;height:16px;font-size:16px}.ngx-fi__remove{flex:none}.ngx-fi__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@keyframes ngx-fi-enter{0%{opacity:0;transform:translateY(-4px)}}@keyframes ngx-fi-flash{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ngx-fi__item,.ngx-fi__confirm{animation:none}.ngx-fi__zone,.ngx-fi__zone-icon{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4952
5421
|
}
|
|
4953
5422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxFileInput, decorators: [{
|
|
4954
5423
|
type: Component,
|
|
@@ -4970,5 +5439,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4970
5439
|
* Generated bundle index. Do not edit.
|
|
4971
5440
|
*/
|
|
4972
5441
|
|
|
4973
|
-
export { AdvancedFilterService, AdvancedFilterUtils, ColumnConfigService, DatosPantallaService, DialogBodyType, DynamicHostDirective, NGX_EIFFAGE_DEFAULT_TEXTS, NGX_EIFFAGE_TEXTS, NgxAlert, NgxBasicSelect, NgxBasicTable, NgxConfirmDialogComponent, NgxDialog, NgxDialogContext, NgxDialogService, NgxFileInput, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedSelectBottomSheetComponent, NgxPaginatedTable, NgxSkeleton, NgxTablesIntl, NgxTexts, OPERATOR_BY_FILTER_TYPE, PaginatedSearchableSelectComponent, SearchableSelectComponent, USER_ID_FACTORY, base64ToUtf8, includeNoSensible, isFilterOption, provideNgxEiffageTexts };
|
|
5442
|
+
export { AdvancedFilterService, AdvancedFilterUtils, ColumnConfigService, DatosPantallaService, DialogBodyType, DynamicHostDirective, NGX_EIFFAGE_DEFAULT_TEXTS, NGX_EIFFAGE_TEXTS, NgxAlert, NgxBasicSelect, NgxBasicTable, NgxConfirmDialogComponent, NgxDialog, NgxDialogContext, NgxDialogHeader, NgxDialogService, NgxFileInput, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedSelectBottomSheetComponent, NgxPaginatedTable, NgxSkeleton, NgxTablesIntl, NgxTexts, OPERATOR_BY_FILTER_TYPE, PaginatedSearchableSelectComponent, SearchableSelectComponent, USER_ID_FACTORY, base64ToUtf8, includeNoSensible, isFilterOption, provideNgxEiffageTexts };
|
|
4974
5443
|
//# sourceMappingURL=ngx-eiffage-material.mjs.map
|