ngx-eiffage-material 0.1.6 → 0.1.8
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.
|
@@ -6,13 +6,13 @@ import * as i1$1 from '@angular/material/icon';
|
|
|
6
6
|
import { MatIconModule } from '@angular/material/icon';
|
|
7
7
|
import * as i2 from '@angular/material/progress-spinner';
|
|
8
8
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
9
|
-
import * as i3
|
|
9
|
+
import * as i3 from '@angular/forms';
|
|
10
10
|
import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm, Validators, FormArray, FormGroup, FormBuilder, FormsModule } from '@angular/forms';
|
|
11
11
|
import * as i11 from '@angular/common';
|
|
12
12
|
import { CommonModule, DatePipe, isPlatformBrowser, LowerCasePipe } from '@angular/common';
|
|
13
13
|
import * as i2$1 from '@angular/material/chips';
|
|
14
14
|
import { MatChipsModule } from '@angular/material/chips';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i2$2 from '@angular/material/form-field';
|
|
16
16
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
17
17
|
import * as i6 from '@angular/material/progress-bar';
|
|
18
18
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
@@ -21,7 +21,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
|
|
|
21
21
|
import * as i4 from '@angular/material/input';
|
|
22
22
|
import { MatInputModule } from '@angular/material/input';
|
|
23
23
|
import { takeUntilDestroyed, toSignal, rxResource, toObservable } from '@angular/core/rxjs-interop';
|
|
24
|
-
import * as i3$
|
|
24
|
+
import * as i3$1 from '@angular/material/select';
|
|
25
25
|
import { MatSelectModule } from '@angular/material/select';
|
|
26
26
|
import { Subject, fromEvent, startWith, map, takeUntil, catchError, of, merge, skip, debounceTime, distinctUntilChanged } from 'rxjs';
|
|
27
27
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
|
|
@@ -33,9 +33,9 @@ import * as i10 from '@angular/material/datepicker';
|
|
|
33
33
|
import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
|
|
34
34
|
import * as i12 from '@angular/material/menu';
|
|
35
35
|
import { MatMenuModule } from '@angular/material/menu';
|
|
36
|
-
import * as i3$
|
|
36
|
+
import * as i3$3 from '@angular/material/paginator';
|
|
37
37
|
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
|
|
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$3 from '@angular/material/table';
|
|
41
41
|
import { MatTableModule, MatTableDataSource } from '@angular/material/table';
|
|
@@ -47,7 +47,7 @@ import { utils, writeFileXLSX } from 'xlsx';
|
|
|
47
47
|
import { v4 } from 'uuid';
|
|
48
48
|
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
49
49
|
import moment from 'moment';
|
|
50
|
-
import * as i3$
|
|
50
|
+
import * as i3$2 from '@angular/material/slide-toggle';
|
|
51
51
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
52
52
|
import * as i4$1 from '@angular/material/button-toggle';
|
|
53
53
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
@@ -241,7 +241,7 @@ class NgxInputFile {
|
|
|
241
241
|
useExisting: forwardRef(() => NgxInputFile),
|
|
242
242
|
multi: true,
|
|
243
243
|
},
|
|
244
|
-
], viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n (click)=\"onContainerClick()\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n [class.dragover]=\"isDropping()\"\r\n>\r\n <mat-label>{{ label() }}</mat-label>\r\n <mat-chip-grid \r\n #chipGrid \r\n [formControl]=\"internalControl\"\r\n class=\"chips-grid\"\r\n >\r\n @for(file of value(); track file.name + $index) {\r\n <mat-chip-row\r\n (removed)=\"onDeleteFileClick(file)\"\r\n class=\"chip-item\"\r\n [title]=\"file.name\"\r\n >\r\n <div class=\"chip-content\">\r\n <span class=\"chip-label\">\r\n ({{ bytesToMegaBytes(file.size) }} MB) {{ file.name }}\r\n </span>\r\n </div>\r\n <button matChipRemove [attr.aria-label]=\"'Eliminar ' + file.name\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n <input \r\n #inputFileRef\r\n type=\"file\"\r\n [accept]=\"getAccept()\" \r\n [multiple]=\"multiple()\" \r\n (change)=\"onInputchange($event)\"\r\n [matChipInputFor]=\"chipGrid\"\r\n style=\"display: none\"\r\n /> \r\n <mat-hint>{{ isDropping() ? 'Arrastrar archivos aqu\u00ED' : hint() }}</mat-hint>\r\n <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{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);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}.chips-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%}.chip-item{max-width:100%!important;box-sizing:border-box!important}.chip-item ::ng-deep .mdc-evolution-chip__cell{display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__action--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__text-label{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--trailing{display:flex!important;align-items:center!important}.chip-content{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-label{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;line-height:1.5!important}[matChipRemove]{flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important}[matChipRemove] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.dragover ::ng-deep .mat-mdc-text-field-wrapper{border-color:var(--mat-sys-primary);border-width:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { 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: MatTooltipModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type:
|
|
244
|
+
], viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n (click)=\"onContainerClick()\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n [class.dragover]=\"isDropping()\"\r\n>\r\n <mat-label>{{ label() }}</mat-label>\r\n <mat-chip-grid \r\n #chipGrid \r\n [formControl]=\"internalControl\"\r\n class=\"chips-grid\"\r\n >\r\n @for(file of value(); track file.name + $index) {\r\n <mat-chip-row\r\n (removed)=\"onDeleteFileClick(file)\"\r\n class=\"chip-item\"\r\n [title]=\"file.name\"\r\n >\r\n <div class=\"chip-content\">\r\n <span class=\"chip-label\">\r\n ({{ bytesToMegaBytes(file.size) }} MB) {{ file.name }}\r\n </span>\r\n </div>\r\n <button matChipRemove [attr.aria-label]=\"'Eliminar ' + file.name\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n <input \r\n #inputFileRef\r\n type=\"file\"\r\n [accept]=\"getAccept()\" \r\n [multiple]=\"multiple()\" \r\n (change)=\"onInputchange($event)\"\r\n [matChipInputFor]=\"chipGrid\"\r\n style=\"display: none\"\r\n /> \r\n <mat-hint>{{ isDropping() ? 'Arrastrar archivos aqu\u00ED' : hint() }}</mat-hint>\r\n <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{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);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}.chips-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%}.chip-item{max-width:100%!important;box-sizing:border-box!important}.chip-item ::ng-deep .mdc-evolution-chip__cell{display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__action--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__text-label{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--trailing{display:flex!important;align-items:center!important}.chip-content{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-label{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;line-height:1.5!important}[matChipRemove]{flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important}[matChipRemove] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.dragover ::ng-deep .mat-mdc-text-field-wrapper{border-color:var(--mat-sys-primary);border-width:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { 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: MatTooltipModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }] });
|
|
245
245
|
}
|
|
246
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxInputFile, decorators: [{
|
|
247
247
|
type: Component,
|
|
@@ -785,7 +785,7 @@ class NgxBasicSelect {
|
|
|
785
785
|
this._ngControl?.control?.markAsTouched();
|
|
786
786
|
}
|
|
787
787
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
788
|
-
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: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n #matSelect\n [formControl]=\"innerControl\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [required]=\"isRequired()\"\n [multiple]=\"multiple()\"\n [placeholder]=\"placeholder()\"\n (openedChange)=\"onOpenedChange($event)\"\n >\n @if(isLoading()) {\n <!--\n Opcion deshabilitada (no un div): mat-select no abre el panel si no\n tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\n panel abre tambien durante la carga y se ve el indicador.\n -->\n <mat-option disabled class=\"stateOption loadingOption\">\n <mat-spinner diameter=\"18\" />\n <span>{{ intl.loadingMessage }}</span>\n </mat-option>\n } @else {\n <div class=\"searchFilter\">\n <mat-icon class=\"searchIcon\">search</mat-icon>\n <input\n matInput\n #searchInput\n type=\"text\"\n [attr.aria-label]=\"intl.searchPlaceholder\"\n [placeholder]=\"intl.searchPlaceholder\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <button matIconButton [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSearch()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <!--\n Solo se renderizan las opciones que casan con el buscador (mas las\n seleccionadas). Las que no casan se quitan del DOM para que no se puedan\n enfocar con las flechas: con el panel abierto mat-select permite navegar\n a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\n -->\n @for(option of displayedOptions(); track option.value) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </mat-option>\n }\n @if(showNoOptionsMessage()) {\n <mat-option disabled class=\"stateOption noResults\">\n {{ hasData() ? intl.noResultsMessage : intl.noDataMessage }}\n </mat-option>\n }\n }\n </mat-select>\n @if(isLoading()) {\n <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n } @else if(clearable() && (multiple() ? value()?.length : value())) {\n <button\n matIconButton\n matSuffix\n [attr.aria-label]=\"intl.clearSearchTooltip\"\n (click)=\"onClearClick(); $event.stopPropagation()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-error>{{ error() }}</mat-error>\n</mat-form-field>\n\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\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:
|
|
788
|
+
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: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n #matSelect\n [formControl]=\"innerControl\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [required]=\"isRequired()\"\n [multiple]=\"multiple()\"\n [placeholder]=\"placeholder()\"\n (openedChange)=\"onOpenedChange($event)\"\n >\n @if(isLoading()) {\n <!--\n Opcion deshabilitada (no un div): mat-select no abre el panel si no\n tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\n panel abre tambien durante la carga y se ve el indicador.\n -->\n <mat-option disabled class=\"stateOption loadingOption\">\n <mat-spinner diameter=\"18\" />\n <span>{{ intl.loadingMessage }}</span>\n </mat-option>\n } @else {\n <div class=\"searchFilter\">\n <mat-icon class=\"searchIcon\">search</mat-icon>\n <input\n matInput\n #searchInput\n type=\"text\"\n [attr.aria-label]=\"intl.searchPlaceholder\"\n [placeholder]=\"intl.searchPlaceholder\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <button type=\"button\" matIconButton [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSearch()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <!--\n Solo se renderizan las opciones que casan con el buscador (mas las\n seleccionadas). Las que no casan se quitan del DOM para que no se puedan\n enfocar con las flechas: con el panel abierto mat-select permite navegar\n a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\n -->\n @for(option of displayedOptions(); track option.value) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </mat-option>\n }\n @if(showNoOptionsMessage()) {\n <mat-option disabled class=\"stateOption noResults\">\n {{ hasData() ? intl.noResultsMessage : intl.noDataMessage }}\n </mat-option>\n }\n }\n </mat-select>\n @if(isLoading()) {\n <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n } @else if(clearable() && (multiple() ? value()?.length : value())) {\n <button\n matIconButton\n matSuffix\n [attr.aria-label]=\"intl.clearSearchTooltip\"\n (click)=\"onClearClick(); $event.stopPropagation()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-error>{{ error() }}</mat-error>\n</mat-form-field>\n\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\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$1.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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 });
|
|
789
789
|
}
|
|
790
790
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, decorators: [{
|
|
791
791
|
type: Component,
|
|
@@ -797,7 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
797
797
|
MatFormFieldModule,
|
|
798
798
|
ReactiveFormsModule,
|
|
799
799
|
MatProgressSpinnerModule,
|
|
800
|
-
], template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n #matSelect\n [formControl]=\"innerControl\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [required]=\"isRequired()\"\n [multiple]=\"multiple()\"\n [placeholder]=\"placeholder()\"\n (openedChange)=\"onOpenedChange($event)\"\n >\n @if(isLoading()) {\n <!--\n Opcion deshabilitada (no un div): mat-select no abre el panel si no\n tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\n panel abre tambien durante la carga y se ve el indicador.\n -->\n <mat-option disabled class=\"stateOption loadingOption\">\n <mat-spinner diameter=\"18\" />\n <span>{{ intl.loadingMessage }}</span>\n </mat-option>\n } @else {\n <div class=\"searchFilter\">\n <mat-icon class=\"searchIcon\">search</mat-icon>\n <input\n matInput\n #searchInput\n type=\"text\"\n [attr.aria-label]=\"intl.searchPlaceholder\"\n [placeholder]=\"intl.searchPlaceholder\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <button matIconButton [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSearch()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <!--\n Solo se renderizan las opciones que casan con el buscador (mas las\n seleccionadas). Las que no casan se quitan del DOM para que no se puedan\n enfocar con las flechas: con el panel abierto mat-select permite navegar\n a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\n -->\n @for(option of displayedOptions(); track option.value) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </mat-option>\n }\n @if(showNoOptionsMessage()) {\n <mat-option disabled class=\"stateOption noResults\">\n {{ hasData() ? intl.noResultsMessage : intl.noDataMessage }}\n </mat-option>\n }\n }\n </mat-select>\n @if(isLoading()) {\n <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n } @else if(clearable() && (multiple() ? value()?.length : value())) {\n <button\n matIconButton\n matSuffix\n [attr.aria-label]=\"intl.clearSearchTooltip\"\n (click)=\"onClearClick(); $event.stopPropagation()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-error>{{ error() }}</mat-error>\n</mat-form-field>\n\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\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"] }]
|
|
800
|
+
], template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n #matSelect\n [formControl]=\"innerControl\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [required]=\"isRequired()\"\n [multiple]=\"multiple()\"\n [placeholder]=\"placeholder()\"\n (openedChange)=\"onOpenedChange($event)\"\n >\n @if(isLoading()) {\n <!--\n Opcion deshabilitada (no un div): mat-select no abre el panel si no\n tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\n panel abre tambien durante la carga y se ve el indicador.\n -->\n <mat-option disabled class=\"stateOption loadingOption\">\n <mat-spinner diameter=\"18\" />\n <span>{{ intl.loadingMessage }}</span>\n </mat-option>\n } @else {\n <div class=\"searchFilter\">\n <mat-icon class=\"searchIcon\">search</mat-icon>\n <input\n matInput\n #searchInput\n type=\"text\"\n [attr.aria-label]=\"intl.searchPlaceholder\"\n [placeholder]=\"intl.searchPlaceholder\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <button type=\"button\" matIconButton [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSearch()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <!--\n Solo se renderizan las opciones que casan con el buscador (mas las\n seleccionadas). Las que no casan se quitan del DOM para que no se puedan\n enfocar con las flechas: con el panel abierto mat-select permite navegar\n a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\n -->\n @for(option of displayedOptions(); track option.value) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </mat-option>\n }\n @if(showNoOptionsMessage()) {\n <mat-option disabled class=\"stateOption noResults\">\n {{ hasData() ? intl.noResultsMessage : intl.noDataMessage }}\n </mat-option>\n }\n }\n </mat-select>\n @if(isLoading()) {\n <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n } @else if(clearable() && (multiple() ? value()?.length : value())) {\n <button\n matIconButton\n matSuffix\n [attr.aria-label]=\"intl.clearSearchTooltip\"\n (click)=\"onClearClick(); $event.stopPropagation()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-error>{{ error() }}</mat-error>\n</mat-form-field>\n\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\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"] }]
|
|
801
801
|
}], 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 }] }] } });
|
|
802
802
|
|
|
803
803
|
var DialogBodyType;
|
|
@@ -1547,7 +1547,7 @@ class ConfigureTableColumnsComponent {
|
|
|
1547
1547
|
this.dialogRef.close();
|
|
1548
1548
|
}
|
|
1549
1549
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureTableColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1550
|
-
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>{{intl.configureColumnsTitle}} {{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> {{intl.hasFiltersAppliedText}}</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 ? intl.unpinColumnTooltip : intl.pinColumnTooltip\"\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]=\"intl.moveUpTooltip\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n <button [matTooltip]=\"intl.moveDownTooltip\" 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>{{intl.noteLabel}}</span> {{intl.hideColumnWithFiltersNote}}</p>\r\n \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"undefined\">{{intl.closeButtonLabel}}</button>\r\n <button matButton (click)=\"onResetClick()\">{{intl.resetColumnsButtonLabel}}</button>\r\n <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">{{intl.confirmButtonLabel}}</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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$
|
|
1550
|
+
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>{{intl.configureColumnsTitle}} {{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> {{intl.hasFiltersAppliedText}}</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 ? intl.unpinColumnTooltip : intl.pinColumnTooltip\"\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]=\"intl.moveUpTooltip\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n <button [matTooltip]=\"intl.moveDownTooltip\" 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>{{intl.noteLabel}}</span> {{intl.hideColumnWithFiltersNote}}</p>\r\n \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"undefined\">{{intl.closeButtonLabel}}</button>\r\n <button matButton (click)=\"onResetClick()\">{{intl.resetColumnsButtonLabel}}</button>\r\n <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">{{intl.confirmButtonLabel}}</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: i1$1.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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] });
|
|
1551
1551
|
}
|
|
1552
1552
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureTableColumnsComponent, decorators: [{
|
|
1553
1553
|
type: Component,
|
|
@@ -1710,7 +1710,7 @@ class PaginatedSearchableSelectComponent {
|
|
|
1710
1710
|
});
|
|
1711
1711
|
}
|
|
1712
1712
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1713
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSearchableSelectComponent, isStandalone: true, selector: "ngx-paginated-searchable-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, 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 [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() || intl.searchPlaceholder }}</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>{{ intl.getRemoveOptionText(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\">{{ intl.noResultsMessage }}</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 {{ intl.showMoreLabel }}\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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type:
|
|
1713
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSearchableSelectComponent, isStandalone: true, selector: "ngx-paginated-searchable-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, 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 [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() || intl.searchPlaceholder }}</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>{{ intl.getRemoveOptionText(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\">{{ intl.noResultsMessage }}</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 {{ intl.showMoreLabel }}\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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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$1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }] });
|
|
1714
1714
|
}
|
|
1715
1715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSearchableSelectComponent, decorators: [{
|
|
1716
1716
|
type: Component,
|
|
@@ -1811,7 +1811,7 @@ class SearchableSelectComponent {
|
|
|
1811
1811
|
return results.length;
|
|
1812
1812
|
}
|
|
1813
1813
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1814
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SearchableSelectComponent, isStandalone: true, selector: "ngx-searchable-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, 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 [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() || intl.searchPlaceholder }}</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>{{ intl.getRemoveOptionText(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\">{{ intl.noResultsMessage }}</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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type:
|
|
1814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SearchableSelectComponent, isStandalone: true, selector: "ngx-searchable-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, 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 [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() || intl.searchPlaceholder }}</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>{{ intl.getRemoveOptionText(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\">{{ intl.noResultsMessage }}</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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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$1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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 }] });
|
|
1815
1815
|
}
|
|
1816
1816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchableSelectComponent, decorators: [{
|
|
1817
1817
|
type: Component,
|
|
@@ -1881,7 +1881,7 @@ class AdvancedFilterRuleComponent {
|
|
|
1881
1881
|
operatorOptionLabel = (filterOperator) => this.filterOperatorLabel()[filterOperator];
|
|
1882
1882
|
operatorOptionValue = (filterOperator) => filterOperator;
|
|
1883
1883
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1884
|
-
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 \r\n matIconButton \r\n [matTooltip]=\"intl.deleteFilterTooltip\" \r\n (click)=\"deleteFilter.emit(getRuleId())\"\r\n class=\"deleteButton\"\r\n type=\"button\">\r\n <mat-icon>delete</mat-icon>\r\n</button>\r\n\r\n<ngx-searchable-select\r\n [control]=\"getKey()\"\r\n [options]=\"columns()\"\r\n [optionLabel]=\"keyOptionLabel\"\r\n [optionValue]=\"keyOptionValue\"\r\n (optionChange)=\"onKeyChange($event)\"\r\n [selectLabel]=\"intl.fieldLabel\"\r\n [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n<ngx-searchable-select\r\n [control]=\"getOperator()\"\r\n [options]=\"getOperatorsOption(getKey().value)\"\r\n [optionLabel]=\"operatorOptionLabel\"\r\n [optionValue]=\"operatorOptionValue\"\r\n [selectLabel]=\"intl.conditionLabel\"\r\n [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\r\n <mat-form-field>\r\n <mat-label>{{intl.valueLabel}}</mat-label>\r\n <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\r\n <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n </mat-form-field>\r\n}\r\n\r\n@if (getFilterType(getKey().value) == 'option' || getFilterType(getKey().value) == 'option-multiple') {\r\n @if(getColumnSelected(getKey().value)?.endpointForPaginatedFilterOptions) {\r\n <ngx-paginated-searchable-select \r\n [control]=\"getValue()\"\r\n [endpoint]=\"getColumnSelected(getKey().value)!.endpointForPaginatedFilterOptions!\"\r\n [filters]=\"getColumnSelected(getKey().value)!.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n [selectLabel]=\"intl.valueLabel\"\r\n [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n [error]=\"intl.requiredFieldError\"\r\n />\r\n } @else {\r\n <ngx-searchable-select\r\n [control]=\"getValue()\"\r\n [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\r\n [selectLabel]=\"intl.valueLabel\"\r\n [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n [error]=\"intl.requiredFieldError\"\r\n />\r\n }\r\n}\r\n\r\n@if(getFilterType(getKey().value) == 'date' || getFilterType(getKey().value) == 'date-range') {\r\n <mat-form-field>\r\n <mat-label>{{intl.valueLabel}}</mat-label>\r\n <input\r\n [formControl]=\"getValue()\"\r\n matInput \r\n [matDatepicker]=\"picker\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n </mat-form-field>\r\n}\r\n\r\n\r\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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3
|
|
1884
|
+
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 \r\n matIconButton \r\n [matTooltip]=\"intl.deleteFilterTooltip\" \r\n (click)=\"deleteFilter.emit(getRuleId())\"\r\n class=\"deleteButton\"\r\n type=\"button\">\r\n <mat-icon>delete</mat-icon>\r\n</button>\r\n\r\n<ngx-searchable-select\r\n [control]=\"getKey()\"\r\n [options]=\"columns()\"\r\n [optionLabel]=\"keyOptionLabel\"\r\n [optionValue]=\"keyOptionValue\"\r\n (optionChange)=\"onKeyChange($event)\"\r\n [selectLabel]=\"intl.fieldLabel\"\r\n [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n<ngx-searchable-select\r\n [control]=\"getOperator()\"\r\n [options]=\"getOperatorsOption(getKey().value)\"\r\n [optionLabel]=\"operatorOptionLabel\"\r\n [optionValue]=\"operatorOptionValue\"\r\n [selectLabel]=\"intl.conditionLabel\"\r\n [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\r\n <mat-form-field>\r\n <mat-label>{{intl.valueLabel}}</mat-label>\r\n <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\r\n <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n </mat-form-field>\r\n}\r\n\r\n@if (getFilterType(getKey().value) == 'option' || getFilterType(getKey().value) == 'option-multiple') {\r\n @if(getColumnSelected(getKey().value)?.endpointForPaginatedFilterOptions) {\r\n <ngx-paginated-searchable-select \r\n [control]=\"getValue()\"\r\n [endpoint]=\"getColumnSelected(getKey().value)!.endpointForPaginatedFilterOptions!\"\r\n [filters]=\"getColumnSelected(getKey().value)!.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n [selectLabel]=\"intl.valueLabel\"\r\n [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n [error]=\"intl.requiredFieldError\"\r\n />\r\n } @else {\r\n <ngx-searchable-select\r\n [control]=\"getValue()\"\r\n [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\r\n [selectLabel]=\"intl.valueLabel\"\r\n [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n [error]=\"intl.requiredFieldError\"\r\n />\r\n }\r\n}\r\n\r\n@if(getFilterType(getKey().value) == 'date' || getFilterType(getKey().value) == 'date-range') {\r\n <mat-form-field>\r\n <mat-label>{{intl.valueLabel}}</mat-label>\r\n <input\r\n [formControl]=\"getValue()\"\r\n matInput \r\n [matDatepicker]=\"picker\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n </mat-form-field>\r\n}\r\n\r\n\r\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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "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: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
|
|
1885
1885
|
}
|
|
1886
1886
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterRuleComponent, decorators: [{
|
|
1887
1887
|
type: Component,
|
|
@@ -1927,7 +1927,7 @@ class AdvancedFilterGroupComponent {
|
|
|
1927
1927
|
return this.group().get('filters').controls;
|
|
1928
1928
|
}
|
|
1929
1929
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1930
|
-
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 {{intl.addFilterButtonLabel}}\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 {{intl.addGroupButtonLabel}}\r\n </button>\r\n } @else {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"intl.addFilterButtonLabel\" \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]=\"intl.addGroupButtonLabel\" \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]=\"intl.deleteGroupTooltip\" \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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3
|
|
1930
|
+
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 {{intl.addFilterButtonLabel}}\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 {{intl.addGroupButtonLabel}}\r\n </button>\r\n } @else {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"intl.addFilterButtonLabel\" \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]=\"intl.addGroupButtonLabel\" \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]=\"intl.deleteGroupTooltip\" \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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
1931
1931
|
}
|
|
1932
1932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterGroupComponent, decorators: [{
|
|
1933
1933
|
type: Component,
|
|
@@ -2001,7 +2001,7 @@ class ConfigureAdvancedFilterComponent {
|
|
|
2001
2001
|
}
|
|
2002
2002
|
}
|
|
2003
2003
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureAdvancedFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2004
|
-
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>{{intl.advancedFiltersDialogTitle}} {{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>{{intl.templateNameLabel}}</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>{{intl.templateNameRequiredError}}</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>{{intl.advancedFiltersHelpTitle}}</strong></p>\r\n <p class=\"helper\">\r\n <strong>{{intl.groupLabel}} </strong>{{intl.advancedFiltersGroupHelp}}<br>\r\n <strong>{{intl.filterLabel}} </strong>{{intl.advancedFiltersRuleHelp}}\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\">{{intl.closeButtonLabel}}</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{intl.saveButtonLabel}}</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{intl.saveAndApplyButtonLabel}}</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
|
|
2004
|
+
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>{{intl.advancedFiltersDialogTitle}} {{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>{{intl.templateNameLabel}}</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>{{intl.templateNameRequiredError}}</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>{{intl.advancedFiltersHelpTitle}}</strong></p>\r\n <p class=\"helper\">\r\n <strong>{{intl.groupLabel}} </strong>{{intl.advancedFiltersGroupHelp}}<br>\r\n <strong>{{intl.filterLabel}} </strong>{{intl.advancedFiltersRuleHelp}}\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\">{{intl.closeButtonLabel}}</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{intl.saveButtonLabel}}</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{intl.saveAndApplyButtonLabel}}</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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "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" }] });
|
|
2005
2005
|
}
|
|
2006
2006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureAdvancedFilterComponent, decorators: [{
|
|
2007
2007
|
type: Component,
|
|
@@ -2581,7 +2581,7 @@ class NgxPaginatedTable {
|
|
|
2581
2581
|
return topOverlay === this.overlayRef.hostElement;
|
|
2582
2582
|
}
|
|
2583
2583
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2584
|
-
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?.() ?? intl.createButtonLabel\" \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]=\"intl.editColumnsTooltip\" 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]=\"intl.advancedFiltersLabel\"\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>{{ intl.newAdvancedFilterLabel }}</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]=\"intl.getEditAdvancedFilterTooltip(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]=\"intl.getDeleteAdvancedFilterTooltip(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]=\"intl.selectionActionsTooltip\"\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>{{ intl.deselectAllLabel }}</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]=\"intl.deselectAllLabel\"\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]=\"intl.exportTooltip\" [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>{{ intl.exportToExcelLabel }}</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>{{ intl.exportToPdfLabel }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (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 ?? intl.searchPlaceholder\" [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]=\"intl.removeAdvancedFilterTooltip\" 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]=\"intl.dateRangeStartPlaceholder\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input \r\n matEndDate \r\n [placeholder]=\"intl.dateRangeEndPlaceholder\"\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>{{ intl.actionsLabel }}</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) ?? intl.editTooltip\" \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) ?? intl.deleteTooltip\" \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() ? intl.loadingMessage : intl.noDataMessage }}</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>{{ intl.totalPerPageLabel }}</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>{{ intl.totalGeneralLabel }}</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$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$4.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: i1$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.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: i1$2.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: ["control", "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: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "pipe", type: OnlyUpperFirstCharacterPipe, name: "ngxOnlyUpperFirstCharacter" }] });
|
|
2584
|
+
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?.() ?? intl.createButtonLabel\" \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]=\"intl.editColumnsTooltip\" 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]=\"intl.advancedFiltersLabel\"\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>{{ intl.newAdvancedFilterLabel }}</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]=\"intl.getEditAdvancedFilterTooltip(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]=\"intl.getDeleteAdvancedFilterTooltip(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]=\"intl.selectionActionsTooltip\"\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>{{ intl.deselectAllLabel }}</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]=\"intl.deselectAllLabel\"\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]=\"intl.exportTooltip\" [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>{{ intl.exportToExcelLabel }}</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>{{ intl.exportToPdfLabel }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (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 ?? intl.searchPlaceholder\" [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]=\"intl.removeAdvancedFilterTooltip\" 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]=\"intl.dateRangeStartPlaceholder\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input \r\n matEndDate \r\n [placeholder]=\"intl.dateRangeEndPlaceholder\"\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>{{ intl.actionsLabel }}</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) ?? intl.editTooltip\" \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) ?? intl.deleteTooltip\" \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() ? intl.loadingMessage : intl.noDataMessage }}</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>{{ intl.totalPerPageLabel }}</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>{{ intl.totalGeneralLabel }}</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$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$3.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: i1$1.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: i1$2.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: ["control", "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: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "pipe", type: OnlyUpperFirstCharacterPipe, name: "ngxOnlyUpperFirstCharacter" }] });
|
|
2585
2585
|
}
|
|
2586
2586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, decorators: [{
|
|
2587
2587
|
type: Component,
|
|
@@ -3165,7 +3165,7 @@ class NgxBasicTable {
|
|
|
3165
3165
|
});
|
|
3166
3166
|
}
|
|
3167
3167
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3168
|
-
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?.() ?? intl.createButtonLabel\" \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]=\"intl.editColumnsTooltip\" 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]=\"intl.selectionActionsTooltip\"\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>{{ intl.deselectAllLabel }}</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]=\"intl.deselectAllLabel\"\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]=\"intl.exportTooltip\" [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>{{ intl.exportToExcelLabel }}</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>{{ intl.exportToPdfLabel }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (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 ?? intl.searchPlaceholder\" [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]=\"intl.dateRangeStartPlaceholder\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input \r\n matEndDate \r\n [placeholder]=\"intl.dateRangeEndPlaceholder\"\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>{{ intl.actionsLabel }}</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) ?? intl.editTooltip\" \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) ?? intl.deleteTooltip\" \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() ? intl.loadingMessage : intl.noDataMessage }}</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>{{ intl.totalPerPageLabel }}</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>{{ intl.totalGeneralLabel }}</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$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$4.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: i1$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.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: ["control", "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: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
|
|
3168
|
+
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?.() ?? intl.createButtonLabel\" \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]=\"intl.editColumnsTooltip\" 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]=\"intl.selectionActionsTooltip\"\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>{{ intl.deselectAllLabel }}</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]=\"intl.deselectAllLabel\"\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]=\"intl.exportTooltip\" [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>{{ intl.exportToExcelLabel }}</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>{{ intl.exportToPdfLabel }}</span>\r\n </button>\r\n </mat-menu>\r\n }\r\n\r\n @if(config()().hideFullScreen?.() !== true) {\r\n <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (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 ?? intl.searchPlaceholder\" [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]=\"intl.dateRangeStartPlaceholder\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input \r\n matEndDate \r\n [placeholder]=\"intl.dateRangeEndPlaceholder\"\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>{{ intl.actionsLabel }}</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) ?? intl.editTooltip\" \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) ?? intl.deleteTooltip\" \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() ? intl.loadingMessage : intl.noDataMessage }}</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>{{ intl.totalPerPageLabel }}</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>{{ intl.totalGeneralLabel }}</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$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$3.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: i1$1.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: ["control", "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: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
|
|
3169
3169
|
}
|
|
3170
3170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, decorators: [{
|
|
3171
3171
|
type: Component,
|
|
@@ -3603,6 +3603,14 @@ class NgxPaginatedSelect {
|
|
|
3603
3603
|
_selectedItems = signal([], ...(ngDevMode ? [{ debugName: "_selectedItems" }] : []));
|
|
3604
3604
|
_cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : []));
|
|
3605
3605
|
_isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
|
|
3606
|
+
/**
|
|
3607
|
+
* Control interno que gobierna el estado visual del mat-form-field.
|
|
3608
|
+
* MatInput y MatChipGrid solo reevaluan su errorState (en ngDoCheck) si
|
|
3609
|
+
* tienen un NgControl asociado; sin el, el campo nunca se pintaba en rojo
|
|
3610
|
+
* aunque el control real del formulario fuese invalido. El valor real sigue
|
|
3611
|
+
* viviendo en el CVA: este control solo refleja la etiqueta visible.
|
|
3612
|
+
*/
|
|
3613
|
+
innerControl = new FormControl('');
|
|
3606
3614
|
onChange = () => { };
|
|
3607
3615
|
onTouched = () => { };
|
|
3608
3616
|
/** Evita re-emitir onChange cuando el cambio viene del formulario (writeValue). */
|
|
@@ -3674,8 +3682,22 @@ class NgxPaginatedSelect {
|
|
|
3674
3682
|
*/
|
|
3675
3683
|
const parentSubmit = this._parentFormGroup?.ngSubmit ?? this._parentForm?.ngSubmit;
|
|
3676
3684
|
parentSubmit?.pipe(takeUntilDestroyed()).subscribe(() => {
|
|
3685
|
+
this.innerControl.markAsTouched();
|
|
3677
3686
|
this._changeDetectorRef.markForCheck();
|
|
3678
3687
|
});
|
|
3688
|
+
// El control interno solo refleja la etiqueta visible y el estado deshabilitado.
|
|
3689
|
+
effect(() => {
|
|
3690
|
+
const label = this.selectedLabel();
|
|
3691
|
+
if (this.innerControl.value !== label)
|
|
3692
|
+
this.innerControl.setValue(label, { emitEvent: false });
|
|
3693
|
+
});
|
|
3694
|
+
effect(() => {
|
|
3695
|
+
const disabled = this.isDisabled();
|
|
3696
|
+
if (disabled && this.innerControl.enabled)
|
|
3697
|
+
this.innerControl.disable({ emitEvent: false });
|
|
3698
|
+
else if (!disabled && this.innerControl.disabled)
|
|
3699
|
+
this.innerControl.enable({ emitEvent: false });
|
|
3700
|
+
});
|
|
3679
3701
|
}
|
|
3680
3702
|
// ─── ControlValueAccessor ───────────────────────────────────────────────────
|
|
3681
3703
|
writeValue(value) {
|
|
@@ -3815,7 +3837,7 @@ class NgxPaginatedSelect {
|
|
|
3815
3837
|
this._ngControl?.control?.markAsTouched();
|
|
3816
3838
|
}
|
|
3817
3839
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3818
|
-
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 -->\n@if (showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n [subscriptSizing]=\"subscriptSizing()\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <mat-chip-grid\n #chipGrid\n class=\"ps-trigger__chip-grid\"\n [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\n [disabled]=\"isDisabled()\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [required]=\"isRequired()\"\n >\n @for (item of displayedChips(); track item[config().valueKey]) {\n <mat-chip-row\n class=\"ps-trigger__chip\"\n [value]=\"item[config().valueKey]\"\n [disabled]=\"isDisabled()\"\n (removed)=\"removeChip(item, $event)\"\n >\n {{ getLabel(item) }}\n <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n @if (remainingChipsCount() > 0) {\n <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n }\n\n <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\n <input\n matInput\n [matChipInputFor]=\"chipGrid\"\n class=\"ps-trigger__kbd-input\"\n [required]=\"isRequired()\"\n readonly\n role=\"combobox\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"_isOpen()\"\n [attr.aria-label]=\"label()\"\n (keydown)=\"onTriggerKeydown($event)\"\n />\n\n <div matSuffix class=\"ps-trigger__suffix\">\n @if (clearable() && hasSelection() && !isDisabled()) {\n <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n </div>\n\n @if (error()) {\n <mat-error>{{ error() }}</mat-error>\n }\n @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n }\n </mat-form-field>\n}\n\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 -->\n@if (!showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n [subscriptSizing]=\"subscriptSizing()\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <input\n matInput\n class=\"ps-trigger__input\"\n [required]=\"isRequired()\"\n readonly\n role=\"combobox\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"_isOpen()\"\n [value]=\"selectedLabel()\"\n [disabled]=\"isDisabled()\"\n [errorStateMatcher]=\"errorStateMatcher\"\n (keydown)=\"onTriggerKeydown($event)\"\n />\n\n <div matSuffix class=\"ps-trigger__suffix\">\n @if (clearable() && hasSelection() && !isDisabled()) {\n <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n </div>\n\n @if (error()) {\n <mat-error>{{ error() }}</mat-error>\n }\n @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n }\n </mat-form-field>\n}\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: "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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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 });
|
|
3840
|
+
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 -->\n@if (showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n [subscriptSizing]=\"subscriptSizing()\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <mat-chip-grid\n #chipGrid\n class=\"ps-trigger__chip-grid\"\n [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\n [formControl]=\"innerControl\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [required]=\"isRequired()\"\n >\n @for (item of displayedChips(); track item[config().valueKey]) {\n <mat-chip-row\n class=\"ps-trigger__chip\"\n [value]=\"item[config().valueKey]\"\n [disabled]=\"isDisabled()\"\n (removed)=\"removeChip(item, $event)\"\n >\n {{ getLabel(item) }}\n <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n @if (remainingChipsCount() > 0) {\n <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n }\n\n <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\n <input\n matInput\n [matChipInputFor]=\"chipGrid\"\n class=\"ps-trigger__kbd-input\"\n [required]=\"isRequired()\"\n readonly\n role=\"combobox\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"_isOpen()\"\n [attr.aria-label]=\"label()\"\n (keydown)=\"onTriggerKeydown($event)\"\n />\n\n <div matSuffix class=\"ps-trigger__suffix\">\n @if (clearable() && hasSelection() && !isDisabled()) {\n <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n </div>\n\n @if (error()) {\n <mat-error>{{ error() }}</mat-error>\n }\n @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n }\n </mat-form-field>\n}\n\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 -->\n@if (!showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n [subscriptSizing]=\"subscriptSizing()\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <input\n matInput\n class=\"ps-trigger__input\"\n [required]=\"isRequired()\"\n readonly\n role=\"combobox\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"_isOpen()\"\n [formControl]=\"innerControl\"\n [errorStateMatcher]=\"errorStateMatcher\"\n (keydown)=\"onTriggerKeydown($event)\"\n />\n\n <div matSuffix class=\"ps-trigger__suffix\">\n @if (clearable() && hasSelection() && !isDisabled()) {\n <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n </div>\n\n @if (error()) {\n <mat-error>{{ error() }}</mat-error>\n }\n @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n }\n </mat-form-field>\n}\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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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: i1$1.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 });
|
|
3819
3841
|
}
|
|
3820
3842
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, decorators: [{
|
|
3821
3843
|
type: Component,
|
|
@@ -3830,7 +3852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3830
3852
|
MatInputModule,
|
|
3831
3853
|
MatTooltipModule,
|
|
3832
3854
|
MatProgressSpinnerModule,
|
|
3833
|
-
], 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 -->\n@if (showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n [subscriptSizing]=\"subscriptSizing()\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <mat-chip-grid\n #chipGrid\n class=\"ps-trigger__chip-grid\"\n [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\n [
|
|
3855
|
+
], 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 -->\n@if (showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n [subscriptSizing]=\"subscriptSizing()\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <mat-chip-grid\n #chipGrid\n class=\"ps-trigger__chip-grid\"\n [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\n [formControl]=\"innerControl\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [required]=\"isRequired()\"\n >\n @for (item of displayedChips(); track item[config().valueKey]) {\n <mat-chip-row\n class=\"ps-trigger__chip\"\n [value]=\"item[config().valueKey]\"\n [disabled]=\"isDisabled()\"\n (removed)=\"removeChip(item, $event)\"\n >\n {{ getLabel(item) }}\n <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n @if (remainingChipsCount() > 0) {\n <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n }\n\n <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\n <input\n matInput\n [matChipInputFor]=\"chipGrid\"\n class=\"ps-trigger__kbd-input\"\n [required]=\"isRequired()\"\n readonly\n role=\"combobox\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"_isOpen()\"\n [attr.aria-label]=\"label()\"\n (keydown)=\"onTriggerKeydown($event)\"\n />\n\n <div matSuffix class=\"ps-trigger__suffix\">\n @if (clearable() && hasSelection() && !isDisabled()) {\n <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n </div>\n\n @if (error()) {\n <mat-error>{{ error() }}</mat-error>\n }\n @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n }\n </mat-form-field>\n}\n\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 -->\n@if (!showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n [subscriptSizing]=\"subscriptSizing()\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <input\n matInput\n class=\"ps-trigger__input\"\n [required]=\"isRequired()\"\n readonly\n role=\"combobox\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"_isOpen()\"\n [formControl]=\"innerControl\"\n [errorStateMatcher]=\"errorStateMatcher\"\n (keydown)=\"onTriggerKeydown($event)\"\n />\n\n <div matSuffix class=\"ps-trigger__suffix\">\n @if (clearable() && hasSelection() && !isDisabled()) {\n <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n </div>\n\n @if (error()) {\n <mat-error>{{ error() }}</mat-error>\n }\n @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n }\n </mat-form-field>\n}\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"] }]
|
|
3834
3856
|
}], 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"] }] } });
|
|
3835
3857
|
|
|
3836
3858
|
class NgxSkeleton {
|