ngx-eiffage-material 0.0.22 → 0.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-eiffage-material.mjs +1373 -56
- package/fesm2022/ngx-eiffage-material.mjs.map +1 -1
- package/index.d.ts +252 -12
- package/package.json +1 -1
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, Component, Injectable, inject, output, computed, viewChild, effect, ChangeDetectorRef, signal, afterRenderEffect, untracked, forwardRef, ViewEncapsulation, ViewContainerRef, Directive } from '@angular/core';
|
|
2
|
+
import { input, Component, Injectable, inject, output, computed, viewChild, effect, ChangeDetectorRef, signal, afterRenderEffect, untracked, forwardRef, ViewEncapsulation, ViewContainerRef, Directive, Pipe, InjectionToken, HostListener } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/button';
|
|
4
4
|
import { MatButtonModule } from '@angular/material/button';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i2$2 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
9
|
import * as i1$1 from '@angular/material/card';
|
|
10
10
|
import { MatCardModule } from '@angular/material/card';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i2$1 from '@angular/material/sort';
|
|
12
12
|
import { MatSortModule } from '@angular/material/sort';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i1$2 from '@angular/material/table';
|
|
14
14
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
15
15
|
import * as i5 from '@angular/material/tooltip';
|
|
16
16
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
@@ -18,28 +18,46 @@ import * as i7 from '@angular/material/paginator';
|
|
|
18
18
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
19
19
|
import * as i8 from 'ngx-skeleton-loader';
|
|
20
20
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i12 from '@angular/common';
|
|
22
22
|
import { SlicePipe, TitleCasePipe, LowerCasePipe, UpperCasePipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe, CommonModule } from '@angular/common';
|
|
23
|
-
import * as
|
|
24
|
-
import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
23
|
+
import * as i3 from '@angular/forms';
|
|
24
|
+
import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, Validators, FormArray, FormGroup, FormBuilder } from '@angular/forms';
|
|
25
25
|
import * as i7$1 from '@angular/material/chips';
|
|
26
26
|
import { MatChipsModule } from '@angular/material/chips';
|
|
27
|
-
import * as i2$
|
|
27
|
+
import * as i2$3 from '@angular/material/form-field';
|
|
28
28
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
29
29
|
import * as i8$1 from '@angular/material/progress-bar';
|
|
30
30
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
31
|
-
import * as i1$
|
|
31
|
+
import * as i1$3 from '@angular/material/input';
|
|
32
32
|
import { MatInputModule } from '@angular/material/input';
|
|
33
33
|
import * as i3$1 from '@angular/material/select';
|
|
34
34
|
import { MatSelectModule } from '@angular/material/select';
|
|
35
35
|
import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA, MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
|
36
|
-
import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
|
|
36
|
+
import { Subject, debounceTime, distinctUntilChanged, takeUntil, fromEvent, startWith, map } from 'rxjs';
|
|
37
37
|
import { toSignal, toObservable, rxResource } from '@angular/core/rxjs-interop';
|
|
38
|
-
import * as i2$
|
|
38
|
+
import * as i2$4 from '@angular/material/divider';
|
|
39
39
|
import { MatDividerModule } from '@angular/material/divider';
|
|
40
40
|
import * as i9 from '@angular/material/list';
|
|
41
41
|
import { MatListModule } from '@angular/material/list';
|
|
42
|
-
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
|
|
42
|
+
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
|
|
43
|
+
import * as i15 from '@angular/material/checkbox';
|
|
44
|
+
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
45
|
+
import * as i11 from '@angular/material/datepicker';
|
|
46
|
+
import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
|
|
47
|
+
import * as i13 from '@angular/material/menu';
|
|
48
|
+
import { MatMenuModule } from '@angular/material/menu';
|
|
49
|
+
import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
|
|
50
|
+
import { TemplatePortal } from '@angular/cdk/portal';
|
|
51
|
+
import jsPDF from 'jspdf';
|
|
52
|
+
import autoTable from 'jspdf-autotable';
|
|
53
|
+
import { utils, writeFileXLSX } from 'xlsx';
|
|
54
|
+
import { v4 } from 'uuid';
|
|
55
|
+
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
56
|
+
import moment from 'moment';
|
|
57
|
+
import * as i3$2 from '@angular/material/slide-toggle';
|
|
58
|
+
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
59
|
+
import * as i4 from '@angular/material/button-toggle';
|
|
60
|
+
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
43
61
|
|
|
44
62
|
class NgxLoadingButton {
|
|
45
63
|
isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : [])); //Indica si el botón está cargando
|
|
@@ -51,10 +69,10 @@ class NgxLoadingButton {
|
|
|
51
69
|
spinnerStrokeWidth = input(3, ...(ngDevMode ? [{ debugName: "spinnerStrokeWidth" }] : [])); //StrokeWidth del spinner de carga
|
|
52
70
|
//Por defecto es Primary
|
|
53
71
|
color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : [])); //Color del botón
|
|
54
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
55
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
72
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxLoadingButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxLoadingButton, isStandalone: true, selector: "ngx-loading-button", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, matButton: { classPropertyName: "matButton", publicName: "matButton", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null }, spinnerStrokeWidth: { classPropertyName: "spinnerStrokeWidth", publicName: "spinnerStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\r\n class=\"loadingButton\"\r\n [matButton]=\"matButton()\"\r\n [type]=\"type()\"\r\n [disabled]=\"disabled() || isLoading()\"\r\n [class.isLoading]=\"isLoading()\"\r\n [class]=\"color() ?? ''\"\r\n>\r\n {{ label() }}\r\n</button>\r\n\r\n@if (isLoading()) {\r\n <mat-spinner\r\n class=\"spinnerLoadingButton\"\r\n [diameter]=\"spinnerDiameter()\"\r\n [strokeWidth]=\"spinnerStrokeWidth()\"\r\n />\r\n}\r\n", styles: [":host{display:inline-flex;position:relative}.loadingButton{width:100%}.spinnerLoadingButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.isLoading{--mat-button-filled-disabled-label-text-color: transparent;--mat-button-outlined-disabled-label-text-color: transparent;--mat-button-protected-disabled-label-text-color: transparent;--mat-button-text-disabled-label-text-color: transparent;--mat-button-tonal-disabled-label-text-color: transparent}.secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}.secondarySpinner{--mat-progress-spinner-active-indicator-color: var(--mat-sys-secondary)}.tertiary{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}.tertiarySpinner{--mat-progress-spinner-active-indicator-color: var(--mat-sys-tertiary)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }] });
|
|
56
74
|
}
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxLoadingButton, decorators: [{
|
|
58
76
|
type: Component,
|
|
59
77
|
args: [{ selector: 'ngx-loading-button', imports: [
|
|
60
78
|
MatButtonModule,
|
|
@@ -187,10 +205,10 @@ class CommonTableService {
|
|
|
187
205
|
return value;
|
|
188
206
|
}
|
|
189
207
|
}
|
|
190
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
191
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
208
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
209
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonTableService, providedIn: 'root' });
|
|
192
210
|
}
|
|
193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonTableService, decorators: [{
|
|
194
212
|
type: Injectable,
|
|
195
213
|
args: [{
|
|
196
214
|
providedIn: 'root',
|
|
@@ -261,10 +279,10 @@ class CommonTableComponent {
|
|
|
261
279
|
onDeleteClick(row) {
|
|
262
280
|
this.delete.emit(row);
|
|
263
281
|
}
|
|
264
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
265
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: CommonTableComponent, isStandalone: true, selector: "common-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create", view: "view", download: "download", update: "update", delete: "delete" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card>\r\n <div class=\"tableContainer\">\r\n <div class=\"tableHeader\">\r\n <div class=\"tableHeader__title\">\r\n <span>{{ tableConfig().title }}</span>\r\n </div>\r\n <div class=\"tableHeader__buttons\">\r\n @if(canDoAction('canCreate')) {\r\n <button matMiniFab type=\"button\" (click)=\"onCreateClick()\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n @if(isLoading()) {\r\n <ngx-skeleton-loader [count]=\"tableConfig().skeletonConfig?.count || 5\" />\r\n } @else { \r\n <div class=\"overflowTable\">\r\n <table mat-table class=\"mat-elevation-z8\" [dataSource]=\"datasource()\" class=\"customTable\" matSort>\r\n @for(column of tableConfig().tableColumns; track column.key) {\r\n <!-- Dynamically generate columns -->\r\n <ng-container [matColumnDef]=\"column.key\">\r\n <!-- Header cell definition -->\r\n <th mat-header-cell *matHeaderCellDef>{{ column.displayName }}</th>\r\n \r\n <!-- Data cell definition -->\r\n <td mat-cell *matCellDef=\"let row\">\r\n @switch (column.type) {\r\n @case ('button') {\r\n @if(_commonTableService.isButtonVisible(column, row)) {\r\n <button\r\n [matButton]=\"column.buttonConfig?.variant || 'filled'\"\r\n [class]=\"column.buttonConfig?.color\"\r\n [disabled]=\"_commonTableService.isButtonDisabled(column, row)\"\r\n [matTooltip]=\"column.buttonConfig?.tooltip || ''\"\r\n (click)=\"_commonTableService.onCustomButtonClick(column, row)\"\r\n >\r\n @if(column.buttonConfig?.icon) {\r\n <mat-icon>{{ column.buttonConfig?.icon }}</mat-icon>\r\n }\r\n @if(column.buttonConfig?.text) {\r\n {{ column.buttonConfig?.text }}\r\n }\r\n </button>\r\n }\r\n }\r\n @case ('icon-button') {\r\n @if(_commonTableService.isButtonVisible(column, row)) {\r\n <button \r\n matIconButton\r\n [class]=\"column.buttonConfig?.color\"\r\n [disabled]=\"_commonTableService.isButtonDisabled(column, row)\"\r\n [matTooltip]=\"column.buttonConfig?.tooltip || ''\"\r\n (click)=\"_commonTableService.onCustomButtonClick(column, row)\"\r\n >\r\n @if(column.buttonConfig?.icon) {\r\n <mat-icon>{{ column.buttonConfig?.icon }}</mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n @case ('link') {\r\n @if(_commonTableService.isLinkVisible(column, row)) {\r\n <!-- External link -->\r\n @if(_commonTableService.getLinkHref(column, row)) {\r\n <a\r\n [style]=\"{ display: 'flex', alignItems: 'center', gap: '2px' }\"\r\n [href]=\"_commonTableService.getLinkHref(column, row)\"\r\n [target]=\"column.linkConfig?.target || '_blank'\"\r\n [matTooltip]=\"column.linkConfig?.tooltip || ''\"\r\n [style.color]=\"column.linkConfig?.color || 'primary'\"\r\n [style.text-decoration]=\"column.linkConfig?.underline ? 'underline' : 'none'\"\r\n >\r\n @if(column.linkConfig?.icon) {\r\n <mat-icon>{{ column.linkConfig?.icon }}</mat-icon>\r\n }\r\n @if(column.linkConfig?.text) {\r\n {{ column.linkConfig?.text }}\r\n }\r\n </a>\r\n }\r\n }\r\n }\r\n <!-- Text is by default -->\r\n @default {\r\n {{ _commonTableService.getCellValue(column, row) }}\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n \r\n <!-- Actions Column -->\r\n @if(hasActions()) {\r\n <ng-container matColumnDef=\"actions\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if(canDoAction('canView', row)) {\r\n <button matIconButton (click)=\"onViewClick(row)\">\r\n <mat-icon>visibility</mat-icon>\r\n </button>\r\n }\r\n @if(canDoAction('canDownload', row)) {\r\n <button matIconButton (click)=\"onDownloadClick(row)\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n }\r\n @if(canDoAction('canUpdate', row)) {\r\n <button matIconButton (click)=\"onUpdateClick(row)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n }\r\n @if(canDoAction('canDelete', row)) {\r\n <button matIconButton (click)=\"onDeleteClick(row)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n \r\n <tr mat-header-row *matHeaderRowDef=\"getAllColumns()\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: getAllColumns();\"></tr>\r\n <tr *matNoDataRow>No data available</tr>\r\n </table>\r\n <mat-paginator\r\n #paginator\r\n [length]=\"datasource().data.length\"\r\n [pageSize]=\"tableConfig().paginatorConfig?.pageSize || 5\"\r\n [pageSizeOptions]=\"tableConfig().paginatorConfig?.pageSizeOptions || [5, 10, 25, 100]\"\r\n [showFirstLastButtons]=\"tableConfig().paginatorConfig?.showFirstLastButtons || false\"\r\n />\r\n </div>\r\n }\r\n\r\n </div>\r\n</mat-card>", styles: [".tableContainer{display:flex;flex-direction:column;padding:16px 8px;gap:12px}.tableContainer .tableHeader{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 0 0 8px}.tableContainer .tableHeader__title{font-size:16px;font-weight:500}.tableContainer .tableHeader__buttons{display:flex;flex-direction:row;align-items:center;gap:8px}.tableContainer .tableHeader__buttons button{padding:0 16px;height:28px;box-shadow:0 1px 2px #0000001a,0 1px 3px 2px #0000000d;border-radius:4px}.overflowTable{overflow-x:auto;width:100%}.secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}.tertiary{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { 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.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", 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: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size", "measureUnit"] }] });
|
|
282
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
283
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CommonTableComponent, isStandalone: true, selector: "common-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create", view: "view", download: "download", update: "update", delete: "delete" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card>\r\n <div class=\"tableContainer\">\r\n <div class=\"tableHeader\">\r\n <div class=\"tableHeader__title\">\r\n <span>{{ tableConfig().title }}</span>\r\n </div>\r\n <div class=\"tableHeader__buttons\">\r\n @if(canDoAction('canCreate')) {\r\n <button matMiniFab type=\"button\" (click)=\"onCreateClick()\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n @if(isLoading()) {\r\n <ngx-skeleton-loader [count]=\"tableConfig().skeletonConfig?.count || 5\" />\r\n } @else { \r\n <div class=\"overflowTable\">\r\n <table mat-table class=\"mat-elevation-z8\" [dataSource]=\"datasource()\" class=\"customTable\" matSort>\r\n @for(column of tableConfig().tableColumns; track column.key) {\r\n <!-- Dynamically generate columns -->\r\n <ng-container [matColumnDef]=\"column.key\">\r\n <!-- Header cell definition -->\r\n <th mat-header-cell *matHeaderCellDef>{{ column.displayName }}</th>\r\n \r\n <!-- Data cell definition -->\r\n <td mat-cell *matCellDef=\"let row\">\r\n @switch (column.type) {\r\n @case ('button') {\r\n @if(_commonTableService.isButtonVisible(column, row)) {\r\n <button\r\n [matButton]=\"column.buttonConfig?.variant || 'filled'\"\r\n [class]=\"column.buttonConfig?.color\"\r\n [disabled]=\"_commonTableService.isButtonDisabled(column, row)\"\r\n [matTooltip]=\"column.buttonConfig?.tooltip || ''\"\r\n (click)=\"_commonTableService.onCustomButtonClick(column, row)\"\r\n >\r\n @if(column.buttonConfig?.icon) {\r\n <mat-icon>{{ column.buttonConfig?.icon }}</mat-icon>\r\n }\r\n @if(column.buttonConfig?.text) {\r\n {{ column.buttonConfig?.text }}\r\n }\r\n </button>\r\n }\r\n }\r\n @case ('icon-button') {\r\n @if(_commonTableService.isButtonVisible(column, row)) {\r\n <button \r\n matIconButton\r\n [class]=\"column.buttonConfig?.color\"\r\n [disabled]=\"_commonTableService.isButtonDisabled(column, row)\"\r\n [matTooltip]=\"column.buttonConfig?.tooltip || ''\"\r\n (click)=\"_commonTableService.onCustomButtonClick(column, row)\"\r\n >\r\n @if(column.buttonConfig?.icon) {\r\n <mat-icon>{{ column.buttonConfig?.icon }}</mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n @case ('link') {\r\n @if(_commonTableService.isLinkVisible(column, row)) {\r\n <!-- External link -->\r\n @if(_commonTableService.getLinkHref(column, row)) {\r\n <a\r\n [style]=\"{ display: 'flex', alignItems: 'center', gap: '2px' }\"\r\n [href]=\"_commonTableService.getLinkHref(column, row)\"\r\n [target]=\"column.linkConfig?.target || '_blank'\"\r\n [matTooltip]=\"column.linkConfig?.tooltip || ''\"\r\n [style.color]=\"column.linkConfig?.color || 'primary'\"\r\n [style.text-decoration]=\"column.linkConfig?.underline ? 'underline' : 'none'\"\r\n >\r\n @if(column.linkConfig?.icon) {\r\n <mat-icon>{{ column.linkConfig?.icon }}</mat-icon>\r\n }\r\n @if(column.linkConfig?.text) {\r\n {{ column.linkConfig?.text }}\r\n }\r\n </a>\r\n }\r\n }\r\n }\r\n <!-- Text is by default -->\r\n @default {\r\n {{ _commonTableService.getCellValue(column, row) }}\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n \r\n <!-- Actions Column -->\r\n @if(hasActions()) {\r\n <ng-container matColumnDef=\"actions\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if(canDoAction('canView', row)) {\r\n <button matIconButton (click)=\"onViewClick(row)\">\r\n <mat-icon>visibility</mat-icon>\r\n </button>\r\n }\r\n @if(canDoAction('canDownload', row)) {\r\n <button matIconButton (click)=\"onDownloadClick(row)\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n }\r\n @if(canDoAction('canUpdate', row)) {\r\n <button matIconButton (click)=\"onUpdateClick(row)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n }\r\n @if(canDoAction('canDelete', row)) {\r\n <button matIconButton (click)=\"onDeleteClick(row)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n \r\n <tr mat-header-row *matHeaderRowDef=\"getAllColumns()\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: getAllColumns();\"></tr>\r\n <tr *matNoDataRow>No data available</tr>\r\n </table>\r\n <mat-paginator\r\n #paginator\r\n [length]=\"datasource().data.length\"\r\n [pageSize]=\"tableConfig().paginatorConfig?.pageSize || 5\"\r\n [pageSizeOptions]=\"tableConfig().paginatorConfig?.pageSizeOptions || [5, 10, 25, 100]\"\r\n [showFirstLastButtons]=\"tableConfig().paginatorConfig?.showFirstLastButtons || false\"\r\n />\r\n </div>\r\n }\r\n\r\n </div>\r\n</mat-card>", styles: [".tableContainer{display:flex;flex-direction:column;padding:16px 8px;gap:12px}.tableContainer .tableHeader{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 0 0 8px}.tableContainer .tableHeader__title{font-size:16px;font-weight:500}.tableContainer .tableHeader__buttons{display:flex;flex-direction:row;align-items:center;gap:8px}.tableContainer .tableHeader__buttons button{padding:0 16px;height:28px;box-shadow:0 1px 2px #0000001a,0 1px 3px 2px #0000000d;border-radius:4px}.overflowTable{overflow-x:auto;width:100%}.secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}.tertiary{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { 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.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", 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: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size", "measureUnit"] }] });
|
|
266
284
|
}
|
|
267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonTableComponent, decorators: [{
|
|
268
286
|
type: Component,
|
|
269
287
|
args: [{ selector: 'common-table', imports: [
|
|
270
288
|
MatCardModule,
|
|
@@ -307,23 +325,14 @@ class NgxBasicTable {
|
|
|
307
325
|
onDeleteClick(row) {
|
|
308
326
|
this.delete.emit(row);
|
|
309
327
|
}
|
|
310
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
311
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
328
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: NgxBasicTable, isStandalone: true, selector: "ngx-basic-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create", view: "view", download: "download", update: "update", delete: "delete" }, ngImport: i0, template: "<common-table\r\n [tableConfig]=\"tableConfig()\"\r\n [tableData]=\"tableData()\"\r\n [isLoading]=\"isLoading()\"\r\n (create)=\"onCreateClick()\"\r\n (view)=\"onViewClick($event)\"\r\n (download)=\"onDownloadClick($event)\"\r\n (update)=\"onUpdateClick($event)\"\r\n (delete)=\"onDeleteClick($event)\"\r\n/>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: CommonTableComponent, selector: "common-table", inputs: ["tableConfig", "tableData", "isLoading"], outputs: ["create", "view", "download", "update", "delete"] }] });
|
|
312
330
|
}
|
|
313
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, decorators: [{
|
|
314
332
|
type: Component,
|
|
315
333
|
args: [{ selector: 'ngx-basic-table', imports: [MatCardModule, CommonTableComponent], template: "<common-table\r\n [tableConfig]=\"tableConfig()\"\r\n [tableData]=\"tableData()\"\r\n [isLoading]=\"isLoading()\"\r\n (create)=\"onCreateClick()\"\r\n (view)=\"onViewClick($event)\"\r\n (download)=\"onDownloadClick($event)\"\r\n (update)=\"onUpdateClick($event)\"\r\n (delete)=\"onDeleteClick($event)\"\r\n/>\r\n" }]
|
|
316
334
|
}], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }], tableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableData", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], create: [{ type: i0.Output, args: ["create"] }], view: [{ type: i0.Output, args: ["view"] }], download: [{ type: i0.Output, args: ["download"] }], update: [{ type: i0.Output, args: ["update"] }], delete: [{ type: i0.Output, args: ["delete"] }] } });
|
|
317
335
|
|
|
318
|
-
class NgxPaginatedTable {
|
|
319
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxPaginatedTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
320
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: NgxPaginatedTable, isStandalone: true, selector: "ngx-paginated-table", ngImport: i0, template: "<p>ngx-paginated-table works!</p>\r\n", styles: [""] });
|
|
321
|
-
}
|
|
322
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxPaginatedTable, decorators: [{
|
|
323
|
-
type: Component,
|
|
324
|
-
args: [{ selector: 'ngx-paginated-table', imports: [], template: "<p>ngx-paginated-table works!</p>\r\n" }]
|
|
325
|
-
}] });
|
|
326
|
-
|
|
327
336
|
class NgxInputFile {
|
|
328
337
|
// dependencies injection
|
|
329
338
|
_cdr = inject(ChangeDetectorRef);
|
|
@@ -459,16 +468,16 @@ class NgxInputFile {
|
|
|
459
468
|
bytesToMegaBytes(bytes) {
|
|
460
469
|
return (bytes / 1024 / 1024).toFixed(1);
|
|
461
470
|
}
|
|
462
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
463
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
471
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxInputFile, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
472
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxInputFile, isStandalone: true, selector: "ngx-input-file", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
464
473
|
{
|
|
465
474
|
provide: NG_VALUE_ACCESSOR,
|
|
466
475
|
useExisting: forwardRef(() => NgxInputFile),
|
|
467
476
|
multi: true,
|
|
468
477
|
},
|
|
469
|
-
], 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:
|
|
478
|
+
], 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: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.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 }] });
|
|
470
479
|
}
|
|
471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxInputFile, decorators: [{
|
|
472
481
|
type: Component,
|
|
473
482
|
args: [{ selector: 'ngx-input-file', imports: [
|
|
474
483
|
CommonModule,
|
|
@@ -578,10 +587,10 @@ class NgxBasicSelect {
|
|
|
578
587
|
searchInputRef.nativeElement.focus();
|
|
579
588
|
}
|
|
580
589
|
}
|
|
581
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
582
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
590
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
591
|
+
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 }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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()\">\n <mat-label>{{ label() }}</mat-label>\n <mat-select \n #matSelect\n [formControl]=\"control()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [multiple]=\"multiple()\"\n [placeholder]=\"placeholder()\"\n (openedChange)=\"onOpenedChange($event)\"\n >\n @if(!isLoading()) {\n <div class=\"searchFilter\">\n <mat-icon class=\"searchIcon\">search</mat-icon>\n <input \n matInput\n #searchInput \n type=\"text\"\n (keydown)=\"$event.stopPropagation()\"\n />\n <button matIconButton (click)=\"onClearInputClick(); searchInput.value = ''\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n @for(option of options(); track option[basicSelectConfig().valueKey]) {\n <mat-option \n [value]=\"option[basicSelectConfig().valueKey]\" \n [disabled]=\"basicSelectConfig().disabled ? basicSelectConfig().disabled?.(option) : false\"\n [style]=\"{ display: includeInFilter(option, searchInput.value) ? 'flex' : 'none' }\"\n > \n {{ basicSelectConfig().displayedLabel(option) }}\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() ? control().value?.length : control().value)) {\n <mat-icon matSuffix (click)=\"onClearClick(); $event.stopPropagation()\">close</mat-icon>\n }\n <mat-error>{{ error() }}</mat-error>\n</mat-form-field>", 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:#fff;z-index:10;border-bottom:1px solid var(--accent-3)}.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}button{position:absolute;right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$3.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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$3.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: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }] });
|
|
583
592
|
}
|
|
584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, decorators: [{
|
|
585
594
|
type: Component,
|
|
586
595
|
args: [{ selector: 'ngx-basic-select', imports: [
|
|
587
596
|
MatInputModule,
|
|
@@ -714,10 +723,10 @@ class PaginatedSelectBottomSheetComponent {
|
|
|
714
723
|
onConfirmMultiSelectionClick() {
|
|
715
724
|
this._bottomSheetRef.dismiss(this.selectedsOptions());
|
|
716
725
|
}
|
|
717
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
718
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
726
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSelectBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
727
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSelectBottomSheetComponent, isStandalone: true, selector: "paginated-select-bottom-sheet", viewQueries: [{ propertyName: "selectionList", first: true, predicate: ["selectionList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bottomSheetContainer\">\n <div class=\"header\">\n @if(_data.title) {\n <div class=\"title\">\n {{ _data.title }}\n </div>\n }\n @if(!_data.hideFilter) {\n <mat-form-field subscriptSizing=\"dynamic\" appearance=\"outline\">\n <mat-icon matPrefix>search</mat-icon>\n <input matInput #searchInput [placeholder]=\"_data.filterPlaceholder\" [value]=\"queryInput()\" (input)=\"onQueryChange($event, optionsContainer); $event.stopPropagation()\" />\n @if(searchInput.value.length > 0) {\n <button matSuffix mat-icon-button (click)=\"onClearClick(searchInput); $event.stopPropagation()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n \n <mat-chip-listbox [multiple]=\"false\">\n @for(filterKey of _data.config.filtersKeys; track filterKey.key) {\n <mat-chip-option [value]=\"filterKey.key\" [selected]=\"\">{{ filterKey.label() }}</mat-chip-option>\n }\n </mat-chip-listbox>\n }\n\n @if(_data.extraFiltersTemplate) {\n <br />\n <ng-container *ngTemplateOutlet=\"_data.extraFiltersTemplate;\"></ng-container>\n }\n </div>\n <div>\n @if(isLoading()) {\n <mat-progress-bar mode=\"indeterminate\" />\n }\n </div>\n <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\n <mat-selection-list #selectionList [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\n @if(options().length === 0 && !isLoading()) {\n <div class=\"no-results\">\n <mat-icon>search_off</mat-icon>\n <p>{{ _data.noResultsMessage }}</p>\n </div>\n }\n @for(option of options(); track option[_data.config.valueKey]; let last = $last) {\n <mat-list-option \n [value]=\"option[_data.config.valueKey]\"\n [selected]=\"isSelected(option[_data.config.valueKey])\"\n [disabled]=\"_data.config.disabled ? _data.config.disabled(option) : false\"\n >\n @if(_data.optionTemplate) {\n <ng-container *ngTemplateOutlet=\"_data.optionTemplate; context: { $implicit: option }\"></ng-container>\n } @else {\n {{_data.config.displayedLabel(option)}}\n }\n </mat-list-option>\n @if(!last) {\n <mat-divider />\n }\n }\n </mat-selection-list>\n </div> \n\n\n <div class=\"footer\">\n @if(_data.multiple) {\n <div class=\"length\">\n {{ selectedsOptions().length }} / {{ total() }} {{ _data.multipleItemsLabel }}\n </div>\n <div class=\"actions\">\n @if(selectedsOptions().length > 0) {\n <button matButton (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\n }\n <button matButton=\"filled\" color=\"primary\" (click)=\"onConfirmMultiSelectionClick()\">{{ _data.confirmLabel }}</button>\n </div>\n } @else {\n <div class=\"length\">\n {{ total() }} {{ _data.itemsLabel }}\n </div>\n }\n </div>\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:720px}.mat-bottom-sheet-container{padding:0 16px!important}.bottomSheetContainer{display:flex;flex-direction:column;height:100%;max-height:80vh}.bottomSheetContainer .header{width:100%;flex:0 0 auto;margin-top:15px}.bottomSheetContainer .header .title{margin-bottom:10px;font-size:20px;font-weight:500}.bottomSheetContainer .header mat-form-field{width:100%}.bottomSheetContainer .header mat-chip-listbox{width:100%}.bottomSheetContainer .loading{display:flex;align-items:center;width:100%;height:20px}.bottomSheetContainer .optionsContainer{flex:1 1 auto;height:360px;width:100%;overflow-y:auto}.bottomSheetContainer .optionsContainer .no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;color:#666;text-align:center}.bottomSheetContainer .optionsContainer .no-results mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.bottomSheetContainer .optionsContainer .no-results p{margin:0;font-size:16px}.bottomSheetContainer .footer{margin-top:8px;width:100%;flex:0 0 auto;display:flex;justify-content:space-between;height:56px;box-shadow:0 15px 10px -15px #0000001a}mat-form-field{--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)}:root{--mat-list-list-item-one-line-container-height: auto;--mat-list-list-item-two-line-container-height: auto;--mat-list-list-item-three-line-container-height: auto}@media (max-width: 960px){:host{min-width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$3.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: MatChipsModule }, { kind: "component", type: i7$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i9.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
719
728
|
}
|
|
720
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
729
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSelectBottomSheetComponent, decorators: [{
|
|
721
730
|
type: Component,
|
|
722
731
|
args: [{ selector: 'paginated-select-bottom-sheet', imports: [
|
|
723
732
|
MatButtonModule,
|
|
@@ -857,10 +866,10 @@ class NgxPaginatedSelect {
|
|
|
857
866
|
this.control().updateValueAndValidity();
|
|
858
867
|
this._cdr.markForCheck();
|
|
859
868
|
}
|
|
860
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
861
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
869
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
870
|
+
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 }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, hideFilter: { classPropertyName: "hideFilter", publicName: "hideFilter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", 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 }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, multipleItemsLabel: { classPropertyName: "multipleItemsLabel", publicName: "multipleItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", 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 }, hideChips: { classPropertyName: "hideChips", publicName: "hideChips", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters" }, viewQueries: [{ propertyName: "extraFiltersTemplate", first: true, predicate: ["extraFiltersTemplate"], descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(hideChips()) {\n <mat-form-field \n appearance=\"outline\" \n floatLabel=\"always\"\n (click)=\"onOpenBottomSheetClick($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-select \n #matSelect\n [formControl]=\"control()\"\n [multiple]=\"multiple()\"\n class=\"clickable-input\"\n (openedChange)=\"preventOpening($event)\"\n >\n @for(item of _selectedItems(); track item[config().valueKey]) {\n <mat-option [value]=\"item[config().valueKey]\">\n {{ config().displayedLabel(item) }}\n </mat-option>\n }\n </mat-select>\n <div matSuffix>\n @if(clearable() && control().value) {\n <button matIconButton matSuffix (click)=\"onResetClick($event);\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon matSuffix>arrow_drop_down</mat-icon>\n </div>\n <mat-error>{{ error() }}</mat-error>\n </mat-form-field>\n} @else {\n <mat-form-field \n appearance=\"outline\" \n floatLabel=\"always\"\n (click)=\"onOpenBottomSheetClick($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-chip-grid \n #chipGrid \n class=\"chips-grid\" \n [formControl]=\"control()\"\n >\n @for(item of _selectedItems(); track item[config().valueKey]) {\n <mat-chip-row\n (removed)=\"onChipRemoved(item)\"\n class=\"chip-item\"\n >\n {{ config().displayedLabel(item) }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n\n <input \n matInput\n [matChipInputFor]=\"chipGrid\"\n style=\"display: none\"\n />\n <mat-icon matSuffix>arrow_drop_down</mat-icon>\n <mat-error>{{ error() }}</mat-error>\n </mat-form-field>\n}\n\n<ng-template #extraFiltersTemplate>\n <ng-content select=\"[extra-filters]\" />\n</ng-template>", styles: [":host{display:block;height:100%}mat-form-field{width:100%;cursor:pointer}:host ::ng-deep mat-select .mat-mdc-select-arrow-wrapper{display:none}.clickable-input{cursor:pointer!important;pointer-events:none}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}mat-form-field{--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)}\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: MatBottomSheetModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$3.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: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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: MatChipsModule }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }] });
|
|
862
871
|
}
|
|
863
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
872
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, decorators: [{
|
|
864
873
|
type: Component,
|
|
865
874
|
args: [{ selector: 'ngx-paginated-select', imports: [
|
|
866
875
|
MatButtonModule,
|
|
@@ -911,10 +920,10 @@ class DynamicHostDirective {
|
|
|
911
920
|
}
|
|
912
921
|
});
|
|
913
922
|
}
|
|
914
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
915
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
923
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
924
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: DynamicHostDirective, isStandalone: true, selector: "[ngxDynamicHost]", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
916
925
|
}
|
|
917
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHostDirective, decorators: [{
|
|
918
927
|
type: Directive,
|
|
919
928
|
args: [{
|
|
920
929
|
selector: '[ngxDynamicHost]'
|
|
@@ -941,10 +950,10 @@ class NgxDialog {
|
|
|
941
950
|
onConfirmClick() {
|
|
942
951
|
this._dialogRef.close(true);
|
|
943
952
|
}
|
|
944
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
945
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
953
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
954
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxDialog, isStandalone: true, selector: "ngx-dialog", ngImport: i0, template: "<h2 mat-dialog-title class=\"title\">\r\n {{ title }}\r\n @if(icon) {\r\n <mat-icon \r\n [style.color]=\"iconColor\"\r\n class=\"icon\"\r\n >\r\n {{ icon }}\r\n </mat-icon>\r\n }\r\n</h2>\r\n<mat-dialog-content>\r\n @if(subtitle) {\r\n <p class=\"subtitle\">{{ subtitle }}</p>\r\n <mat-divider />\r\n }\r\n\r\n <div class=\"content\">\r\n @switch (body.type) {\r\n @case (DialogBodyType.TEXT) {\r\n <p>{{ body.content }}</p>\r\n }\r\n @case (DialogBodyType.HTML) {\r\n <div [innerHTML]=\"body.content\"></div>\r\n }\r\n @case (DialogBodyType.COMPONENT) {\r\n <ng-container \r\n ngxDynamicHost \r\n [component]=\"$any(body.content)\"\r\n [data]=\"body.data\"\r\n />\r\n }\r\n @case (DialogBodyType.TEMPLATE) {\r\n <ng-container \r\n [ngTemplateOutlet]=\"$any(body.content)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: body.data }\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n</mat-dialog-content>\r\n<mat-dialog-actions align=\"end\" class=\"matDialogActionsCustomGap\">\r\n @if(showCancel) {\r\n <button matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n {{ cancelText }}\r\n </button>\r\n }\r\n @if(showConfirm) {\r\n <button matButton=\"filled\" (click)=\"onConfirmClick()\">\r\n {{ confirmText }}\r\n </button>\r\n }\r\n</mat-dialog-actions>\r\n", styles: [":host{display:block}h2{display:flex;align-items:center;font-weight:600;padding:8px 16px;gap:8px}mat-icon{min-width:28px;min-height:28px;font-size:28px}.subtitle{font-weight:400;font-size:14px;color:#0009;margin-top:-4px}.matDialogActionsCustomGap{gap:.25rem}\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: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicHostDirective, selector: "[ngxDynamicHost]", inputs: ["component", "data"] }] });
|
|
946
955
|
}
|
|
947
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, decorators: [{
|
|
948
957
|
type: Component,
|
|
949
958
|
args: [{ selector: 'ngx-dialog', imports: [
|
|
950
959
|
MatDialogTitle,
|
|
@@ -958,6 +967,1314 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
958
967
|
], template: "<h2 mat-dialog-title class=\"title\">\r\n {{ title }}\r\n @if(icon) {\r\n <mat-icon \r\n [style.color]=\"iconColor\"\r\n class=\"icon\"\r\n >\r\n {{ icon }}\r\n </mat-icon>\r\n }\r\n</h2>\r\n<mat-dialog-content>\r\n @if(subtitle) {\r\n <p class=\"subtitle\">{{ subtitle }}</p>\r\n <mat-divider />\r\n }\r\n\r\n <div class=\"content\">\r\n @switch (body.type) {\r\n @case (DialogBodyType.TEXT) {\r\n <p>{{ body.content }}</p>\r\n }\r\n @case (DialogBodyType.HTML) {\r\n <div [innerHTML]=\"body.content\"></div>\r\n }\r\n @case (DialogBodyType.COMPONENT) {\r\n <ng-container \r\n ngxDynamicHost \r\n [component]=\"$any(body.content)\"\r\n [data]=\"body.data\"\r\n />\r\n }\r\n @case (DialogBodyType.TEMPLATE) {\r\n <ng-container \r\n [ngTemplateOutlet]=\"$any(body.content)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: body.data }\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n</mat-dialog-content>\r\n<mat-dialog-actions align=\"end\" class=\"matDialogActionsCustomGap\">\r\n @if(showCancel) {\r\n <button matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n {{ cancelText }}\r\n </button>\r\n }\r\n @if(showConfirm) {\r\n <button matButton=\"filled\" (click)=\"onConfirmClick()\">\r\n {{ confirmText }}\r\n </button>\r\n }\r\n</mat-dialog-actions>\r\n", styles: [":host{display:block}h2{display:flex;align-items:center;font-weight:600;padding:8px 16px;gap:8px}mat-icon{min-width:28px;min-height:28px;font-size:28px}.subtitle{font-weight:400;font-size:14px;color:#0009;margin-top:-4px}.matDialogActionsCustomGap{gap:.25rem}\n"] }]
|
|
959
968
|
}] });
|
|
960
969
|
|
|
970
|
+
class NgxConfirmDialogComponent {
|
|
971
|
+
dialogRef = inject((MatDialogRef));
|
|
972
|
+
data = inject(MAT_DIALOG_DATA);
|
|
973
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
974
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxConfirmDialogComponent, isStandalone: true, selector: "ngx-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.title}}</h2>\r\n<mat-dialog-content>\r\n @if(data.body) {\r\n <p>{{data.body}}</p>\r\n }\r\n \r\n @if (data.template) {\r\n <ng-container *ngTemplateOutlet=\"data.template; context: { $implicit: data.row }\"></ng-container>\r\n }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"false\">{{ data.denyButtonLabel ?? 'Cancelar' }}</button>\r\n <button matButton [mat-dialog-close]=\"true\">{{ data.confirmButtonLabel ?? 'Confirmar' }}</button>\r\n</mat-dialog-actions>", styles: [":host{display:block}\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: "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: CommonModule }, { kind: "directive", type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
975
|
+
}
|
|
976
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxConfirmDialogComponent, decorators: [{
|
|
977
|
+
type: Component,
|
|
978
|
+
args: [{ selector: 'ngx-confirm-dialog', imports: [
|
|
979
|
+
MatButtonModule,
|
|
980
|
+
MatDialogTitle,
|
|
981
|
+
MatDialogContent,
|
|
982
|
+
MatDialogActions,
|
|
983
|
+
MatDialogClose,
|
|
984
|
+
CommonModule
|
|
985
|
+
], template: "<h2 mat-dialog-title>{{data.title}}</h2>\r\n<mat-dialog-content>\r\n @if(data.body) {\r\n <p>{{data.body}}</p>\r\n }\r\n \r\n @if (data.template) {\r\n <ng-container *ngTemplateOutlet=\"data.template; context: { $implicit: data.row }\"></ng-container>\r\n }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"false\">{{ data.denyButtonLabel ?? 'Cancelar' }}</button>\r\n <button matButton [mat-dialog-close]=\"true\">{{ data.confirmButtonLabel ?? 'Confirmar' }}</button>\r\n</mat-dialog-actions>", styles: [":host{display:block}\n"] }]
|
|
986
|
+
}] });
|
|
987
|
+
|
|
988
|
+
class DynamicCellHostDirective {
|
|
989
|
+
vcr = inject(ViewContainerRef);
|
|
990
|
+
component = input(...(ngDevMode ? [undefined, { debugName: "component" }] : []));
|
|
991
|
+
row = input(...(ngDevMode ? [undefined, { debugName: "row" }] : []));
|
|
992
|
+
key = input(...(ngDevMode ? [undefined, { debugName: "key" }] : []));
|
|
993
|
+
effect = effect(() => {
|
|
994
|
+
const component = this.component();
|
|
995
|
+
const row = this.row();
|
|
996
|
+
const key = this.key();
|
|
997
|
+
if (component) {
|
|
998
|
+
const compRef = this.vcr.createComponent(component);
|
|
999
|
+
if (row && key) {
|
|
1000
|
+
compRef.instance.row = signal(row);
|
|
1001
|
+
compRef.instance.key = signal(key);
|
|
1002
|
+
}
|
|
1003
|
+
}
|
|
1004
|
+
}, ...(ngDevMode ? [{ debugName: "effect" }] : []));
|
|
1005
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicCellHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1006
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: DynamicCellHostDirective, isStandalone: true, selector: "[ngxDynamicCellHost]", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
1007
|
+
}
|
|
1008
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicCellHostDirective, decorators: [{
|
|
1009
|
+
type: Directive,
|
|
1010
|
+
args: [{
|
|
1011
|
+
selector: '[ngxDynamicCellHost]',
|
|
1012
|
+
}]
|
|
1013
|
+
}], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }] } });
|
|
1014
|
+
|
|
1015
|
+
class OnlyUpperFirstCharacterPipe {
|
|
1016
|
+
transform(value) {
|
|
1017
|
+
if (!value)
|
|
1018
|
+
return '';
|
|
1019
|
+
value = value.toLowerCase();
|
|
1020
|
+
return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
|
|
1021
|
+
}
|
|
1022
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnlyUpperFirstCharacterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1023
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: OnlyUpperFirstCharacterPipe, isStandalone: true, name: "ngxOnlyUpperFirstCharacter" });
|
|
1024
|
+
}
|
|
1025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnlyUpperFirstCharacterPipe, decorators: [{
|
|
1026
|
+
type: Pipe,
|
|
1027
|
+
args: [{
|
|
1028
|
+
name: 'ngxOnlyUpperFirstCharacter',
|
|
1029
|
+
}]
|
|
1030
|
+
}] });
|
|
1031
|
+
|
|
1032
|
+
const FILTER_CONNECTOR_LABEL = {
|
|
1033
|
+
'AND': 'Y',
|
|
1034
|
+
'OR': 'O'
|
|
1035
|
+
};
|
|
1036
|
+
const OPTIONS_FILTER_CONNECTOR = Object.entries(FILTER_CONNECTOR_LABEL).map(([key, label]) => {
|
|
1037
|
+
return {
|
|
1038
|
+
value: key,
|
|
1039
|
+
label: label
|
|
1040
|
+
};
|
|
1041
|
+
});
|
|
1042
|
+
const OPERATOR_BY_FILTER_TYPE = {
|
|
1043
|
+
number: ['=', '<>', '>', '>=', '<', '<='],
|
|
1044
|
+
text: ['=', 'LIKE', '<>'],
|
|
1045
|
+
option: ['=', '<>'],
|
|
1046
|
+
'option-multiple': ['=', '<>'], //Actuara como un option
|
|
1047
|
+
date: ['=', '<>', '>', '>=', '<', '<='],
|
|
1048
|
+
'date-range': ['=', '<>', '>', '>=', '<', '<='] //Actuara como un date normal
|
|
1049
|
+
};
|
|
1050
|
+
const FILTER_OPERATOR_LABEL = {
|
|
1051
|
+
'=': 'Igual a',
|
|
1052
|
+
'<>': 'Distinto de',
|
|
1053
|
+
'>': 'Mayor que',
|
|
1054
|
+
'>=': 'Mayor o igual que',
|
|
1055
|
+
'<': 'Menor que',
|
|
1056
|
+
'<=': 'Menor o igual que',
|
|
1057
|
+
'LIKE': 'Contiene'
|
|
1058
|
+
};
|
|
1059
|
+
|
|
1060
|
+
class AdvancedFilterUtils {
|
|
1061
|
+
static createAdvancedFilter = (fb, advancedFilter) => {
|
|
1062
|
+
return fb.group({
|
|
1063
|
+
name: [advancedFilter.name, Validators.required],
|
|
1064
|
+
groups: fb.array(advancedFilter.groups.map(g => this.createFilterGroup(fb, g)))
|
|
1065
|
+
});
|
|
1066
|
+
};
|
|
1067
|
+
static createFilterGroup = (fb, group) => {
|
|
1068
|
+
return fb.group({
|
|
1069
|
+
id: [group.id ?? v4()],
|
|
1070
|
+
connector: [group.connector, Validators.required],
|
|
1071
|
+
filters: fb.array(group.filters.map(f => {
|
|
1072
|
+
return this.isFilterGroup(f)
|
|
1073
|
+
? this.createFilterGroup(fb, f)
|
|
1074
|
+
: this.createFilterRule(fb, f);
|
|
1075
|
+
}), [Validators.required])
|
|
1076
|
+
});
|
|
1077
|
+
};
|
|
1078
|
+
static createFilterRule = (fb, rule) => {
|
|
1079
|
+
return fb.group({
|
|
1080
|
+
id: [rule.id ?? v4()],
|
|
1081
|
+
key: [rule.key ?? null, Validators.required],
|
|
1082
|
+
operator: [rule.operator ?? null, Validators.required],
|
|
1083
|
+
value: [rule.value ?? null, Validators.required]
|
|
1084
|
+
});
|
|
1085
|
+
};
|
|
1086
|
+
static isFilterGroup = (obj) => {
|
|
1087
|
+
return obj &&
|
|
1088
|
+
typeof obj === 'object' &&
|
|
1089
|
+
'connector' in obj &&
|
|
1090
|
+
'filters' in obj;
|
|
1091
|
+
};
|
|
1092
|
+
static isFilterRule(obj) {
|
|
1093
|
+
return obj && typeof obj === 'object' && 'key' in obj;
|
|
1094
|
+
}
|
|
1095
|
+
static addGroupToGroup(fb, form, groupId, group) {
|
|
1096
|
+
const groupFound = this.findGroupFormById(form.get('groups'), groupId);
|
|
1097
|
+
if (groupFound) {
|
|
1098
|
+
const filters = groupFound.get('filters');
|
|
1099
|
+
const formGroup = this.createFilterGroup(fb, group);
|
|
1100
|
+
filters.push(formGroup);
|
|
1101
|
+
}
|
|
1102
|
+
}
|
|
1103
|
+
static deleteGroup(form, groupId) {
|
|
1104
|
+
const groupsArray = form.get('groups');
|
|
1105
|
+
return this.deleteByIdRecursive(groupsArray, groupId);
|
|
1106
|
+
}
|
|
1107
|
+
static addRuleToGroup = (fb, form, groupId, rule) => {
|
|
1108
|
+
const group = this.findGroupFormById(form.get('groups'), groupId);
|
|
1109
|
+
if (group) {
|
|
1110
|
+
const filters = group.get('filters');
|
|
1111
|
+
const formRule = this.createFilterRule(fb, rule);
|
|
1112
|
+
filters.push(formRule);
|
|
1113
|
+
}
|
|
1114
|
+
};
|
|
1115
|
+
static deleteRule(form, ruleId) {
|
|
1116
|
+
const groupsArray = form.get('groups');
|
|
1117
|
+
return this.deleteByIdRecursive(groupsArray, ruleId);
|
|
1118
|
+
}
|
|
1119
|
+
static deleteByIdRecursive(array, id) {
|
|
1120
|
+
for (let i = 0; i < array.length; i++) {
|
|
1121
|
+
const control = array.at(i);
|
|
1122
|
+
// Si el id coincide, eliminar directamente (da igual si es rule o group)
|
|
1123
|
+
if (control.get('id')?.value === id) {
|
|
1124
|
+
array.removeAt(i);
|
|
1125
|
+
return true;
|
|
1126
|
+
}
|
|
1127
|
+
// Si es un grupo, seguir buscando dentro de sus filtros
|
|
1128
|
+
const filters = control.get('filters');
|
|
1129
|
+
if (filters instanceof FormArray) {
|
|
1130
|
+
const deleted = this.deleteByIdRecursive(filters, id);
|
|
1131
|
+
if (deleted)
|
|
1132
|
+
return true;
|
|
1133
|
+
}
|
|
1134
|
+
}
|
|
1135
|
+
return false;
|
|
1136
|
+
}
|
|
1137
|
+
static findGroupFormById(array, id) {
|
|
1138
|
+
for (const control of array.controls) {
|
|
1139
|
+
const group = control;
|
|
1140
|
+
if (group.get('id')?.value === id)
|
|
1141
|
+
return group;
|
|
1142
|
+
const filters = group.get('filters');
|
|
1143
|
+
if (filters) {
|
|
1144
|
+
const found = this.findGroupFormById(filters, id);
|
|
1145
|
+
if (found)
|
|
1146
|
+
return found;
|
|
1147
|
+
}
|
|
1148
|
+
}
|
|
1149
|
+
return null;
|
|
1150
|
+
}
|
|
1151
|
+
static isFilterGroupForm(group) {
|
|
1152
|
+
return (group instanceof FormGroup &&
|
|
1153
|
+
group.contains('connector') &&
|
|
1154
|
+
group.contains('filters'));
|
|
1155
|
+
}
|
|
1156
|
+
/*static isFilterRuleForm(group: AbstractControl): boolean {
|
|
1157
|
+
return (
|
|
1158
|
+
group instanceof FormGroup &&
|
|
1159
|
+
group.contains('key') &&
|
|
1160
|
+
group.contains('operator') &&
|
|
1161
|
+
group.contains('value') &&
|
|
1162
|
+
!group.contains('filters')
|
|
1163
|
+
);
|
|
1164
|
+
}*/
|
|
1165
|
+
static mapFormToAdvancedFilter(form) {
|
|
1166
|
+
return {
|
|
1167
|
+
name: form.get('name')?.value,
|
|
1168
|
+
groups: form.get('groups').controls
|
|
1169
|
+
.map(g => this.mapFormGroupToFilterGroup(g))
|
|
1170
|
+
.filter(g => this.isNonEmptyGroup(g))
|
|
1171
|
+
};
|
|
1172
|
+
}
|
|
1173
|
+
static mapFormGroupToFilterGroup(groupForm) {
|
|
1174
|
+
const id = groupForm.get('id')?.value;
|
|
1175
|
+
const connector = groupForm.get('connector')?.value;
|
|
1176
|
+
const filtersArray = groupForm.get('filters');
|
|
1177
|
+
const filters = filtersArray.controls
|
|
1178
|
+
.map(control => {
|
|
1179
|
+
const value = control.value;
|
|
1180
|
+
if ('filters' in value)
|
|
1181
|
+
return this.mapFormGroupToFilterGroup(control);
|
|
1182
|
+
else
|
|
1183
|
+
return this.mapFormGroupToFilterRule(control);
|
|
1184
|
+
})
|
|
1185
|
+
.filter(f => this.isNonEmptyFilter(f));
|
|
1186
|
+
return {
|
|
1187
|
+
id: id,
|
|
1188
|
+
connector: connector,
|
|
1189
|
+
filters: filters
|
|
1190
|
+
};
|
|
1191
|
+
}
|
|
1192
|
+
static mapFormGroupToFilterRule(ruleForm) {
|
|
1193
|
+
return {
|
|
1194
|
+
id: ruleForm.get('id')?.value,
|
|
1195
|
+
key: ruleForm.get('key')?.value,
|
|
1196
|
+
operator: ruleForm.get('operator')?.value,
|
|
1197
|
+
value: ruleForm.get('value')?.value
|
|
1198
|
+
};
|
|
1199
|
+
}
|
|
1200
|
+
static isNonEmptyFilter(filter) {
|
|
1201
|
+
if (this.isFilterGroup(filter))
|
|
1202
|
+
return this.isNonEmptyGroup(filter);
|
|
1203
|
+
return this.isNonEmptyRule(filter);
|
|
1204
|
+
}
|
|
1205
|
+
static isNonEmptyGroup(group) {
|
|
1206
|
+
return Array.isArray(group.filters) && group.filters.some(f => this.isNonEmptyFilter(f));
|
|
1207
|
+
}
|
|
1208
|
+
static isNonEmptyRule(rule) {
|
|
1209
|
+
return !!(rule.key && rule.operator && rule.value !== undefined && rule.value !== null && rule.value !== '');
|
|
1210
|
+
}
|
|
1211
|
+
static groupsToReadableHtml(groups, columns) {
|
|
1212
|
+
return this.groupToHtml(groups[0], columns);
|
|
1213
|
+
//return groups.map(g => this.groupToString(g)).join(' OR ');
|
|
1214
|
+
}
|
|
1215
|
+
static groupToHtml(group, columns) {
|
|
1216
|
+
const connector = ` <strong>${FILTER_CONNECTOR_LABEL[group.connector]}</strong> `;
|
|
1217
|
+
const parts = group.filters.map(filter => {
|
|
1218
|
+
if (this.isFilterGroup(filter))
|
|
1219
|
+
return `<strong>[ </strong>${this.groupToHtml(filter, columns)}<strong> ]</strong>`;
|
|
1220
|
+
else
|
|
1221
|
+
return this.ruleToHtml(filter, columns);
|
|
1222
|
+
});
|
|
1223
|
+
return parts.join(connector);
|
|
1224
|
+
}
|
|
1225
|
+
static ruleToHtml(rule, columns) {
|
|
1226
|
+
const column = columns.find(column => column.key == rule.key);
|
|
1227
|
+
if (!column)
|
|
1228
|
+
return "";
|
|
1229
|
+
const key = `<i>${column.label}</i>`;
|
|
1230
|
+
const operator = rule.operator ? FILTER_OPERATOR_LABEL[rule.operator].toLowerCase() : '';
|
|
1231
|
+
//const operator = rule.operator ?? '';
|
|
1232
|
+
const value = this.valueToHtml(rule.value, column);
|
|
1233
|
+
return `${key} ${operator} "${value}"`;
|
|
1234
|
+
}
|
|
1235
|
+
static valueToHtml(value, column) {
|
|
1236
|
+
switch (column.filterType) {
|
|
1237
|
+
case 'option':
|
|
1238
|
+
case 'option-multiple':
|
|
1239
|
+
const optionSelected = column.filterOptions?.find(option => option.value == value);
|
|
1240
|
+
return optionSelected?.label ?? '';
|
|
1241
|
+
case 'date':
|
|
1242
|
+
case 'date-range':
|
|
1243
|
+
const pipe = new DatePipe('es-ES');
|
|
1244
|
+
return pipe.transform(value, 'dd/MM/yyyy') ?? '';
|
|
1245
|
+
}
|
|
1246
|
+
return value;
|
|
1247
|
+
}
|
|
1248
|
+
static mapToDynamicFilter(advancedFilter) {
|
|
1249
|
+
const result = [];
|
|
1250
|
+
for (const group of advancedFilter.groups) {
|
|
1251
|
+
result.push(...this.mapGroupToDynamicFilters(group));
|
|
1252
|
+
}
|
|
1253
|
+
return result;
|
|
1254
|
+
}
|
|
1255
|
+
static mapGroupToDynamicFilters(group) {
|
|
1256
|
+
const filters = [];
|
|
1257
|
+
for (const f of group.filters) {
|
|
1258
|
+
if (this.isFilterGroup(f)) {
|
|
1259
|
+
filters.push(...this.mapGroupToDynamicFilters(f));
|
|
1260
|
+
}
|
|
1261
|
+
else if (this.isFilterRule(f) && f.key && f.operator && f.value !== undefined && f.value !== null) {
|
|
1262
|
+
filters.push({
|
|
1263
|
+
campo: f.key,
|
|
1264
|
+
operador: f.operator,
|
|
1265
|
+
valor: f.value?.toString(),
|
|
1266
|
+
conector: group.connector,
|
|
1267
|
+
grupo: group.id ?? 'root'
|
|
1268
|
+
});
|
|
1269
|
+
}
|
|
1270
|
+
}
|
|
1271
|
+
return filters;
|
|
1272
|
+
}
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
const USER_ID_FACTORY = new InjectionToken('USER_ID_FACTORY');
|
|
1276
|
+
|
|
1277
|
+
class AdvancedFilterService {
|
|
1278
|
+
userIdFactory = inject(USER_ID_FACTORY);
|
|
1279
|
+
PARTIAL_KEY_STORAGE_ADVANCED_FILTER_CONFIG = 'advanced_filter';
|
|
1280
|
+
fullKey = computed(() => {
|
|
1281
|
+
const userId = this.userIdFactory();
|
|
1282
|
+
if (!userId)
|
|
1283
|
+
return undefined;
|
|
1284
|
+
return `${this.PARTIAL_KEY_STORAGE_ADVANCED_FILTER_CONFIG}_${userId}`;
|
|
1285
|
+
}, ...(ngDevMode ? [{ debugName: "fullKey" }] : []));
|
|
1286
|
+
_advancedFilters = signal({}, ...(ngDevMode ? [{ debugName: "_advancedFilters" }] : []));
|
|
1287
|
+
advancedFilters = this._advancedFilters.asReadonly();
|
|
1288
|
+
setAdvancedFiltersEffect = effect(() => {
|
|
1289
|
+
this.setAdvancedFilter();
|
|
1290
|
+
}, ...(ngDevMode ? [{ debugName: "setAdvancedFiltersEffect" }] : []));
|
|
1291
|
+
constructor() {
|
|
1292
|
+
this.setAdvancedFilter();
|
|
1293
|
+
}
|
|
1294
|
+
setAdvancedFilter() {
|
|
1295
|
+
const localStorageKey = this.fullKey();
|
|
1296
|
+
if (!localStorageKey) {
|
|
1297
|
+
this._advancedFilters.set({});
|
|
1298
|
+
return;
|
|
1299
|
+
}
|
|
1300
|
+
const recordAdvancedFitler = localStorage.getItem(localStorageKey);
|
|
1301
|
+
if (!recordAdvancedFitler) {
|
|
1302
|
+
this._advancedFilters.set({});
|
|
1303
|
+
return;
|
|
1304
|
+
}
|
|
1305
|
+
const advancedFilters = JSON.parse(recordAdvancedFitler);
|
|
1306
|
+
this._advancedFilters.set(advancedFilters);
|
|
1307
|
+
}
|
|
1308
|
+
saveAdvancedFilter(tableId, advancedFilter) {
|
|
1309
|
+
const localStorageKey = this.fullKey();
|
|
1310
|
+
if (!localStorageKey)
|
|
1311
|
+
return false;
|
|
1312
|
+
this._advancedFilters.update(currentValue => {
|
|
1313
|
+
const currentArray = currentValue[tableId] ?? [];
|
|
1314
|
+
const index = currentArray.findIndex(f => f.groups[0].id === advancedFilter.groups[0].id);
|
|
1315
|
+
let newArray;
|
|
1316
|
+
if (index >= 0) { //Si existe, lo reemplazamos
|
|
1317
|
+
newArray = [...currentArray];
|
|
1318
|
+
newArray[index] = advancedFilter;
|
|
1319
|
+
}
|
|
1320
|
+
else { // Si no existe, lo añadimos
|
|
1321
|
+
newArray = [...currentArray, advancedFilter];
|
|
1322
|
+
}
|
|
1323
|
+
const newValue = {
|
|
1324
|
+
...currentValue,
|
|
1325
|
+
[tableId]: newArray
|
|
1326
|
+
};
|
|
1327
|
+
localStorage.setItem(localStorageKey, JSON.stringify(newValue));
|
|
1328
|
+
return newValue;
|
|
1329
|
+
});
|
|
1330
|
+
return true;
|
|
1331
|
+
}
|
|
1332
|
+
deleteAdvancedFilter(tableId, advancedFilter) {
|
|
1333
|
+
const localStorageKey = this.fullKey();
|
|
1334
|
+
if (!localStorageKey)
|
|
1335
|
+
return false;
|
|
1336
|
+
this._advancedFilters.update(currentValue => {
|
|
1337
|
+
const currentArray = currentValue[tableId] ?? [];
|
|
1338
|
+
const newArray = currentArray.filter(f => f.groups[0].id !== advancedFilter.groups[0].id);
|
|
1339
|
+
const newValue = {
|
|
1340
|
+
...currentValue,
|
|
1341
|
+
[tableId]: newArray
|
|
1342
|
+
};
|
|
1343
|
+
localStorage.setItem(localStorageKey, JSON.stringify(newValue));
|
|
1344
|
+
return newValue;
|
|
1345
|
+
});
|
|
1346
|
+
return true;
|
|
1347
|
+
}
|
|
1348
|
+
getAdvancedFilterById(tableId, advancedFilterId) {
|
|
1349
|
+
const allAdvancedFiltersByTable = this._advancedFilters()[tableId];
|
|
1350
|
+
if (!allAdvancedFiltersByTable)
|
|
1351
|
+
return undefined;
|
|
1352
|
+
return allAdvancedFiltersByTable.find(advancedFilter => {
|
|
1353
|
+
return advancedFilter.groups?.[0].id !== undefined && advancedFilter.groups[0].id == advancedFilterId;
|
|
1354
|
+
});
|
|
1355
|
+
}
|
|
1356
|
+
getDynamicFiltersById(tableId, advancedFilterId) {
|
|
1357
|
+
const advancedFilter = this.getAdvancedFilterById(tableId, advancedFilterId);
|
|
1358
|
+
if (!advancedFilter)
|
|
1359
|
+
return [];
|
|
1360
|
+
return AdvancedFilterUtils.mapToDynamicFilter(advancedFilter);
|
|
1361
|
+
}
|
|
1362
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1363
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterService, providedIn: 'root' });
|
|
1364
|
+
}
|
|
1365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterService, decorators: [{
|
|
1366
|
+
type: Injectable,
|
|
1367
|
+
args: [{
|
|
1368
|
+
providedIn: 'root'
|
|
1369
|
+
}]
|
|
1370
|
+
}], ctorParameters: () => [] });
|
|
1371
|
+
|
|
1372
|
+
class ColumnConfigService {
|
|
1373
|
+
userIdFactory = inject(USER_ID_FACTORY);
|
|
1374
|
+
PARTIAL_KEY_STORAGE_COLUMN_CONFIG = 'column_config';
|
|
1375
|
+
fullKey = computed(() => {
|
|
1376
|
+
const userId = this.userIdFactory();
|
|
1377
|
+
if (!userId)
|
|
1378
|
+
return undefined;
|
|
1379
|
+
return `${this.PARTIAL_KEY_STORAGE_COLUMN_CONFIG}_${userId}`;
|
|
1380
|
+
}, ...(ngDevMode ? [{ debugName: "fullKey" }] : []));
|
|
1381
|
+
_columnConfigs = signal({}, ...(ngDevMode ? [{ debugName: "_columnConfigs" }] : []));
|
|
1382
|
+
columnConfigs = this._columnConfigs.asReadonly();
|
|
1383
|
+
setColumnConfigEffect = effect(() => {
|
|
1384
|
+
const localStorageKey = this.fullKey();
|
|
1385
|
+
if (!localStorageKey) {
|
|
1386
|
+
this._columnConfigs.set({});
|
|
1387
|
+
return;
|
|
1388
|
+
}
|
|
1389
|
+
const recordColumnConfig = localStorage.getItem(localStorageKey);
|
|
1390
|
+
if (!recordColumnConfig) {
|
|
1391
|
+
this._columnConfigs.set({});
|
|
1392
|
+
return;
|
|
1393
|
+
}
|
|
1394
|
+
const columnConfigs = JSON.parse(recordColumnConfig);
|
|
1395
|
+
this._columnConfigs.set(columnConfigs);
|
|
1396
|
+
}, ...(ngDevMode ? [{ debugName: "setColumnConfigEffect" }] : []));
|
|
1397
|
+
saveColumnConfig(tableId, columnConfig) {
|
|
1398
|
+
const localStorageKey = this.fullKey();
|
|
1399
|
+
if (!localStorageKey)
|
|
1400
|
+
return false;
|
|
1401
|
+
this._columnConfigs.update(currentValue => {
|
|
1402
|
+
const newValue = {
|
|
1403
|
+
...currentValue,
|
|
1404
|
+
[tableId]: columnConfig
|
|
1405
|
+
};
|
|
1406
|
+
localStorage.setItem(localStorageKey, JSON.stringify(newValue));
|
|
1407
|
+
return newValue;
|
|
1408
|
+
});
|
|
1409
|
+
return true;
|
|
1410
|
+
}
|
|
1411
|
+
deleteColumnConfig(tableId) {
|
|
1412
|
+
const localStorageKey = this.fullKey();
|
|
1413
|
+
if (!localStorageKey)
|
|
1414
|
+
return false;
|
|
1415
|
+
this._columnConfigs.update(currentValue => {
|
|
1416
|
+
const newValue = { ...currentValue };
|
|
1417
|
+
delete newValue[tableId];
|
|
1418
|
+
localStorage.setItem(localStorageKey, JSON.stringify(newValue));
|
|
1419
|
+
return newValue;
|
|
1420
|
+
});
|
|
1421
|
+
return true;
|
|
1422
|
+
}
|
|
1423
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColumnConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1424
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColumnConfigService, providedIn: 'root' });
|
|
1425
|
+
}
|
|
1426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColumnConfigService, decorators: [{
|
|
1427
|
+
type: Injectable,
|
|
1428
|
+
args: [{
|
|
1429
|
+
providedIn: 'root'
|
|
1430
|
+
}]
|
|
1431
|
+
}] });
|
|
1432
|
+
|
|
1433
|
+
class DatosPantallaService {
|
|
1434
|
+
pantalla = toSignal(fromEvent(window, 'resize').pipe(startWith(this.obtenerDatosPantalla()), map(() => this.obtenerDatosPantalla())));
|
|
1435
|
+
obtenerDatosPantalla() {
|
|
1436
|
+
let pantalla = {
|
|
1437
|
+
tipo: 'escritorio',
|
|
1438
|
+
ancho: window.innerWidth,
|
|
1439
|
+
alto: window.innerHeight
|
|
1440
|
+
};
|
|
1441
|
+
if (pantalla.ancho < 600) {
|
|
1442
|
+
pantalla.tipo = 'movil';
|
|
1443
|
+
return pantalla;
|
|
1444
|
+
}
|
|
1445
|
+
if (pantalla.ancho < 950) {
|
|
1446
|
+
pantalla.tipo = 'tablet';
|
|
1447
|
+
return pantalla;
|
|
1448
|
+
}
|
|
1449
|
+
return pantalla;
|
|
1450
|
+
}
|
|
1451
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatosPantallaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1452
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatosPantallaService, providedIn: 'root' });
|
|
1453
|
+
}
|
|
1454
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatosPantallaService, decorators: [{
|
|
1455
|
+
type: Injectable,
|
|
1456
|
+
args: [{
|
|
1457
|
+
providedIn: 'root'
|
|
1458
|
+
}]
|
|
1459
|
+
}] });
|
|
1460
|
+
|
|
1461
|
+
class ConfigureTableColumnsComponent {
|
|
1462
|
+
columnConfigService = inject(ColumnConfigService);
|
|
1463
|
+
dialogRef = inject((MatDialogRef));
|
|
1464
|
+
data = inject(MAT_DIALOG_DATA);
|
|
1465
|
+
columns = signal(this.data.columns, ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
1466
|
+
isConfirmDisabled = computed(() => {
|
|
1467
|
+
const allDisabled = this.columns().every(column => !column.show);
|
|
1468
|
+
const someHasFilter = this.columns().some(column => this.hasFilterAndDisabled(column));
|
|
1469
|
+
return allDisabled || someHasFilter;
|
|
1470
|
+
}, ...(ngDevMode ? [{ debugName: "isConfirmDisabled" }] : []));
|
|
1471
|
+
startAnimationTimeout = undefined;
|
|
1472
|
+
endAnimationTimeout = undefined;
|
|
1473
|
+
animationTime = 250;
|
|
1474
|
+
animationIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "animationIndex" }] : []));
|
|
1475
|
+
hasFilterAndDisabled(column) {
|
|
1476
|
+
const value = this.data.filtersValue[column.key];
|
|
1477
|
+
if (typeof value === 'string' || Array.isArray(value))
|
|
1478
|
+
return value.length > 0 && !column.show;
|
|
1479
|
+
if (value instanceof DateRange)
|
|
1480
|
+
return (value.start != null || value.end != null) && !column.show;
|
|
1481
|
+
if (moment.isMoment(value))
|
|
1482
|
+
return !column.show;
|
|
1483
|
+
return false;
|
|
1484
|
+
}
|
|
1485
|
+
onUpClick(index) {
|
|
1486
|
+
const cols = [...this.columns()];
|
|
1487
|
+
if (index > 0) {
|
|
1488
|
+
[cols[index - 1], cols[index]] = [cols[index], cols[index - 1]];
|
|
1489
|
+
this.columns.set(cols);
|
|
1490
|
+
}
|
|
1491
|
+
}
|
|
1492
|
+
onDownClick(index) {
|
|
1493
|
+
const cols = [...this.columns()];
|
|
1494
|
+
if (index < cols.length - 1) {
|
|
1495
|
+
[cols[index], cols[index + 1]] = [cols[index + 1], cols[index]];
|
|
1496
|
+
this.columns.set(cols);
|
|
1497
|
+
}
|
|
1498
|
+
}
|
|
1499
|
+
onDrop(event) {
|
|
1500
|
+
const cols = [...this.columns()];
|
|
1501
|
+
moveItemInArray(cols, event.previousIndex, event.currentIndex);
|
|
1502
|
+
this.columns.set(cols);
|
|
1503
|
+
}
|
|
1504
|
+
onToggleChange(columnClicked) {
|
|
1505
|
+
this.columns.update(value => {
|
|
1506
|
+
return value.map(column => {
|
|
1507
|
+
if (column.key == columnClicked.key)
|
|
1508
|
+
return { ...column, show: !column.show };
|
|
1509
|
+
else
|
|
1510
|
+
return column;
|
|
1511
|
+
});
|
|
1512
|
+
});
|
|
1513
|
+
}
|
|
1514
|
+
onPinClick(columnConfig, index) {
|
|
1515
|
+
const columns = [...this.columns()];
|
|
1516
|
+
const currentSticky = columns.find(c => c.isSticky);
|
|
1517
|
+
if (columnConfig.key == currentSticky?.key) {
|
|
1518
|
+
const newColumns = columns.map(c => {
|
|
1519
|
+
return {
|
|
1520
|
+
...c,
|
|
1521
|
+
isSticky: false
|
|
1522
|
+
};
|
|
1523
|
+
});
|
|
1524
|
+
this.columns.set(newColumns);
|
|
1525
|
+
return;
|
|
1526
|
+
}
|
|
1527
|
+
clearTimeout(this.startAnimationTimeout);
|
|
1528
|
+
clearTimeout(this.endAnimationTimeout);
|
|
1529
|
+
this.animationIndex.set(undefined);
|
|
1530
|
+
this.animationIndex.set(index);
|
|
1531
|
+
this.startAnimationTimeout = setTimeout(() => {
|
|
1532
|
+
moveItemInArray(columns, index, 0);
|
|
1533
|
+
const newColumns = columns.map(c => {
|
|
1534
|
+
return {
|
|
1535
|
+
...c,
|
|
1536
|
+
isSticky: c.key == columnConfig.key
|
|
1537
|
+
};
|
|
1538
|
+
});
|
|
1539
|
+
this.columns.set(newColumns);
|
|
1540
|
+
this.animationIndex.set(0);
|
|
1541
|
+
this.endAnimationTimeout = setTimeout(() => this.animationIndex.set(undefined), this.animationTime);
|
|
1542
|
+
}, this.animationTime);
|
|
1543
|
+
}
|
|
1544
|
+
onConfirmClick() {
|
|
1545
|
+
this.columnConfigService.saveColumnConfig(this.data.tableId, this.columns());
|
|
1546
|
+
this.dialogRef.close();
|
|
1547
|
+
}
|
|
1548
|
+
onResetClick() {
|
|
1549
|
+
this.columnConfigService.deleteColumnConfig(this.data.tableId);
|
|
1550
|
+
this.dialogRef.close();
|
|
1551
|
+
}
|
|
1552
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureTableColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1553
|
+
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>Ordenar y visualizar columnas de la tabla {{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> (hay filtros aplicados)</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 ? 'Desanclar' : 'Anclar columna'\"\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=\"Subir\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n <button matTooltip=\"Bajar\" 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>Nota:</span> Para ocultar una columna, primero debes quitar los filtros que tenga aplicados</p>\r\n \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"undefined\">Cerrar</button>\r\n <button matButton (click)=\"onResetClick()\">Reestablecer orden y visualizaci\u00F3n</button>\r\n <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">Confirmar</button>\r\n</mat-dialog-actions>", styles: [".columnsList{display:flex;flex-direction:column;cursor:grab}.columnContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface);padding:4px 10px}p{margin:0}.label span{font:var(--mat-sys-label-small);color:var(--mat-sys-error);font-weight:400;font-style:italic}.labelContainer,.actions{display:flex;flex-direction:row;align-items:center;gap:10px}.note{margin-top:20px;font-style:italic;font:var(--mat-sys-body-small);font-weight:300;width:100%;text-align:center}.note span{font-weight:500}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer:last-child{border:none}.columnsList.cdk-drop-list-dragging .columnContainer:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer.pinned{background-color:#ffeb3b4d;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] });
|
|
1554
|
+
}
|
|
1555
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureTableColumnsComponent, decorators: [{
|
|
1556
|
+
type: Component,
|
|
1557
|
+
args: [{ selector: 'lib-configure-table-columns', imports: [
|
|
1558
|
+
MatButtonModule,
|
|
1559
|
+
MatDialogTitle,
|
|
1560
|
+
MatDialogContent,
|
|
1561
|
+
MatDialogActions,
|
|
1562
|
+
MatDialogClose,
|
|
1563
|
+
LowerCasePipe,
|
|
1564
|
+
MatIconModule,
|
|
1565
|
+
MatSlideToggleModule,
|
|
1566
|
+
CdkDropList,
|
|
1567
|
+
CdkDrag,
|
|
1568
|
+
MatTooltipModule
|
|
1569
|
+
], template: "<h2 mat-dialog-title>Ordenar y visualizar columnas de la tabla {{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> (hay filtros aplicados)</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 ? 'Desanclar' : 'Anclar columna'\"\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=\"Subir\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n <button matTooltip=\"Bajar\" 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>Nota:</span> Para ocultar una columna, primero debes quitar los filtros que tenga aplicados</p>\r\n \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <button matButton [mat-dialog-close]=\"undefined\">Cerrar</button>\r\n <button matButton (click)=\"onResetClick()\">Reestablecer orden y visualizaci\u00F3n</button>\r\n <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">Confirmar</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"] }]
|
|
1570
|
+
}] });
|
|
1571
|
+
|
|
1572
|
+
class AdvancedFilterRuleComponent {
|
|
1573
|
+
rule = input.required(...(ngDevMode ? [{ debugName: "rule" }] : []));
|
|
1574
|
+
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1575
|
+
deleteFilter = output();
|
|
1576
|
+
columns = computed(() => this.config().columns.filter(column => column.filterType != undefined), ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
1577
|
+
operatorByFilterType = OPERATOR_BY_FILTER_TYPE;
|
|
1578
|
+
filterOperatorLabel = FILTER_OPERATOR_LABEL;
|
|
1579
|
+
getRuleId() {
|
|
1580
|
+
return this.rule().get('id').value;
|
|
1581
|
+
}
|
|
1582
|
+
getKey() {
|
|
1583
|
+
return this.rule().get('key');
|
|
1584
|
+
}
|
|
1585
|
+
getOperator() {
|
|
1586
|
+
return this.rule().get('operator');
|
|
1587
|
+
}
|
|
1588
|
+
getValue() {
|
|
1589
|
+
return this.rule().get('value');
|
|
1590
|
+
}
|
|
1591
|
+
getColumnSelected(value) {
|
|
1592
|
+
return this.columns().find(column => column.key == value);
|
|
1593
|
+
}
|
|
1594
|
+
getOperatorsOption(value) {
|
|
1595
|
+
const columnSelected = this.getColumnSelected(value);
|
|
1596
|
+
if (!columnSelected || !columnSelected.filterType)
|
|
1597
|
+
return [];
|
|
1598
|
+
return this.operatorByFilterType[columnSelected.filterType];
|
|
1599
|
+
}
|
|
1600
|
+
getFilterType(value) {
|
|
1601
|
+
const columnSelected = this.getColumnSelected(value);
|
|
1602
|
+
return columnSelected?.filterType;
|
|
1603
|
+
}
|
|
1604
|
+
onKeyChange(event) {
|
|
1605
|
+
this.getOperator().setValue(null);
|
|
1606
|
+
this.getValue().setValue(null);
|
|
1607
|
+
}
|
|
1608
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1609
|
+
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=\"Eliminar filtro\" \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<mat-form-field>\r\n <mat-label>Campo</mat-label>\r\n <mat-select \r\n [formControl]=\"getKey()\" \r\n placeholder=\"Selecciona una opci\u00F3n\" \r\n #keySelect\r\n (selectionChange)=\"onKeyChange($event)\">\r\n <mat-option>-- Quitar campo --</mat-option>\r\n @for (column of columns(); track $index;) {\r\n <mat-option [value]=\"column.key\">{{column.label}}</mat-option>\r\n }\r\n </mat-select>\r\n <mat-error>Obligatorio</mat-error>\r\n</mat-form-field>\r\n\r\n<mat-form-field>\r\n <mat-label>Condici\u00F3n</mat-label>\r\n <mat-select [formControl]=\"getOperator()\" placeholder=\"Selecciona una opci\u00F3n\">\r\n <mat-option>-- Quitar condici\u00F3n --</mat-option>\r\n @for (operator of getOperatorsOption(keySelect.value); track $index;) {\r\n <mat-option [value]=\"operator\">{{filterOperatorLabel[operator]}}</mat-option>\r\n }\r\n </mat-select>\r\n <mat-error>Obligatorio</mat-error>\r\n</mat-form-field>\r\n\r\n@if (getFilterType(keySelect.value) == 'text' || getFilterType(keySelect.value) == 'number') {\r\n <mat-form-field>\r\n <mat-label>Valor</mat-label>\r\n <input [formControl]=\"getValue()\" [type]=\"getFilterType(keySelect.value) ?? 'text'\" matInput>\r\n <mat-error>Obligatorio</mat-error>\r\n </mat-form-field>\r\n}\r\n\r\n@if (getFilterType(keySelect.value) == 'option' || getFilterType(keySelect.value) == 'option-multiple') {\r\n <mat-form-field>\r\n <mat-label>Valor</mat-label>\r\n <mat-select [formControl]=\"getValue()\">\r\n <mat-option>-- Quitar valor --</mat-option>\r\n @for (option of getColumnSelected(keySelect.value)?.filterOptions ?? []; track $index;) {\r\n <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n }\r\n </mat-select>\r\n <mat-error>Obligatorio</mat-error>\r\n </mat-form-field>\r\n}\r\n\r\n@if(getFilterType(keySelect.value) == 'date' || getFilterType(keySelect.value) == 'date-range') {\r\n <mat-form-field>\r\n <mat-label>Valor</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>Obligatorio</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{flex:1}@media (max-width: 900px){:host{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$3.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: "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: MatDatepickerModule }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
1610
|
+
}
|
|
1611
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterRuleComponent, decorators: [{
|
|
1612
|
+
type: Component,
|
|
1613
|
+
args: [{ selector: 'lib-advanced-filter-rule', imports: [
|
|
1614
|
+
MatButtonModule,
|
|
1615
|
+
MatIconModule,
|
|
1616
|
+
ReactiveFormsModule,
|
|
1617
|
+
MatFormFieldModule,
|
|
1618
|
+
MatInputModule,
|
|
1619
|
+
MatSelectModule,
|
|
1620
|
+
MatDatepickerModule,
|
|
1621
|
+
MatTooltipModule
|
|
1622
|
+
], template: "<button \r\n matIconButton \r\n matTooltip=\"Eliminar filtro\" \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<mat-form-field>\r\n <mat-label>Campo</mat-label>\r\n <mat-select \r\n [formControl]=\"getKey()\" \r\n placeholder=\"Selecciona una opci\u00F3n\" \r\n #keySelect\r\n (selectionChange)=\"onKeyChange($event)\">\r\n <mat-option>-- Quitar campo --</mat-option>\r\n @for (column of columns(); track $index;) {\r\n <mat-option [value]=\"column.key\">{{column.label}}</mat-option>\r\n }\r\n </mat-select>\r\n <mat-error>Obligatorio</mat-error>\r\n</mat-form-field>\r\n\r\n<mat-form-field>\r\n <mat-label>Condici\u00F3n</mat-label>\r\n <mat-select [formControl]=\"getOperator()\" placeholder=\"Selecciona una opci\u00F3n\">\r\n <mat-option>-- Quitar condici\u00F3n --</mat-option>\r\n @for (operator of getOperatorsOption(keySelect.value); track $index;) {\r\n <mat-option [value]=\"operator\">{{filterOperatorLabel[operator]}}</mat-option>\r\n }\r\n </mat-select>\r\n <mat-error>Obligatorio</mat-error>\r\n</mat-form-field>\r\n\r\n@if (getFilterType(keySelect.value) == 'text' || getFilterType(keySelect.value) == 'number') {\r\n <mat-form-field>\r\n <mat-label>Valor</mat-label>\r\n <input [formControl]=\"getValue()\" [type]=\"getFilterType(keySelect.value) ?? 'text'\" matInput>\r\n <mat-error>Obligatorio</mat-error>\r\n </mat-form-field>\r\n}\r\n\r\n@if (getFilterType(keySelect.value) == 'option' || getFilterType(keySelect.value) == 'option-multiple') {\r\n <mat-form-field>\r\n <mat-label>Valor</mat-label>\r\n <mat-select [formControl]=\"getValue()\">\r\n <mat-option>-- Quitar valor --</mat-option>\r\n @for (option of getColumnSelected(keySelect.value)?.filterOptions ?? []; track $index;) {\r\n <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n }\r\n </mat-select>\r\n <mat-error>Obligatorio</mat-error>\r\n </mat-form-field>\r\n}\r\n\r\n@if(getFilterType(keySelect.value) == 'date' || getFilterType(keySelect.value) == 'date-range') {\r\n <mat-form-field>\r\n <mat-label>Valor</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>Obligatorio</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{flex:1}@media (max-width: 900px){:host{flex-direction:column;align-items:normal}}\n"] }]
|
|
1623
|
+
}], propDecorators: { rule: [{ type: i0.Input, args: [{ isSignal: true, alias: "rule", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], deleteFilter: [{ type: i0.Output, args: ["deleteFilter"] }] } });
|
|
1624
|
+
|
|
1625
|
+
class AdvancedFilterGroupComponent {
|
|
1626
|
+
isRootNode = input.required(...(ngDevMode ? [{ debugName: "isRootNode" }] : []));
|
|
1627
|
+
group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
|
|
1628
|
+
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1629
|
+
addGroup = output();
|
|
1630
|
+
addFilter = output();
|
|
1631
|
+
deleteGroup = output();
|
|
1632
|
+
deleteFilter = output();
|
|
1633
|
+
optionsFilterConnector = OPTIONS_FILTER_CONNECTOR;
|
|
1634
|
+
datosPantallaService = inject(DatosPantallaService);
|
|
1635
|
+
isDesktop = computed(() => this.datosPantallaService.pantalla()?.tipo == 'escritorio', ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
|
|
1636
|
+
isFilterGroupForm(group) {
|
|
1637
|
+
return AdvancedFilterUtils.isFilterGroupForm(group);
|
|
1638
|
+
}
|
|
1639
|
+
getConnector() {
|
|
1640
|
+
return this.group().get('connector');
|
|
1641
|
+
}
|
|
1642
|
+
getGroupId() {
|
|
1643
|
+
return this.group().get('id').value;
|
|
1644
|
+
}
|
|
1645
|
+
getFilters() {
|
|
1646
|
+
return this.group().get('filters').controls;
|
|
1647
|
+
}
|
|
1648
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1649
|
+
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 $index) {\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 A\u00F1adir filtro\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 A\u00F1adir grupo\r\n </button>\r\n } @else {\r\n <button \r\n matIconButton \r\n matTooltip=\"A\u00F1adir filtro\" \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=\"A\u00F1adir grupo\" \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=\"Eliminar grupo\" \r\n (click)=\"deleteGroup.emit(getGroupId())\"\r\n class=\"deleteGroupButton\"\r\n type=\"button\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n\r\n @for (group of getFilters(); track $index) {\r\n @if(isFilterGroupForm(group)) {\r\n <lib-advanced-filter-group \r\n [group]=\"group\"\r\n [config]=\"config()\"\r\n [isRootNode]=\"false\"\r\n (addGroup)=\"addGroup.emit($event)\"\r\n (addFilter)=\"addFilter.emit($event)\"\r\n (deleteGroup)=\"deleteGroup.emit($event)\"\r\n (deleteFilter)=\"deleteFilter.emit($event)\"\r\n />\r\n } @else {\r\n <lib-advanced-filter-rule \r\n [rule]=\"group\"\r\n [config]=\"config()\"\r\n (deleteFilter)=\"deleteFilter.emit($event)\"\r\n />\r\n }\r\n }\r\n\r\n</div>", styles: [":host{display:block}.grupo{border-radius:4px;border:1px solid var(--mat-sys-outline);padding:40px 34px 10px 20px;position:relative;min-height:60px;display:flex;flex-direction:column;margin-top:24px;gap:8px}mat-button-toggle-group{position:absolute;top:-20px;left:50%;transform:translate(-50%);background-color:var(--mat-sys-surface)}.addFilterButton{position:absolute;top:-20px;left:10px;background-color:var(--mat-sys-surface)}.addGroupButton{position:absolute;top:-20px;right:10px;background-color:var(--mat-sys-surface)}.deleteGroupButton{position:absolute;top:50%;right:-20px;transform:translateY(-50%);background-color:var(--mat-sys-surface)}\n"], dependencies: [{ kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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.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.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: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
1650
|
+
}
|
|
1651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterGroupComponent, decorators: [{
|
|
1652
|
+
type: Component,
|
|
1653
|
+
args: [{ selector: 'lib-advanced-filter-group', imports: [
|
|
1654
|
+
MatButtonModule,
|
|
1655
|
+
MatIconModule,
|
|
1656
|
+
ReactiveFormsModule,
|
|
1657
|
+
MatFormFieldModule,
|
|
1658
|
+
MatInputModule,
|
|
1659
|
+
MatSelectModule,
|
|
1660
|
+
MatDatepickerModule,
|
|
1661
|
+
AdvancedFilterRuleComponent,
|
|
1662
|
+
MatButtonToggleModule,
|
|
1663
|
+
MatTooltipModule
|
|
1664
|
+
], template: "<div class=\"grupo\" [formGroup]=\"group()\">\r\n \r\n <mat-button-toggle-group [formControl]=\"getConnector()\">\r\n @for (option of optionsFilterConnector; track $index) {\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 A\u00F1adir filtro\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 A\u00F1adir grupo\r\n </button>\r\n } @else {\r\n <button \r\n matIconButton \r\n matTooltip=\"A\u00F1adir filtro\" \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=\"A\u00F1adir grupo\" \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=\"Eliminar grupo\" \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"] }]
|
|
1665
|
+
}], propDecorators: { isRootNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRootNode", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], addGroup: [{ type: i0.Output, args: ["addGroup"] }], addFilter: [{ type: i0.Output, args: ["addFilter"] }], deleteGroup: [{ type: i0.Output, args: ["deleteGroup"] }], deleteFilter: [{ type: i0.Output, args: ["deleteFilter"] }] } });
|
|
1666
|
+
|
|
1667
|
+
class ConfigureAdvancedFilterComponent {
|
|
1668
|
+
fb = inject(FormBuilder);
|
|
1669
|
+
advancedFilterService = inject(AdvancedFilterService);
|
|
1670
|
+
dialogRef = inject((MatDialogRef));
|
|
1671
|
+
data = inject(MAT_DIALOG_DATA);
|
|
1672
|
+
query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
|
|
1673
|
+
form = AdvancedFilterUtils.createAdvancedFilter(this.fb, this.data.advancedFilter);
|
|
1674
|
+
formChanges = toSignal(this.form.valueChanges);
|
|
1675
|
+
mapFormToAdvancedFilterEffect = effect(() => {
|
|
1676
|
+
const values = this.formChanges();
|
|
1677
|
+
if (this.form.invalid) {
|
|
1678
|
+
this.query.set('');
|
|
1679
|
+
return;
|
|
1680
|
+
}
|
|
1681
|
+
const advancedFilter = AdvancedFilterUtils.mapFormToAdvancedFilter(this.form);
|
|
1682
|
+
const queryString = AdvancedFilterUtils.groupsToReadableHtml(advancedFilter.groups, this.data.config.columns);
|
|
1683
|
+
this.query.set(queryString);
|
|
1684
|
+
}, ...(ngDevMode ? [{ debugName: "mapFormToAdvancedFilterEffect" }] : []));
|
|
1685
|
+
getRootGroup() {
|
|
1686
|
+
return this.form.get('groups').controls[0];
|
|
1687
|
+
}
|
|
1688
|
+
addGroup(groupId) {
|
|
1689
|
+
const newGroup = {
|
|
1690
|
+
id: v4(),
|
|
1691
|
+
connector: 'AND',
|
|
1692
|
+
filters: [
|
|
1693
|
+
{ id: v4() }
|
|
1694
|
+
]
|
|
1695
|
+
};
|
|
1696
|
+
AdvancedFilterUtils.addGroupToGroup(this.fb, this.form, groupId, newGroup);
|
|
1697
|
+
}
|
|
1698
|
+
addFilter(groupId) {
|
|
1699
|
+
const newRule = { id: v4() };
|
|
1700
|
+
AdvancedFilterUtils.addRuleToGroup(this.fb, this.form, groupId, newRule);
|
|
1701
|
+
}
|
|
1702
|
+
deleteGroup(groupId) {
|
|
1703
|
+
AdvancedFilterUtils.deleteGroup(this.form, groupId);
|
|
1704
|
+
}
|
|
1705
|
+
deleteFilter(ruleId) {
|
|
1706
|
+
AdvancedFilterUtils.deleteRule(this.form, ruleId);
|
|
1707
|
+
}
|
|
1708
|
+
onSubmit(sendType) {
|
|
1709
|
+
const advancedFilter = AdvancedFilterUtils.mapFormToAdvancedFilter(this.form);
|
|
1710
|
+
const tableId = this.data.config.tableId;
|
|
1711
|
+
this.advancedFilterService.saveAdvancedFilter(tableId, advancedFilter);
|
|
1712
|
+
switch (sendType) {
|
|
1713
|
+
case 'save':
|
|
1714
|
+
this.dialogRef.close();
|
|
1715
|
+
break;
|
|
1716
|
+
case 'save_and_apply':
|
|
1717
|
+
this.dialogRef.close(advancedFilter);
|
|
1718
|
+
break;
|
|
1719
|
+
}
|
|
1720
|
+
}
|
|
1721
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureAdvancedFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1722
|
+
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>Filtros avanzados para la tabla {{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>Nombre de la plantilla</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>El nombre es obligatorio</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>Uso de filtros avanzados</strong></p>\r\n <p class=\"helper\">\r\n <strong>Grupo: </strong>Un conjunto de filtros que se eval\u00FAan juntos. Todos los filtros dentro de un grupo usan el mismo conector (\u201CY\u201D u \u201CO\u201D). Cada rectangula representa un grupo y dentro de ellos puede haber filtros u otros grupos<br>\r\n <strong>Filtro: </strong>Una regla individual que compara un campo con un valor (por ejemplo: \u201CPrecio > 100\u201D)\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\">Cerrar</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">Guardar</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">Guardar y aplicar</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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$3.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" }] });
|
|
1723
|
+
}
|
|
1724
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureAdvancedFilterComponent, decorators: [{
|
|
1725
|
+
type: Component,
|
|
1726
|
+
args: [{ selector: 'lib-configure-advanced-filter', imports: [
|
|
1727
|
+
MatDialogTitle,
|
|
1728
|
+
MatDialogContent,
|
|
1729
|
+
MatDialogActions,
|
|
1730
|
+
MatDialogClose,
|
|
1731
|
+
LowerCasePipe,
|
|
1732
|
+
MatButtonModule,
|
|
1733
|
+
MatIconModule,
|
|
1734
|
+
ReactiveFormsModule,
|
|
1735
|
+
MatFormFieldModule,
|
|
1736
|
+
MatInputModule,
|
|
1737
|
+
AdvancedFilterGroupComponent
|
|
1738
|
+
], template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit('save_and_apply')\">\r\n\r\n <h2 mat-dialog-title>Filtros avanzados para la tabla {{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>Nombre de la plantilla</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>El nombre es obligatorio</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>Uso de filtros avanzados</strong></p>\r\n <p class=\"helper\">\r\n <strong>Grupo: </strong>Un conjunto de filtros que se eval\u00FAan juntos. Todos los filtros dentro de un grupo usan el mismo conector (\u201CY\u201D u \u201CO\u201D). Cada rectangula representa un grupo y dentro de ellos puede haber filtros u otros grupos<br>\r\n <strong>Filtro: </strong>Una regla individual que compara un campo con un valor (por ejemplo: \u201CPrecio > 100\u201D)\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\">Cerrar</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">Guardar</button>\r\n <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">Guardar y aplicar</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"] }]
|
|
1739
|
+
}] });
|
|
1740
|
+
|
|
1741
|
+
class NgxPaginatedTable {
|
|
1742
|
+
columnConfigService = inject(ColumnConfigService);
|
|
1743
|
+
advancedFilterService = inject(AdvancedFilterService);
|
|
1744
|
+
dialog = inject(MatDialog);
|
|
1745
|
+
datosPantallaService = inject(DatosPantallaService);
|
|
1746
|
+
isDesktop = computed(() => this.datosPantallaService.pantalla()?.tipo == 'escritorio', ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
|
|
1747
|
+
endpoint = input.required(...(ngDevMode ? [{ debugName: "endpoint" }] : []));
|
|
1748
|
+
filters = input(signal({
|
|
1749
|
+
pageNumber: 1,
|
|
1750
|
+
pageSize: 10,
|
|
1751
|
+
query: undefined,
|
|
1752
|
+
sortBy: undefined,
|
|
1753
|
+
columnsFiltersValue: undefined,
|
|
1754
|
+
advancedFilterId: undefined
|
|
1755
|
+
}), ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
1756
|
+
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1757
|
+
createClick = output();
|
|
1758
|
+
updateClick = output();
|
|
1759
|
+
deleteClick = output();
|
|
1760
|
+
rowActionClick = output();
|
|
1761
|
+
expandedItemChange = output();
|
|
1762
|
+
selectionActionEvent = output();
|
|
1763
|
+
filterKeyPrefix = 'filter';
|
|
1764
|
+
nameOfActionsColumn = 'actionsPerRow';
|
|
1765
|
+
generalFooterKeyPrefix = 'footer';
|
|
1766
|
+
nameOfRowSelectionColumn = 'rowSelectionColumn';
|
|
1767
|
+
debounceTime = 300;
|
|
1768
|
+
dataResource = rxResource({
|
|
1769
|
+
params: () => this.filters()(),
|
|
1770
|
+
stream: ({ params }) => {
|
|
1771
|
+
const endpointPaginated = this.endpoint();
|
|
1772
|
+
return endpointPaginated(params);
|
|
1773
|
+
},
|
|
1774
|
+
defaultValue: { total: 0, items: [] }
|
|
1775
|
+
});
|
|
1776
|
+
data = computed(() => {
|
|
1777
|
+
if (this.dataResource.error())
|
|
1778
|
+
return [];
|
|
1779
|
+
const value = this.dataResource.value();
|
|
1780
|
+
return value.items;
|
|
1781
|
+
}, ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
1782
|
+
total = computed(() => {
|
|
1783
|
+
if (this.dataResource.error())
|
|
1784
|
+
return 0;
|
|
1785
|
+
const value = this.dataResource.value();
|
|
1786
|
+
return value.total;
|
|
1787
|
+
}, ...(ngDevMode ? [{ debugName: "total" }] : []));
|
|
1788
|
+
columnConfig = computed(() => {
|
|
1789
|
+
const columnConfigs = this.columnConfigService.columnConfigs();
|
|
1790
|
+
const configValue = this.config()();
|
|
1791
|
+
const columnConfig = columnConfigs[configValue.tableId];
|
|
1792
|
+
const defaultColumnConfig = configValue.columns.map(column => {
|
|
1793
|
+
return {
|
|
1794
|
+
key: column.key,
|
|
1795
|
+
show: true,
|
|
1796
|
+
isSticky: configValue.defaultStickyColumn == column.key
|
|
1797
|
+
};
|
|
1798
|
+
});
|
|
1799
|
+
if (!columnConfig)
|
|
1800
|
+
return defaultColumnConfig;
|
|
1801
|
+
//Por si acaso se quitan columnas a posteriori, hay que filtrarlas para que no aparezcan
|
|
1802
|
+
const filteredColumns = columnConfig.filter(column => this.includeInColumnConfig(column, defaultColumnConfig));
|
|
1803
|
+
//Por si a posteriori se añaden nuevas columnas
|
|
1804
|
+
const columnsAdded = defaultColumnConfig.filter(defaultColumn => !this.includeInColumnConfig(defaultColumn, columnConfig));
|
|
1805
|
+
return [...filteredColumns, ...columnsAdded];
|
|
1806
|
+
}, ...(ngDevMode ? [{ debugName: "columnConfig" }] : []));
|
|
1807
|
+
stickyColumnKey = computed(() => this.columnConfig().find(c => c.isSticky)?.key, ...(ngDevMode ? [{ debugName: "stickyColumnKey" }] : []));
|
|
1808
|
+
keys = computed(() => {
|
|
1809
|
+
const configValue = this.config()();
|
|
1810
|
+
const columnConfig = this.columnConfig();
|
|
1811
|
+
let keys = [...columnConfig]
|
|
1812
|
+
.filter(column => column.show)
|
|
1813
|
+
.map(column => column.key);
|
|
1814
|
+
if ((configValue.update && !configValue.clickOnRowForUpdate)
|
|
1815
|
+
|| configValue.delete
|
|
1816
|
+
|| (configValue.rowActions && configValue.rowActions.length > 0)
|
|
1817
|
+
|| configValue.expandableDetail) {
|
|
1818
|
+
keys = [...keys, this.nameOfActionsColumn];
|
|
1819
|
+
}
|
|
1820
|
+
if (configValue.enableRowSelection)
|
|
1821
|
+
keys = [this.nameOfRowSelectionColumn, ...keys];
|
|
1822
|
+
return keys;
|
|
1823
|
+
}, ...(ngDevMode ? [{ debugName: "keys" }] : []));
|
|
1824
|
+
keysWithFilter = computed(() => this.keys().map(key => `${this.filterKeyPrefix}${this.getKeyAsString(key)}`), ...(ngDevMode ? [{ debugName: "keysWithFilter" }] : []));
|
|
1825
|
+
keysWithGeneralFooter = computed(() => this.keys().map(key => `${this.generalFooterKeyPrefix}${this.getKeyAsString(key)}`), ...(ngDevMode ? [{ debugName: "keysWithGeneralFooter" }] : []));
|
|
1826
|
+
showFiltersRow = computed(() => {
|
|
1827
|
+
const configValue = this.config()();
|
|
1828
|
+
return [...configValue.columns].some(column => column.filterType) && !configValue.showAdvancedFilters;
|
|
1829
|
+
}, ...(ngDevMode ? [{ debugName: "showFiltersRow" }] : []));
|
|
1830
|
+
showActionsColumn = computed(() => this.keys().includes(this.nameOfActionsColumn), ...(ngDevMode ? [{ debugName: "showActionsColumn" }] : []));
|
|
1831
|
+
showTotalPerPageFooter = computed(() => {
|
|
1832
|
+
const columns = this.config()().columns;
|
|
1833
|
+
const keys = this.keys();
|
|
1834
|
+
return keys.some(key => columns.find(column => key == column.key)?.showTotalPerPage);
|
|
1835
|
+
}, ...(ngDevMode ? [{ debugName: "showTotalPerPageFooter" }] : []));
|
|
1836
|
+
showTotalGeneralFooter = computed(() => {
|
|
1837
|
+
const columns = this.config()().columns;
|
|
1838
|
+
const keys = this.keys();
|
|
1839
|
+
return keys.some(key => columns.find(column => key == column.key)?.showTotalGeneral);
|
|
1840
|
+
}, ...(ngDevMode ? [{ debugName: "showTotalGeneralFooter" }] : []));
|
|
1841
|
+
queryTimeout = undefined;
|
|
1842
|
+
timeoutsByKey = {};
|
|
1843
|
+
advancedFilters = computed(() => {
|
|
1844
|
+
const allTablesAdvancedFilters = this.advancedFilterService.advancedFilters();
|
|
1845
|
+
const tableId = this.config()().tableId;
|
|
1846
|
+
return allTablesAdvancedFilters[tableId];
|
|
1847
|
+
}, ...(ngDevMode ? [{ debugName: "advancedFilters" }] : []));
|
|
1848
|
+
expandableColumnDef = 'expandedDetail';
|
|
1849
|
+
expandedItem = signal(null, ...(ngDevMode ? [{ debugName: "expandedItem" }] : []));
|
|
1850
|
+
selection = signal([], ...(ngDevMode ? [{ debugName: "selection" }] : []));
|
|
1851
|
+
isFullScreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullScreen" }] : []));
|
|
1852
|
+
overlay = inject(Overlay);
|
|
1853
|
+
overlayContainer = inject(OverlayContainer);
|
|
1854
|
+
viewContainerRef = inject(ViewContainerRef);
|
|
1855
|
+
tableContentTemplate = viewChild('tableContent', ...(ngDevMode ? [{ debugName: "tableContentTemplate" }] : []));
|
|
1856
|
+
overlayRef;
|
|
1857
|
+
portal;
|
|
1858
|
+
onEscape() {
|
|
1859
|
+
if (this.overlayRef && this.isMyOverlayOnTop())
|
|
1860
|
+
this.exitFullscreen();
|
|
1861
|
+
}
|
|
1862
|
+
ngOnDestroy() {
|
|
1863
|
+
//Limpiamos timeout de filtro query
|
|
1864
|
+
if (this.queryTimeout !== undefined)
|
|
1865
|
+
clearTimeout(this.queryTimeout);
|
|
1866
|
+
//Limpiamos todos los timeouts de filtros tipo texto de columnas
|
|
1867
|
+
Object.keys(this.timeoutsByKey).forEach((key) => {
|
|
1868
|
+
const timeout = this.timeoutsByKey[key];
|
|
1869
|
+
clearTimeout(timeout);
|
|
1870
|
+
});
|
|
1871
|
+
}
|
|
1872
|
+
includeInColumnConfig(searchedColumn, allColumns) {
|
|
1873
|
+
return allColumns.some(column => searchedColumn.key == column.key);
|
|
1874
|
+
}
|
|
1875
|
+
getKeyAsString = (columnKey) => columnKey;
|
|
1876
|
+
onPageChange(event) {
|
|
1877
|
+
this.filters().update(value => {
|
|
1878
|
+
return {
|
|
1879
|
+
...value,
|
|
1880
|
+
pageNumber: value.pageSize == event.pageSize ? event.pageIndex + 1 : 1,
|
|
1881
|
+
pageSize: event.pageSize
|
|
1882
|
+
};
|
|
1883
|
+
});
|
|
1884
|
+
}
|
|
1885
|
+
onQueryChange(inputElement) {
|
|
1886
|
+
const query = inputElement.value;
|
|
1887
|
+
if (this.queryTimeout !== undefined)
|
|
1888
|
+
clearTimeout(this.queryTimeout);
|
|
1889
|
+
this.queryTimeout = setTimeout(() => {
|
|
1890
|
+
this.filters().update((value) => {
|
|
1891
|
+
return { ...value, query: query, pageNumber: 1 };
|
|
1892
|
+
});
|
|
1893
|
+
}, this.debounceTime);
|
|
1894
|
+
}
|
|
1895
|
+
onQueryReset(inputElement) {
|
|
1896
|
+
inputElement.value = '';
|
|
1897
|
+
this.onQueryChange(inputElement);
|
|
1898
|
+
}
|
|
1899
|
+
onSortChange(sort) {
|
|
1900
|
+
this.filters().update(value => {
|
|
1901
|
+
return {
|
|
1902
|
+
...value,
|
|
1903
|
+
pageNumber: 1,
|
|
1904
|
+
sortBy: sort.direction ? { key: sort.active, direction: sort.direction } : undefined
|
|
1905
|
+
};
|
|
1906
|
+
});
|
|
1907
|
+
}
|
|
1908
|
+
onNewClick() {
|
|
1909
|
+
this.createClick.emit();
|
|
1910
|
+
}
|
|
1911
|
+
onUpdateClick(row, event) {
|
|
1912
|
+
this.updateClick.emit(row);
|
|
1913
|
+
event.stopPropagation();
|
|
1914
|
+
}
|
|
1915
|
+
onRowClick(row) {
|
|
1916
|
+
if (this.isRowEnabled(row))
|
|
1917
|
+
this.updateClick.emit(row);
|
|
1918
|
+
}
|
|
1919
|
+
isRowEnabled(row) {
|
|
1920
|
+
return this.config()().update
|
|
1921
|
+
&& this.config()().clickOnRowForUpdate
|
|
1922
|
+
&& (!this.config()().update?.show || this.config()().update?.show?.(row))
|
|
1923
|
+
&& !this.config()().update?.disabled?.(row);
|
|
1924
|
+
}
|
|
1925
|
+
onDeleteClick(row, event) {
|
|
1926
|
+
event.stopPropagation();
|
|
1927
|
+
const title = this.config()().deleteConfirm?.title?.(row) ?? 'Eliminar';
|
|
1928
|
+
const body = this.config()().deleteConfirm?.body?.(row) ?? 'Vas a eliminar el registro seleccionado. ¿Estas seguro?';
|
|
1929
|
+
const template = this.config()().deleteConfirm?.templateRef?.();
|
|
1930
|
+
const data = {
|
|
1931
|
+
title: title,
|
|
1932
|
+
body: !template ? body : undefined,
|
|
1933
|
+
template: template,
|
|
1934
|
+
row: row,
|
|
1935
|
+
confirmButtonLabel: 'Eliminar'
|
|
1936
|
+
};
|
|
1937
|
+
const dialogRef = this.dialog.open(NgxConfirmDialogComponent, { data: data });
|
|
1938
|
+
dialogRef.afterClosed().subscribe((confirm) => {
|
|
1939
|
+
if (confirm)
|
|
1940
|
+
this.deleteClick.emit(row);
|
|
1941
|
+
});
|
|
1942
|
+
}
|
|
1943
|
+
onRowActionClick(row, rowAction, event) {
|
|
1944
|
+
this.rowActionClick.emit({ id: rowAction.id, row: row });
|
|
1945
|
+
event.stopPropagation();
|
|
1946
|
+
}
|
|
1947
|
+
onTextFilterColumnChange(column, event) {
|
|
1948
|
+
const query = event.target.value;
|
|
1949
|
+
//Si existe, limpio el anterior
|
|
1950
|
+
if (column.key in this.timeoutsByKey)
|
|
1951
|
+
clearTimeout(this.timeoutsByKey[column.key]);
|
|
1952
|
+
this.timeoutsByKey[column.key] = setTimeout(() => {
|
|
1953
|
+
this.onColumnFilterChange(column.key, query);
|
|
1954
|
+
}, this.debounceTime);
|
|
1955
|
+
}
|
|
1956
|
+
onOptionFilterColumnChange(column, event) {
|
|
1957
|
+
this.onColumnFilterChange(column.key, event.value);
|
|
1958
|
+
}
|
|
1959
|
+
onDateFilterChange(column, value) {
|
|
1960
|
+
this.onColumnFilterChange(column.key, value);
|
|
1961
|
+
}
|
|
1962
|
+
onDateRangeFilterChange(column, value) {
|
|
1963
|
+
this.onColumnFilterChange(column.key, value);
|
|
1964
|
+
}
|
|
1965
|
+
onColumnFilterChange(columnKey, value) {
|
|
1966
|
+
this.filters().update(currentValue => {
|
|
1967
|
+
const columnsFiltersValue = currentValue.columnsFiltersValue ?? {};
|
|
1968
|
+
columnsFiltersValue[columnKey] = value;
|
|
1969
|
+
return {
|
|
1970
|
+
...currentValue,
|
|
1971
|
+
pageNumber: 1,
|
|
1972
|
+
columnsFiltersValue: columnsFiltersValue
|
|
1973
|
+
};
|
|
1974
|
+
});
|
|
1975
|
+
}
|
|
1976
|
+
getValueOfColumnFilter(key) {
|
|
1977
|
+
return this.filters()().columnsFiltersValue?.[key];
|
|
1978
|
+
}
|
|
1979
|
+
getDateRangeValueOfColumnFilter(key, type) {
|
|
1980
|
+
const value = this.getValueOfColumnFilter(key);
|
|
1981
|
+
if (!value)
|
|
1982
|
+
return null;
|
|
1983
|
+
return type == 'start' ? value.start : value.end;
|
|
1984
|
+
}
|
|
1985
|
+
onEditColumns() {
|
|
1986
|
+
const config = this.config()();
|
|
1987
|
+
const filters = this.filters()();
|
|
1988
|
+
const columnConfig = this.columnConfig();
|
|
1989
|
+
const columnsLabel = Object.fromEntries(config.columns.map(column => [column.key, column.label]));
|
|
1990
|
+
const data = {
|
|
1991
|
+
tableId: config.tableId,
|
|
1992
|
+
tableName: config.title(),
|
|
1993
|
+
columns: columnConfig,
|
|
1994
|
+
filtersValue: filters.columnsFiltersValue ?? {},
|
|
1995
|
+
columnsLabels: columnsLabel
|
|
1996
|
+
};
|
|
1997
|
+
this.dialog.open(ConfigureTableColumnsComponent, { data: data });
|
|
1998
|
+
}
|
|
1999
|
+
applyColumnPipes(value, pipes) {
|
|
2000
|
+
if (!pipes)
|
|
2001
|
+
return value;
|
|
2002
|
+
const pipesArray = Array.isArray(pipes) ? pipes : [pipes];
|
|
2003
|
+
return pipesArray.reduce((v, p) => p.pipe.transform(v, ...(p.args || [])), value);
|
|
2004
|
+
}
|
|
2005
|
+
onNewAdvancedFiltersClick() {
|
|
2006
|
+
const data = {
|
|
2007
|
+
config: this.config()(),
|
|
2008
|
+
advancedFilter: {
|
|
2009
|
+
name: '',
|
|
2010
|
+
groups: [
|
|
2011
|
+
{
|
|
2012
|
+
id: v4(),
|
|
2013
|
+
connector: 'AND',
|
|
2014
|
+
filters: [{ id: v4() }]
|
|
2015
|
+
}
|
|
2016
|
+
]
|
|
2017
|
+
}
|
|
2018
|
+
};
|
|
2019
|
+
const dialogRef = this.dialog.open(ConfigureAdvancedFilterComponent, { data: data });
|
|
2020
|
+
dialogRef.afterClosed().subscribe((advancedFilter) => {
|
|
2021
|
+
if (advancedFilter)
|
|
2022
|
+
this.onApplyTemplateClick(advancedFilter);
|
|
2023
|
+
});
|
|
2024
|
+
}
|
|
2025
|
+
onApplyTemplateClick(advancedFilter) {
|
|
2026
|
+
const advancedFilterId = advancedFilter?.groups?.[0].id;
|
|
2027
|
+
this.filters().update(currentValue => {
|
|
2028
|
+
return {
|
|
2029
|
+
...currentValue,
|
|
2030
|
+
advancedFilterId: advancedFilterId,
|
|
2031
|
+
pageNumber: 1
|
|
2032
|
+
};
|
|
2033
|
+
});
|
|
2034
|
+
}
|
|
2035
|
+
onSelectedAdvancedFilterUpdate(event) {
|
|
2036
|
+
const advancedFilterId = this.filters()().advancedFilterId;
|
|
2037
|
+
if (!advancedFilterId)
|
|
2038
|
+
return;
|
|
2039
|
+
const tableId = this.config()().tableId;
|
|
2040
|
+
const advancedFilter = this.advancedFilterService.getAdvancedFilterById(tableId, advancedFilterId);
|
|
2041
|
+
if (!advancedFilter)
|
|
2042
|
+
return;
|
|
2043
|
+
this.onAdvancedFilterUpdate(event, advancedFilter);
|
|
2044
|
+
}
|
|
2045
|
+
onAdvancedFilterUpdate(event, advancedFilter, advancedFiltersMenuTrigger) {
|
|
2046
|
+
event.stopPropagation();
|
|
2047
|
+
advancedFiltersMenuTrigger?.closeMenu();
|
|
2048
|
+
const data = {
|
|
2049
|
+
config: this.config()(),
|
|
2050
|
+
advancedFilter: advancedFilter
|
|
2051
|
+
};
|
|
2052
|
+
const dialogRef = this.dialog.open(ConfigureAdvancedFilterComponent, { data: data });
|
|
2053
|
+
dialogRef.afterClosed().subscribe((advancedFilter) => {
|
|
2054
|
+
if (advancedFilter)
|
|
2055
|
+
this.onApplyTemplateClick(advancedFilter);
|
|
2056
|
+
});
|
|
2057
|
+
}
|
|
2058
|
+
onAdvancedFilterDelete(event, advancedFiltersMenuTrigger, advancedFilter) {
|
|
2059
|
+
event.stopPropagation();
|
|
2060
|
+
advancedFiltersMenuTrigger.closeMenu();
|
|
2061
|
+
const data = {
|
|
2062
|
+
title: 'Eliminar plantilla de filtro avanzado',
|
|
2063
|
+
body: `Vas a eliminar la plantilla de filtro avanzado '${advancedFilter.name}'. ¿Estas seguro?`,
|
|
2064
|
+
confirmButtonLabel: 'Eliminar'
|
|
2065
|
+
};
|
|
2066
|
+
const dialogRef = this.dialog.open(NgxConfirmDialogComponent, { data: data });
|
|
2067
|
+
dialogRef.afterClosed().subscribe((confirm) => {
|
|
2068
|
+
if (confirm) {
|
|
2069
|
+
if (this.filters()().advancedFilterId == advancedFilter.groups[0].id)
|
|
2070
|
+
this.onApplyTemplateClick();
|
|
2071
|
+
this.advancedFilterService.deleteAdvancedFilter(this.config()().tableId, advancedFilter);
|
|
2072
|
+
}
|
|
2073
|
+
});
|
|
2074
|
+
}
|
|
2075
|
+
onQuitAdvancedFilter(event) {
|
|
2076
|
+
event.stopPropagation();
|
|
2077
|
+
this.onApplyTemplateClick();
|
|
2078
|
+
}
|
|
2079
|
+
getAdvancedFilterLabel() {
|
|
2080
|
+
const advancedFilterId = this.filters()().advancedFilterId;
|
|
2081
|
+
if (!advancedFilterId)
|
|
2082
|
+
return '';
|
|
2083
|
+
const tableId = this.config()().tableId;
|
|
2084
|
+
const advancedFilter = this.advancedFilterService.getAdvancedFilterById(tableId, advancedFilterId);
|
|
2085
|
+
if (!advancedFilter)
|
|
2086
|
+
return '';
|
|
2087
|
+
return AdvancedFilterUtils.groupsToReadableHtml(advancedFilter.groups, this.config()().columns);
|
|
2088
|
+
}
|
|
2089
|
+
rowIsExpanded(row) {
|
|
2090
|
+
return this.expandedItem() == row;
|
|
2091
|
+
}
|
|
2092
|
+
expandableToggle(row) {
|
|
2093
|
+
this.expandedItem.update(currentValue => {
|
|
2094
|
+
const newValue = currentValue != row ? row : null;
|
|
2095
|
+
this.expandedItemChange.emit(newValue);
|
|
2096
|
+
return newValue;
|
|
2097
|
+
});
|
|
2098
|
+
}
|
|
2099
|
+
getTotalOfColum(columnKey) {
|
|
2100
|
+
const result = this.data().reduce((previous, item) => (previous + Number(item[columnKey])), 0);
|
|
2101
|
+
return result;
|
|
2102
|
+
}
|
|
2103
|
+
areEqualByKeys(record1, record2) {
|
|
2104
|
+
const primaryKey = this.config()().primaryKey;
|
|
2105
|
+
if (Array.isArray(primaryKey))
|
|
2106
|
+
return primaryKey.every(key => record1[key] === record2[key]);
|
|
2107
|
+
else
|
|
2108
|
+
return record1[primaryKey] === record2[primaryKey];
|
|
2109
|
+
}
|
|
2110
|
+
isRowSelected(row) {
|
|
2111
|
+
return this.selection().some(row2 => this.areEqualByKeys(row, row2));
|
|
2112
|
+
}
|
|
2113
|
+
toggleRowSelection(row) {
|
|
2114
|
+
if (this.isRowSelected(row)) {
|
|
2115
|
+
this.selection.update(recordsSelected => {
|
|
2116
|
+
return recordsSelected.filter(record => !this.areEqualByKeys(row, record));
|
|
2117
|
+
});
|
|
2118
|
+
}
|
|
2119
|
+
else {
|
|
2120
|
+
this.selection.update(recordsSelected => [...recordsSelected, row]);
|
|
2121
|
+
}
|
|
2122
|
+
}
|
|
2123
|
+
isAllPageRowSelected() {
|
|
2124
|
+
const records = this.data();
|
|
2125
|
+
return records.every(record => this.isRowSelected(record));
|
|
2126
|
+
}
|
|
2127
|
+
toggleAllPageRowSelection() {
|
|
2128
|
+
const records = this.data();
|
|
2129
|
+
if (this.isAllPageRowSelected()) {
|
|
2130
|
+
//Deseleccionar todas las filas de la página actual
|
|
2131
|
+
this.selection.update(recordsSelected => {
|
|
2132
|
+
return recordsSelected.filter(record => !records.some(row2 => this.areEqualByKeys(record, row2)));
|
|
2133
|
+
});
|
|
2134
|
+
}
|
|
2135
|
+
else {
|
|
2136
|
+
//Seleccionar todas las filas visibles que aún no estén seleccionadas
|
|
2137
|
+
const notSelected = records.filter(record => !this.isRowSelected(record));
|
|
2138
|
+
this.selection.update(recordsSelected => {
|
|
2139
|
+
// Evitar duplicados por si ya hay seleccionadas
|
|
2140
|
+
const nuevas = notSelected.filter(row => !recordsSelected.some(sel => this.areEqualByKeys(sel, row)));
|
|
2141
|
+
return [...recordsSelected, ...nuevas];
|
|
2142
|
+
});
|
|
2143
|
+
}
|
|
2144
|
+
}
|
|
2145
|
+
getRowSelectionAction() {
|
|
2146
|
+
return this.config()().rowSelectionAction ?? [];
|
|
2147
|
+
}
|
|
2148
|
+
uncheckAllSelection() {
|
|
2149
|
+
this.selection.set([]);
|
|
2150
|
+
}
|
|
2151
|
+
onRowSelectionActionClick(actionId) {
|
|
2152
|
+
this.selectionActionEvent.emit({
|
|
2153
|
+
id: actionId,
|
|
2154
|
+
rows: this.selection()
|
|
2155
|
+
});
|
|
2156
|
+
}
|
|
2157
|
+
getDocumentHeaders() {
|
|
2158
|
+
const config = this.config()();
|
|
2159
|
+
return config.columns.map(c => c.label);
|
|
2160
|
+
}
|
|
2161
|
+
getDocumentRows() {
|
|
2162
|
+
const config = this.config()();
|
|
2163
|
+
const columns = config.columns;
|
|
2164
|
+
const data = this.data();
|
|
2165
|
+
return data.map(row => {
|
|
2166
|
+
if (config.mapperForExportData) {
|
|
2167
|
+
const mapped = config.mapperForExportData(row);
|
|
2168
|
+
return columns.map(c => mapped[c.key]);
|
|
2169
|
+
}
|
|
2170
|
+
return columns.map(c => row[c.key] ?? '');
|
|
2171
|
+
});
|
|
2172
|
+
}
|
|
2173
|
+
exportToCsvCurrentPage() {
|
|
2174
|
+
const config = this.config()();
|
|
2175
|
+
const title = config.title();
|
|
2176
|
+
const fileName = config.exportFileName?.() ?? title;
|
|
2177
|
+
const headers = this.getDocumentHeaders();
|
|
2178
|
+
const rows = this.getDocumentRows();
|
|
2179
|
+
const aoaData = [headers, ...rows];
|
|
2180
|
+
//const workSheet = utils.json_to_sheet(data);
|
|
2181
|
+
const workSheet = utils.aoa_to_sheet(aoaData);
|
|
2182
|
+
const workBook = utils.book_new();
|
|
2183
|
+
utils.book_append_sheet(workBook, workSheet, title);
|
|
2184
|
+
writeFileXLSX(workBook, `${fileName}.xlsx`);
|
|
2185
|
+
}
|
|
2186
|
+
exportToPdfCurrentPage() {
|
|
2187
|
+
const config = this.config()();
|
|
2188
|
+
const title = config.title();
|
|
2189
|
+
const fileName = config.exportFileName?.() ?? title;
|
|
2190
|
+
const headers = this.getDocumentHeaders();
|
|
2191
|
+
const rows = this.getDocumentRows();
|
|
2192
|
+
const doc = config.pdfConfig ?? new jsPDF({
|
|
2193
|
+
orientation: 'landscape',
|
|
2194
|
+
unit: 'pt',
|
|
2195
|
+
format: 'A4'
|
|
2196
|
+
});
|
|
2197
|
+
doc.setFontSize(14);
|
|
2198
|
+
doc.text(title, 40, 40);
|
|
2199
|
+
autoTable(doc, {
|
|
2200
|
+
startY: 60,
|
|
2201
|
+
head: [headers],
|
|
2202
|
+
body: rows,
|
|
2203
|
+
styles: { fontSize: 9, cellPadding: 4 },
|
|
2204
|
+
headStyles: { fillColor: [192, 0, 28], textColor: 255 },
|
|
2205
|
+
alternateRowStyles: { fillColor: [245, 245, 245] },
|
|
2206
|
+
tableLineColor: [200, 200, 200],
|
|
2207
|
+
tableLineWidth: 0.1,
|
|
2208
|
+
});
|
|
2209
|
+
doc.save(`${fileName}.pdf`);
|
|
2210
|
+
}
|
|
2211
|
+
onToggleFullScreen() {
|
|
2212
|
+
if (this.isFullScreen())
|
|
2213
|
+
this.exitFullscreen();
|
|
2214
|
+
else
|
|
2215
|
+
this.enterFullscreen();
|
|
2216
|
+
}
|
|
2217
|
+
enterFullscreen() {
|
|
2218
|
+
if (this.overlayRef)
|
|
2219
|
+
return;
|
|
2220
|
+
this.overlayRef = this.overlay.create({
|
|
2221
|
+
hasBackdrop: false,
|
|
2222
|
+
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
2223
|
+
positionStrategy: this.overlay.position().global().top('0').left('0').right('0').bottom('0'),
|
|
2224
|
+
});
|
|
2225
|
+
this.portal = new TemplatePortal(this.tableContentTemplate(), this.viewContainerRef);
|
|
2226
|
+
this.overlayRef.attach(this.portal);
|
|
2227
|
+
this.isFullScreen.set(true);
|
|
2228
|
+
}
|
|
2229
|
+
exitFullscreen() {
|
|
2230
|
+
if (!this.overlayRef)
|
|
2231
|
+
return;
|
|
2232
|
+
this.overlayRef.detach();
|
|
2233
|
+
this.overlayRef.dispose();
|
|
2234
|
+
this.overlayRef = undefined;
|
|
2235
|
+
this.portal = undefined;
|
|
2236
|
+
this.isFullScreen.set(false);
|
|
2237
|
+
}
|
|
2238
|
+
isMyOverlayOnTop() {
|
|
2239
|
+
if (!this.overlayRef)
|
|
2240
|
+
return false;
|
|
2241
|
+
//Contenedor principal de overlays en el DOM
|
|
2242
|
+
const containerElement = this.overlayContainer.getContainerElement();
|
|
2243
|
+
// Los overlays se añaden como hijos dentro de este contenedor
|
|
2244
|
+
const overlays = Array.from(containerElement.children);
|
|
2245
|
+
// El último hijo es el overlay más "arriba"
|
|
2246
|
+
const topOverlay = overlays[overlays.length - 1];
|
|
2247
|
+
return topOverlay === this.overlayRef.hostElement;
|
|
2248
|
+
}
|
|
2249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2250
|
+
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?.() ?? 'Nuevo'\" \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 <button matIconButton matTooltip=\"Visualizar y ordernar columnas\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n <mat-icon>table_edit</mat-icon>\r\n </button>\r\n\r\n @if(config()().showAdvancedFilters) {\r\n <button \r\n matIconButton \r\n matTooltip=\"Filtros avanzados\" \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>Nuevo filtro</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]=\"`Editar '${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]=\"`Eliminar '${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=\"Operaciones sobre los registros seleccionados\"\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>Desmarcar todos los registros</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=\"Desmarcar todos los registros\"\r\n (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n }\r\n }\r\n\r\n <button matIconButton matTooltip=\"Exportar datos\" [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>Exportar a XLSX la p\u00E1gina actual</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>Exportar a PDF la p\u00E1gina actual</span>\r\n </button>\r\n </mat-menu>\r\n\r\n <button matIconButton [matTooltip]=\"isFullScreen() ? 'Salir del modo de pantalla completa': 'Pantalla completa'\" (click)=\"onToggleFullScreen()\">\r\n <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n </button>\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 ?? 'Buscar...'\" [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=\"Quitar filtros avanzados\" 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 <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></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 [ngStyle]=\"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 mat-footer-cell *matFooterCellDef [ngStyle]=\"column.style\">\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 [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\">\r\n <td mat-footer-cell *matFooterCellDef [ngStyle]=\"column.style\">\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 <mat-form-field subscriptSizing=\"dynamic\" class=\"selectColumn\">\r\n <mat-select\r\n [placeholder]=\"column.label\" \r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n [value]=\"getValueOfColumnFilter(column.key)\"\r\n (selectionChange)=\"onOptionFilterColumnChange(column, $event)\">\r\n \r\n @if(column.filterType == 'option') {\r\n <mat-option>-- Quitar filtro --</mat-option>\r\n }\r\n @for (option of column.filterOptions; track $index;) {\r\n <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\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=\"Desde\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input \r\n matEndDate \r\n placeholder=\"Hasta\"\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>Acciones</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) ?? 'Editar'\" \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) ?? 'Elminar'\" \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() ? 'Cargando...' : 'No se han encontrado resultados...' }}</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>Total parcial (por p\u00E1gina)</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>Total (todos los registros)</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);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$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$3.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: "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: MatDatepickerModule }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.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: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.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: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.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: "pipe", type: OnlyUpperFirstCharacterPipe, name: "ngxOnlyUpperFirstCharacter" }] });
|
|
2251
|
+
}
|
|
2252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, decorators: [{
|
|
2253
|
+
type: Component,
|
|
2254
|
+
args: [{ selector: 'ngx-paginated-table', imports: [
|
|
2255
|
+
MatTableModule,
|
|
2256
|
+
MatSortModule,
|
|
2257
|
+
MatPaginatorModule,
|
|
2258
|
+
MatIconModule,
|
|
2259
|
+
MatButtonModule,
|
|
2260
|
+
MatProgressBarModule,
|
|
2261
|
+
MatTooltipModule,
|
|
2262
|
+
MatFormFieldModule,
|
|
2263
|
+
MatInputModule,
|
|
2264
|
+
MatSelectModule,
|
|
2265
|
+
MatDatepickerModule,
|
|
2266
|
+
CommonModule,
|
|
2267
|
+
DynamicCellHostDirective,
|
|
2268
|
+
MatMenuModule,
|
|
2269
|
+
MatDividerModule,
|
|
2270
|
+
OnlyUpperFirstCharacterPipe,
|
|
2271
|
+
MatCheckboxModule
|
|
2272
|
+
], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n <div class=\"headerContainer\">\r\n <div class=\"titleAndButtonContainer\">\r\n <p class=\"title\">{{ config()().title() }}</p>\r\n <div class=\"buttonContainer\">\r\n @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n <button \r\n matIconButton \r\n [matTooltip]=\"config()().create?.tooltip?.() ?? 'Nuevo'\" \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 <button matIconButton matTooltip=\"Visualizar y ordernar columnas\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n <mat-icon>table_edit</mat-icon>\r\n </button>\r\n\r\n @if(config()().showAdvancedFilters) {\r\n <button \r\n matIconButton \r\n matTooltip=\"Filtros avanzados\" \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>Nuevo filtro</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]=\"`Editar '${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]=\"`Eliminar '${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=\"Operaciones sobre los registros seleccionados\"\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>Desmarcar todos los registros</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=\"Desmarcar todos los registros\"\r\n (click)=\"uncheckAllSelection()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n }\r\n }\r\n\r\n <button matIconButton matTooltip=\"Exportar datos\" [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>Exportar a XLSX la p\u00E1gina actual</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>Exportar a PDF la p\u00E1gina actual</span>\r\n </button>\r\n </mat-menu>\r\n\r\n <button matIconButton [matTooltip]=\"isFullScreen() ? 'Salir del modo de pantalla completa': 'Pantalla completa'\" (click)=\"onToggleFullScreen()\">\r\n <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n </button>\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 ?? 'Buscar...'\" [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=\"Quitar filtros avanzados\" 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 <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></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 [ngStyle]=\"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 mat-footer-cell *matFooterCellDef [ngStyle]=\"column.style\">\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 [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\">\r\n <td mat-footer-cell *matFooterCellDef [ngStyle]=\"column.style\">\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 <mat-form-field subscriptSizing=\"dynamic\" class=\"selectColumn\">\r\n <mat-select\r\n [placeholder]=\"column.label\" \r\n [multiple]=\"column.filterType == 'option-multiple'\"\r\n [value]=\"getValueOfColumnFilter(column.key)\"\r\n (selectionChange)=\"onOptionFilterColumnChange(column, $event)\">\r\n \r\n @if(column.filterType == 'option') {\r\n <mat-option>-- Quitar filtro --</mat-option>\r\n }\r\n @for (option of column.filterOptions; track $index;) {\r\n <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\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=\"Desde\"\r\n [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n <input \r\n matEndDate \r\n placeholder=\"Hasta\"\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>Acciones</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) ?? 'Editar'\" \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) ?? 'Elminar'\" \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() ? 'Cargando...' : 'No se han encontrado resultados...' }}</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>Total parcial (por p\u00E1gina)</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>Total (todos los registros)</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);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"] }]
|
|
2273
|
+
}], propDecorators: { endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }], tableContentTemplate: [{ type: i0.ViewChild, args: ['tableContent', { isSignal: true }] }], onEscape: [{
|
|
2274
|
+
type: HostListener,
|
|
2275
|
+
args: ['document:keydown.escape']
|
|
2276
|
+
}] } });
|
|
2277
|
+
|
|
961
2278
|
class NgxDialogService {
|
|
962
2279
|
// dependencies injection
|
|
963
2280
|
_dialog = inject(MatDialog);
|
|
@@ -1100,10 +2417,10 @@ class NgxDialogService {
|
|
|
1100
2417
|
autoFocus: dialogConfig?.autoFocus ?? false
|
|
1101
2418
|
}).afterClosed();
|
|
1102
2419
|
}
|
|
1103
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1104
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
2420
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2421
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogService, providedIn: 'root' });
|
|
1105
2422
|
}
|
|
1106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogService, decorators: [{
|
|
1107
2424
|
type: Injectable,
|
|
1108
2425
|
args: [{
|
|
1109
2426
|
providedIn: 'root'
|
|
@@ -1116,5 +2433,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
1116
2433
|
* Generated bundle index. Do not edit.
|
|
1117
2434
|
*/
|
|
1118
2435
|
|
|
1119
|
-
export { DynamicHostDirective, NgxBasicSelect, NgxBasicTable, NgxDialog, NgxDialogService, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedTable };
|
|
2436
|
+
export { DynamicHostDirective, FILTER_CONNECTOR_LABEL, FILTER_OPERATOR_LABEL, NgxBasicSelect, NgxBasicTable, NgxConfirmDialogComponent, NgxDialog, NgxDialogService, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedTable, OPERATOR_BY_FILTER_TYPE, OPTIONS_FILTER_CONNECTOR, USER_ID_FACTORY };
|
|
1120
2437
|
//# sourceMappingURL=ngx-eiffage-material.mjs.map
|