ngx-eiffage-material 0.0.6 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-eiffage-material.mjs +357 -14
- package/fesm2022/ngx-eiffage-material.mjs.map +1 -1
- package/index.d.ts +102 -6
- package/package.json +1 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, Component, Injectable, inject, output, computed, viewChild, effect, signal, forwardRef } from '@angular/core';
|
|
3
|
-
import * as
|
|
2
|
+
import { input, Component, Injectable, inject, output, computed, viewChild, effect, signal, forwardRef, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/material/button';
|
|
4
4
|
import { MatButtonModule } from '@angular/material/button';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i4 from '@angular/material/icon';
|
|
6
6
|
import { MatIconModule } from '@angular/material/icon';
|
|
7
7
|
import * as i2 from '@angular/material/progress-spinner';
|
|
8
8
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
9
|
-
import * as i1 from '@angular/material/card';
|
|
9
|
+
import * as i1$1 from '@angular/material/card';
|
|
10
10
|
import { MatCardModule } from '@angular/material/card';
|
|
11
11
|
import * as i3 from '@angular/material/sort';
|
|
12
12
|
import { MatSortModule } from '@angular/material/sort';
|
|
@@ -19,11 +19,25 @@ 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
21
|
import { SlicePipe, TitleCasePipe, LowerCasePipe, UpperCasePipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe, CommonModule } from '@angular/common';
|
|
22
|
+
import * as i5$1 from '@angular/forms';
|
|
22
23
|
import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
24
|
+
import * as i6 from '@angular/material/chips';
|
|
23
25
|
import { MatChipsModule } from '@angular/material/chips';
|
|
26
|
+
import * as i2$2 from '@angular/material/form-field';
|
|
24
27
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
28
|
+
import * as i7$1 from '@angular/material/progress-bar';
|
|
25
29
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
30
|
+
import * as i1$2 from '@angular/material/input';
|
|
26
31
|
import { MatInputModule } from '@angular/material/input';
|
|
32
|
+
import * as i3$1 from '@angular/material/select';
|
|
33
|
+
import { MatSelectModule } from '@angular/material/select';
|
|
34
|
+
import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA, MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
|
35
|
+
import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
|
|
36
|
+
import { toSignal, toObservable, rxResource } from '@angular/core/rxjs-interop';
|
|
37
|
+
import * as i2$3 from '@angular/material/divider';
|
|
38
|
+
import { MatDividerModule } from '@angular/material/divider';
|
|
39
|
+
import * as i8$1 from '@angular/material/list';
|
|
40
|
+
import { MatListModule } from '@angular/material/list';
|
|
27
41
|
|
|
28
42
|
class NgxLoadingButton {
|
|
29
43
|
isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : [])); //Indica si el botón está cargando
|
|
@@ -36,7 +50,7 @@ class NgxLoadingButton {
|
|
|
36
50
|
//Por defecto es Primary
|
|
37
51
|
color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : [])); //Color del botón
|
|
38
52
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxLoadingButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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:
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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 }] });
|
|
40
54
|
}
|
|
41
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxLoadingButton, decorators: [{
|
|
42
56
|
type: Component,
|
|
@@ -191,10 +205,11 @@ class CommonTableComponent {
|
|
|
191
205
|
//outputs
|
|
192
206
|
create = output();
|
|
193
207
|
view = output();
|
|
208
|
+
download = output();
|
|
194
209
|
update = output();
|
|
195
210
|
delete = output();
|
|
196
211
|
//computed
|
|
197
|
-
displayedColumns = computed(() => this.tableConfig().
|
|
212
|
+
displayedColumns = computed(() => this.tableConfig().tableColumns.map(column => column.key), ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
|
|
198
213
|
datasource = computed(() => new MatTableDataSource(), ...(ngDevMode ? [{ debugName: "datasource" }] : []));
|
|
199
214
|
paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
|
|
200
215
|
constructor() {
|
|
@@ -207,7 +222,7 @@ class CommonTableComponent {
|
|
|
207
222
|
});
|
|
208
223
|
}
|
|
209
224
|
getAllColumns() {
|
|
210
|
-
const columns = [...this.
|
|
225
|
+
const columns = [...this.displayedColumns()];
|
|
211
226
|
if (this.hasActions()) {
|
|
212
227
|
columns.push('actions');
|
|
213
228
|
}
|
|
@@ -235,6 +250,9 @@ class CommonTableComponent {
|
|
|
235
250
|
onViewClick(row) {
|
|
236
251
|
this.view.emit(row);
|
|
237
252
|
}
|
|
253
|
+
onDownloadClick(row) {
|
|
254
|
+
this.download.emit(row);
|
|
255
|
+
}
|
|
238
256
|
onUpdateClick(row) {
|
|
239
257
|
this.update.emit(row);
|
|
240
258
|
}
|
|
@@ -242,7 +260,7 @@ class CommonTableComponent {
|
|
|
242
260
|
this.delete.emit(row);
|
|
243
261
|
}
|
|
244
262
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CommonTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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", 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 mat-raised-button type=\"button\" (click)=\"onCreateClick()\">\r\n <mat-icon>add</mat-icon>\r\n <span>Create</span>\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>Actions</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('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]=\"5\"\r\n [pageSizeOptions]=\"[5, 10, 25, 100]\"\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.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: i4.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: i4.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: i6.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"] }] });
|
|
263
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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 mat-raised-button type=\"button\" (click)=\"onCreateClick()\">\r\n <mat-icon>add</mat-icon>\r\n <span>Create</span>\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>Actions</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]=\"5\"\r\n [pageSizeOptions]=\"[5, 10, 25, 100]\"\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.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"] }] });
|
|
246
264
|
}
|
|
247
265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CommonTableComponent, decorators: [{
|
|
248
266
|
type: Component,
|
|
@@ -255,7 +273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
|
|
|
255
273
|
MatIconModule,
|
|
256
274
|
MatPaginatorModule,
|
|
257
275
|
NgxSkeletonLoaderModule
|
|
258
|
-
], 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 mat-raised-button type=\"button\" (click)=\"onCreateClick()\">\r\n <mat-icon>add</mat-icon>\r\n <span>Create</span>\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>Actions</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('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]=\"5\"\r\n [pageSizeOptions]=\"[5, 10, 25, 100]\"\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"] }]
|
|
276
|
+
], 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 mat-raised-button type=\"button\" (click)=\"onCreateClick()\">\r\n <mat-icon>add</mat-icon>\r\n <span>Create</span>\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>Actions</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]=\"5\"\r\n [pageSizeOptions]=\"[5, 10, 25, 100]\"\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"] }]
|
|
259
277
|
}], ctorParameters: () => [] });
|
|
260
278
|
|
|
261
279
|
class NgxBasicTable {
|
|
@@ -266,6 +284,7 @@ class NgxBasicTable {
|
|
|
266
284
|
//outputs
|
|
267
285
|
create = output();
|
|
268
286
|
view = output();
|
|
287
|
+
download = output();
|
|
269
288
|
update = output();
|
|
270
289
|
delete = output();
|
|
271
290
|
/**
|
|
@@ -277,6 +296,9 @@ class NgxBasicTable {
|
|
|
277
296
|
onViewClick(row) {
|
|
278
297
|
this.view.emit(row);
|
|
279
298
|
}
|
|
299
|
+
onDownloadClick(row) {
|
|
300
|
+
this.download.emit(row);
|
|
301
|
+
}
|
|
280
302
|
onUpdateClick(row) {
|
|
281
303
|
this.update.emit(row);
|
|
282
304
|
}
|
|
@@ -284,11 +306,11 @@ class NgxBasicTable {
|
|
|
284
306
|
this.delete.emit(row);
|
|
285
307
|
}
|
|
286
308
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxBasicTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
287
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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", 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 (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", "update", "delete"] }] });
|
|
309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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"] }] });
|
|
288
310
|
}
|
|
289
311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxBasicTable, decorators: [{
|
|
290
312
|
type: Component,
|
|
291
|
-
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 (update)=\"onUpdateClick($event)\"\r\n (delete)=\"onDeleteClick($event)\"\r\n/>\r\n" }]
|
|
313
|
+
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" }]
|
|
292
314
|
}] });
|
|
293
315
|
|
|
294
316
|
class NgxPaginatedTable {
|
|
@@ -390,7 +412,7 @@ class NgxInputFile {
|
|
|
390
412
|
useExisting: forwardRef(() => NgxInputFile),
|
|
391
413
|
multi: true,
|
|
392
414
|
},
|
|
393
|
-
], viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"class()\">\r\n <div\r\n (click)=\"onContainerClick()\"\r\n [class]=\"['inputContainer', disabled() ? 'inputContainerDisabled' : '', error() && !disabled() ? 'borderError' : '', isDropping() && !disabled() ? 'isDropping' : '']\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n <input #inputFileRef type=\"file\" [accept]=\"getAccept()\" [multiple]=\"multiple()\" (change)=\"onInputchange($event)\">\r\n \r\n <p [class]=\"['label', error() && !disabled() ? 'markError' : '']\">{{label()}}</p>\r\n @if (value().length === 0) {\r\n <p class=\"noFiles\">{{placeholder()}}</p>\r\n }\r\n @for (file of value(); track file) {\r\n <div class=\"fileContainer\">\r\n <p class=\"fileData\"><span>({{bytesToMegaBytes(file.size)}} MB)</span> {{file.name}}</p>\r\n <button matIconButton type=\"button\" color=\"primary\" matTooltip=\"Eliminar archivo\" (click)=\"onDeleteFileClick($event, file)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"hintYError\">\r\n @if (error() && !disabled()) {\r\n <span class=\"markError\">{{ error() }}</span>\r\n } @else {\r\n <span>{{ hint() }}</span>\r\n }\r\n
|
|
415
|
+
], viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"class()\">\r\n <div\r\n (click)=\"onContainerClick()\"\r\n [class]=\"['inputContainer', disabled() ? 'inputContainerDisabled' : '', error() && !disabled() ? 'borderError' : '', isDropping() && !disabled() ? 'isDropping' : '']\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n <input #inputFileRef type=\"file\" [accept]=\"getAccept()\" [multiple]=\"multiple()\" (change)=\"onInputchange($event)\">\r\n \r\n <p [class]=\"['label', error() && !disabled() ? 'markError' : '']\">{{label()}}</p>\r\n @if (value().length === 0) {\r\n <p class=\"noFiles\">{{placeholder()}}</p>\r\n }\r\n @for (file of value(); track file) {\r\n <div class=\"fileContainer\">\r\n <p class=\"fileData\"><span>({{bytesToMegaBytes(file.size)}} MB)</span> {{file.name}}</p>\r\n <button matIconButton type=\"button\" color=\"primary\" matTooltip=\"Eliminar archivo\" (click)=\"onDeleteFileClick($event, file)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"hintYError\">\r\n @if (error() && !disabled()) {\r\n <span class=\"markError\">{{ error() }}</span>\r\n } @else {\r\n <span>{{ hint() }}</span>\r\n }\r\n </div>\r\n</div>", styles: [":host{display:block}.inputContainer{width:100%;min-height:56px;border:1px solid #ccc;border-radius:5px;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:center}.inputContainerDisabled{cursor:default!important;opacity:.4}input{display:none}.label{margin:0;position:absolute;top:-8px;left:10px;background:#fff;padding:0 5px;font-size:12px;color:#636363;white-space:nowrap;overflow:hidden;max-width:80%}.noFiles{padding:16px;margin:0;color:#3f3f3f}.fileContainer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}.fileData{width:100%;margin:0;font-size:13px;padding-left:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileData span{color:var(--primary);font-weight:400}.hintYError{height:20px;display:flex;align-items:center;padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size))}.borderError{border-color:var(--mat-sys-error)}.markError{color:var(--mat-sys-error)}.isDropping{border-style:solid;border-color:var(--primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatChipsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatInputModule }] });
|
|
394
416
|
}
|
|
395
417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxInputFile, decorators: [{
|
|
396
418
|
type: Component,
|
|
@@ -410,7 +432,328 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
|
|
|
410
432
|
useExisting: forwardRef(() => NgxInputFile),
|
|
411
433
|
multi: true,
|
|
412
434
|
},
|
|
413
|
-
], template: "<div [class]=\"class()\">\r\n <div\r\n (click)=\"onContainerClick()\"\r\n [class]=\"['inputContainer', disabled() ? 'inputContainerDisabled' : '', error() && !disabled() ? 'borderError' : '', isDropping() && !disabled() ? 'isDropping' : '']\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n <input #inputFileRef type=\"file\" [accept]=\"getAccept()\" [multiple]=\"multiple()\" (change)=\"onInputchange($event)\">\r\n \r\n <p [class]=\"['label', error() && !disabled() ? 'markError' : '']\">{{label()}}</p>\r\n @if (value().length === 0) {\r\n <p class=\"noFiles\">{{placeholder()}}</p>\r\n }\r\n @for (file of value(); track file) {\r\n <div class=\"fileContainer\">\r\n <p class=\"fileData\"><span>({{bytesToMegaBytes(file.size)}} MB)</span> {{file.name}}</p>\r\n <button matIconButton type=\"button\" color=\"primary\" matTooltip=\"Eliminar archivo\" (click)=\"onDeleteFileClick($event, file)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"hintYError\">\r\n @if (error() && !disabled()) {\r\n <span class=\"markError\">{{ error() }}</span>\r\n } @else {\r\n <span>{{ hint() }}</span>\r\n }\r\n
|
|
435
|
+
], template: "<div [class]=\"class()\">\r\n <div\r\n (click)=\"onContainerClick()\"\r\n [class]=\"['inputContainer', disabled() ? 'inputContainerDisabled' : '', error() && !disabled() ? 'borderError' : '', isDropping() && !disabled() ? 'isDropping' : '']\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n <input #inputFileRef type=\"file\" [accept]=\"getAccept()\" [multiple]=\"multiple()\" (change)=\"onInputchange($event)\">\r\n \r\n <p [class]=\"['label', error() && !disabled() ? 'markError' : '']\">{{label()}}</p>\r\n @if (value().length === 0) {\r\n <p class=\"noFiles\">{{placeholder()}}</p>\r\n }\r\n @for (file of value(); track file) {\r\n <div class=\"fileContainer\">\r\n <p class=\"fileData\"><span>({{bytesToMegaBytes(file.size)}} MB)</span> {{file.name}}</p>\r\n <button matIconButton type=\"button\" color=\"primary\" matTooltip=\"Eliminar archivo\" (click)=\"onDeleteFileClick($event, file)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"hintYError\">\r\n @if (error() && !disabled()) {\r\n <span class=\"markError\">{{ error() }}</span>\r\n } @else {\r\n <span>{{ hint() }}</span>\r\n }\r\n </div>\r\n</div>", styles: [":host{display:block}.inputContainer{width:100%;min-height:56px;border:1px solid #ccc;border-radius:5px;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:center}.inputContainerDisabled{cursor:default!important;opacity:.4}input{display:none}.label{margin:0;position:absolute;top:-8px;left:10px;background:#fff;padding:0 5px;font-size:12px;color:#636363;white-space:nowrap;overflow:hidden;max-width:80%}.noFiles{padding:16px;margin:0;color:#3f3f3f}.fileContainer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}.fileData{width:100%;margin:0;font-size:13px;padding-left:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileData span{color:var(--primary);font-weight:400}.hintYError{height:20px;display:flex;align-items:center;padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size))}.borderError{border-color:var(--mat-sys-error)}.markError{color:var(--mat-sys-error)}.isDropping{border-style:solid;border-color:var(--primary)}\n"] }]
|
|
436
|
+
}] });
|
|
437
|
+
|
|
438
|
+
const includeNoSensible = (cadena, query) => {
|
|
439
|
+
const nomalizadoCadena = cadena
|
|
440
|
+
.toLowerCase()
|
|
441
|
+
.normalize('NFD')
|
|
442
|
+
.replace(/[\u0300-\u036f]/g, '');
|
|
443
|
+
const nomalizadoQuery = query
|
|
444
|
+
.toLowerCase()
|
|
445
|
+
.normalize('NFD')
|
|
446
|
+
.replace(/[\u0300-\u036f]/g, '');
|
|
447
|
+
return nomalizadoCadena.includes(nomalizadoQuery);
|
|
448
|
+
};
|
|
449
|
+
const base64ToUtf8 = (str) => {
|
|
450
|
+
return decodeURIComponent(atob(str)
|
|
451
|
+
.split('')
|
|
452
|
+
.map(function (c) {
|
|
453
|
+
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
|
|
454
|
+
})
|
|
455
|
+
.join(''));
|
|
456
|
+
};
|
|
457
|
+
|
|
458
|
+
class NgxBasicSelect {
|
|
459
|
+
//inputs
|
|
460
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
461
|
+
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
462
|
+
basicSelectConfig = input.required(...(ngDevMode ? [{ debugName: "basicSelectConfig" }] : []));
|
|
463
|
+
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
464
|
+
isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
465
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
466
|
+
appearance = input('fill', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
467
|
+
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
468
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
469
|
+
clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
|
|
470
|
+
error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
471
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
472
|
+
//outputs
|
|
473
|
+
selectionChange = output();
|
|
474
|
+
//viewChilds
|
|
475
|
+
matSelect = viewChild.required('matSelect');
|
|
476
|
+
searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
|
|
477
|
+
ngOnInit() {
|
|
478
|
+
if (this.disabled()) {
|
|
479
|
+
this.control().disable();
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
onOpenedChange(opened) {
|
|
483
|
+
if (opened) {
|
|
484
|
+
this.onClearInputClick();
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
includeInFilter(option, query) {
|
|
488
|
+
return includeNoSensible(String(this.basicSelectConfig().displayedLabel(option)), query);
|
|
489
|
+
}
|
|
490
|
+
onClearClick() {
|
|
491
|
+
this.control().setValue(this.multiple() ? [] : null);
|
|
492
|
+
this.selectionChange.emit(this.multiple() ? [] : null);
|
|
493
|
+
}
|
|
494
|
+
onSelectionChange(event) {
|
|
495
|
+
if (this.multiple()) {
|
|
496
|
+
const values = event.value;
|
|
497
|
+
this.selectionChange.emit(values);
|
|
498
|
+
}
|
|
499
|
+
else {
|
|
500
|
+
const value = event.value;
|
|
501
|
+
this.selectionChange.emit(value);
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
onClearInputClick() {
|
|
505
|
+
const searchInputRef = this.searchInput();
|
|
506
|
+
if (searchInputRef) {
|
|
507
|
+
searchInputRef.nativeElement.value = '';
|
|
508
|
+
searchInputRef.nativeElement.focus();
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxBasicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
512
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
|
|
513
|
+
}
|
|
514
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxBasicSelect, decorators: [{
|
|
515
|
+
type: Component,
|
|
516
|
+
args: [{ selector: 'ngx-basic-select', imports: [
|
|
517
|
+
MatInputModule,
|
|
518
|
+
MatSelectModule,
|
|
519
|
+
MatIconModule,
|
|
520
|
+
MatButtonModule,
|
|
521
|
+
MatFormFieldModule,
|
|
522
|
+
ReactiveFormsModule,
|
|
523
|
+
MatProgressSpinnerModule,
|
|
524
|
+
], 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"] }]
|
|
525
|
+
}] });
|
|
526
|
+
|
|
527
|
+
class PaginatedSelectBottomSheetComponent {
|
|
528
|
+
// dependencies injection
|
|
529
|
+
_bottomSheetRef = inject((MatBottomSheetRef));
|
|
530
|
+
_data = inject(MAT_BOTTOM_SHEET_DATA);
|
|
531
|
+
//signals
|
|
532
|
+
accumulatedItems = signal([], ...(ngDevMode ? [{ debugName: "accumulatedItems" }] : []));
|
|
533
|
+
queryInput = signal('', ...(ngDevMode ? [{ debugName: "queryInput" }] : []));
|
|
534
|
+
cancel$ = new Subject();
|
|
535
|
+
debouncedQuery = toSignal(toObservable(this.queryInput).pipe(debounceTime(500), distinctUntilChanged()), { initialValue: '' });
|
|
536
|
+
// Obtener valores iniciales seleccionados
|
|
537
|
+
getInitialSelectedValues() {
|
|
538
|
+
return this._data.selectedItems.map(item => item[this._data.config.valueKey]);
|
|
539
|
+
}
|
|
540
|
+
selectedsOptions = signal(this._data.selectedItems, ...(ngDevMode ? [{ debugName: "selectedsOptions" }] : []));
|
|
541
|
+
selectedsOptionsValues = signal(this.getInitialSelectedValues(), ...(ngDevMode ? [{ debugName: "selectedsOptionsValues" }] : []));
|
|
542
|
+
//resource
|
|
543
|
+
optionsResource = rxResource({
|
|
544
|
+
params: () => {
|
|
545
|
+
const filters = {
|
|
546
|
+
...this._data.filters(),
|
|
547
|
+
query: this.debouncedQuery(),
|
|
548
|
+
};
|
|
549
|
+
this.cancel$.next();
|
|
550
|
+
return filters;
|
|
551
|
+
},
|
|
552
|
+
stream: ({ params }) => this._data.endpoint(params).pipe(takeUntil(this.cancel$)),
|
|
553
|
+
defaultValue: { items: [], total: 0 },
|
|
554
|
+
});
|
|
555
|
+
//computed
|
|
556
|
+
isLoading = computed(() => this.optionsResource.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
557
|
+
options = computed(() => this.accumulatedItems(), ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
558
|
+
total = computed(() => this.optionsResource.value().total, ...(ngDevMode ? [{ debugName: "total" }] : []));
|
|
559
|
+
//effect
|
|
560
|
+
filtersEffect = effect(() => {
|
|
561
|
+
const resourceValue = this.optionsResource.value();
|
|
562
|
+
const currentPage = this._data.filters().pageNumber;
|
|
563
|
+
if (currentPage === 1) {
|
|
564
|
+
this.accumulatedItems.set(resourceValue.items);
|
|
565
|
+
}
|
|
566
|
+
else {
|
|
567
|
+
this.accumulatedItems.update((current) => [...current, ...resourceValue.items]);
|
|
568
|
+
}
|
|
569
|
+
}, ...(ngDevMode ? [{ debugName: "filtersEffect" }] : []));
|
|
570
|
+
onScroll(div) {
|
|
571
|
+
if (this.isLoading())
|
|
572
|
+
return;
|
|
573
|
+
const scrollTop = div.scrollTop;
|
|
574
|
+
const clientHeight = div.clientHeight;
|
|
575
|
+
const scrollHeight = div.scrollHeight;
|
|
576
|
+
const marginToBottom = 300;
|
|
577
|
+
const isNearToBottom = scrollTop + clientHeight + marginToBottom >= scrollHeight;
|
|
578
|
+
const optionsLength = this.options().length;
|
|
579
|
+
const total = this.total();
|
|
580
|
+
if (isNearToBottom && total > optionsLength) {
|
|
581
|
+
this._data.filters.update((current) => ({
|
|
582
|
+
...current,
|
|
583
|
+
pageNumber: current.pageNumber + 1
|
|
584
|
+
}));
|
|
585
|
+
}
|
|
586
|
+
}
|
|
587
|
+
onQueryChange(event, div) {
|
|
588
|
+
const query = event.target.value;
|
|
589
|
+
this.queryInput.set(query);
|
|
590
|
+
div.scrollTop = 0;
|
|
591
|
+
if (this._data.filters().pageNumber !== 1) {
|
|
592
|
+
this._data.filters.update((current) => ({
|
|
593
|
+
...current,
|
|
594
|
+
pageNumber: 1
|
|
595
|
+
}));
|
|
596
|
+
}
|
|
597
|
+
}
|
|
598
|
+
onClearClick(input) {
|
|
599
|
+
input.value = '';
|
|
600
|
+
this.queryInput.set('');
|
|
601
|
+
if (this._data.filters().pageNumber !== 1) {
|
|
602
|
+
this._data.filters.update((current) => ({
|
|
603
|
+
...current,
|
|
604
|
+
pageNumber: 1
|
|
605
|
+
}));
|
|
606
|
+
}
|
|
607
|
+
}
|
|
608
|
+
onSelectionChange(event) {
|
|
609
|
+
if (this._data.multiple) {
|
|
610
|
+
const selectedsOptionsValues = event.source.selectedOptions.selected.map(option => option.value);
|
|
611
|
+
const selectedsOptions = this.options().filter(option => selectedsOptionsValues.includes(option[this._data.config.valueKey]));
|
|
612
|
+
this.selectedsOptions.update(() => {
|
|
613
|
+
return selectedsOptions;
|
|
614
|
+
});
|
|
615
|
+
}
|
|
616
|
+
else {
|
|
617
|
+
const selectedOptionValue = event.options[0].value;
|
|
618
|
+
const selectedOption = this.options().find(option => option[this._data.config.valueKey] == selectedOptionValue);
|
|
619
|
+
this._bottomSheetRef.dismiss([selectedOption]);
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
isSelected(optionValue) {
|
|
623
|
+
return this.selectedsOptionsValues().includes(optionValue);
|
|
624
|
+
}
|
|
625
|
+
onResetClick() {
|
|
626
|
+
this.selectedsOptions.set([]);
|
|
627
|
+
this.selectedsOptionsValues.set([]);
|
|
628
|
+
}
|
|
629
|
+
onConfirmMultiSelectionClick() {
|
|
630
|
+
this._bottomSheetRef.dismiss(this.selectedsOptions());
|
|
631
|
+
}
|
|
632
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PaginatedSelectBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: PaginatedSelectBottomSheetComponent, isStandalone: true, selector: "paginated-select-bottom-sheet", 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\" (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 </div>\n <div class=\"loading\">\n @if(isLoading()) {\n <mat-progress-bar mode=\"indeterminate\" />\n }\n </div>\n <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\n <mat-selection-list [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\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 {{_data.config.displayedLabel(option)}}\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 mat-button (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\n }\n <button mat-raised-button 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}.bottomSheetContainer .header .title{margin-top:15px;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 .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)}@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$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.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: i6.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6.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: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i8$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i8$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
634
|
+
}
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PaginatedSelectBottomSheetComponent, decorators: [{
|
|
636
|
+
type: Component,
|
|
637
|
+
args: [{ selector: 'paginated-select-bottom-sheet', imports: [
|
|
638
|
+
MatButtonModule,
|
|
639
|
+
MatDividerModule,
|
|
640
|
+
CommonModule,
|
|
641
|
+
MatFormFieldModule,
|
|
642
|
+
MatIconModule,
|
|
643
|
+
MatInputModule,
|
|
644
|
+
MatChipsModule,
|
|
645
|
+
MatProgressBarModule,
|
|
646
|
+
MatListModule,
|
|
647
|
+
ReactiveFormsModule,
|
|
648
|
+
], encapsulation: ViewEncapsulation.None, 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\" (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 </div>\n <div class=\"loading\">\n @if(isLoading()) {\n <mat-progress-bar mode=\"indeterminate\" />\n }\n </div>\n <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\n <mat-selection-list [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\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 {{_data.config.displayedLabel(option)}}\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 mat-button (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\n }\n <button mat-raised-button 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}.bottomSheetContainer .header .title{margin-top:15px;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 .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)}@media (max-width: 960px){:host{min-width:auto}}\n"] }]
|
|
649
|
+
}] });
|
|
650
|
+
|
|
651
|
+
class NgxPaginatedSelect {
|
|
652
|
+
// dependencies injection
|
|
653
|
+
_bottomSheet = inject(MatBottomSheet);
|
|
654
|
+
cdr = inject(ChangeDetectorRef);
|
|
655
|
+
// inputs
|
|
656
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
657
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
658
|
+
endpoint = input.required(...(ngDevMode ? [{ debugName: "endpoint" }] : []));
|
|
659
|
+
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
660
|
+
filters = input(signal({
|
|
661
|
+
pageNumber: 1,
|
|
662
|
+
pageSize: 10,
|
|
663
|
+
query: undefined,
|
|
664
|
+
sortBy: undefined
|
|
665
|
+
}), ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
666
|
+
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
667
|
+
selectedItems = input([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
668
|
+
hideFilter = input(false, ...(ngDevMode ? [{ debugName: "hideFilter" }] : []));
|
|
669
|
+
filterPlaceholder = input('Select an option', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
|
|
670
|
+
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
671
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
672
|
+
clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
|
|
673
|
+
itemsLabel = input('items', ...(ngDevMode ? [{ debugName: "itemsLabel" }] : []));
|
|
674
|
+
multipleItemsLabel = input('items selected', ...(ngDevMode ? [{ debugName: "multipleItemsLabel" }] : []));
|
|
675
|
+
resetLabel = input('Reset', ...(ngDevMode ? [{ debugName: "resetLabel" }] : []));
|
|
676
|
+
confirmLabel = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : []));
|
|
677
|
+
error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
678
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
679
|
+
hideChips = input(false, ...(ngDevMode ? [{ debugName: "hideChips" }] : []));
|
|
680
|
+
_selectedItems = signal(this.selectedItems(), ...(ngDevMode ? [{ debugName: "_selectedItems" }] : []));
|
|
681
|
+
getSelectedItemsLabel() {
|
|
682
|
+
return this._selectedItems()
|
|
683
|
+
.map((item) => String(this.config().displayedLabel(item)))
|
|
684
|
+
.join(', ') || '';
|
|
685
|
+
}
|
|
686
|
+
// signals
|
|
687
|
+
// filters = signal<PaginatedFilter>(this.initialFilters);
|
|
688
|
+
// effect
|
|
689
|
+
controlEffect = effect(() => {
|
|
690
|
+
const selectedItems = this._selectedItems();
|
|
691
|
+
if (this.multiple()) {
|
|
692
|
+
this.control().setValue(selectedItems.map((item) => item[this.config().valueKey]));
|
|
693
|
+
}
|
|
694
|
+
else {
|
|
695
|
+
this.control().setValue(selectedItems?.[0]?.[this.config().valueKey]);
|
|
696
|
+
}
|
|
697
|
+
this.cdr.markForCheck();
|
|
698
|
+
}, ...(ngDevMode ? [{ debugName: "controlEffect" }] : []));
|
|
699
|
+
onOpenBottomSheetClick(event) {
|
|
700
|
+
event.stopPropagation();
|
|
701
|
+
event.preventDefault();
|
|
702
|
+
event.target.blur();
|
|
703
|
+
this.control().markAsTouched();
|
|
704
|
+
this.control().markAsDirty();
|
|
705
|
+
this._bottomSheet.open(PaginatedSelectBottomSheetComponent, {
|
|
706
|
+
data: {
|
|
707
|
+
label: this.label(),
|
|
708
|
+
title: this.title(),
|
|
709
|
+
endpoint: this.endpoint(),
|
|
710
|
+
config: this.config(),
|
|
711
|
+
selectedItems: this._selectedItems(),
|
|
712
|
+
hideFilter: this.hideFilter(),
|
|
713
|
+
filters: this.filters(),
|
|
714
|
+
filterPlaceholder: this.filterPlaceholder(),
|
|
715
|
+
multiple: this.multiple(),
|
|
716
|
+
itemsLabel: this.itemsLabel(),
|
|
717
|
+
multipleItemsLabel: this.multipleItemsLabel(),
|
|
718
|
+
resetLabel: this.resetLabel(),
|
|
719
|
+
confirmLabel: this.confirmLabel(),
|
|
720
|
+
},
|
|
721
|
+
}).afterDismissed().subscribe((selectedItems) => {
|
|
722
|
+
// this.filters().set(this.initialFilters);
|
|
723
|
+
if (selectedItems !== undefined) {
|
|
724
|
+
this._selectedItems.set(selectedItems);
|
|
725
|
+
}
|
|
726
|
+
});
|
|
727
|
+
}
|
|
728
|
+
onChipRemoved(item) {
|
|
729
|
+
this._selectedItems.set(this._selectedItems().filter(i => i[this.config().valueKey] !== item[this.config().valueKey]));
|
|
730
|
+
}
|
|
731
|
+
onResetClick(event) {
|
|
732
|
+
event.stopPropagation();
|
|
733
|
+
event.preventDefault();
|
|
734
|
+
// this.filters.set(this.initialFilters);
|
|
735
|
+
this._selectedItems.set(this.selectedItems());
|
|
736
|
+
this.control().reset();
|
|
737
|
+
this.control().markAsTouched();
|
|
738
|
+
this.control().updateValueAndValidity();
|
|
739
|
+
this.cdr.markForCheck();
|
|
740
|
+
}
|
|
741
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxPaginatedSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
742
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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 } }, 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 \n <input\n matInput\n [formControl]=\"control()\"\n [readonly]=\"true\"\n [value]=\"getSelectedItemsLabel()\"\n class=\"clickable-input\"\n />\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 class=\"chips-field\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-chip-grid #chipGrid class=\"chips-grid\" [formControl]=\"control()\">\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}", styles: [":host{display:block}.clickable-input{cursor:pointer!important;pointer-events:none}mat-form-field{cursor:pointer}.chips-field{width:auto}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}:host ::ng-deep .mat-mdc-form-field-infix{width:auto;min-width:180px}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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }] });
|
|
743
|
+
}
|
|
744
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxPaginatedSelect, decorators: [{
|
|
745
|
+
type: Component,
|
|
746
|
+
args: [{ selector: 'ngx-paginated-select', imports: [
|
|
747
|
+
MatButtonModule,
|
|
748
|
+
MatBottomSheetModule,
|
|
749
|
+
CommonModule,
|
|
750
|
+
MatFormFieldModule,
|
|
751
|
+
MatInputModule,
|
|
752
|
+
MatIconModule,
|
|
753
|
+
MatSelectModule,
|
|
754
|
+
ReactiveFormsModule,
|
|
755
|
+
MatChipsModule
|
|
756
|
+
], 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 \n <input\n matInput\n [formControl]=\"control()\"\n [readonly]=\"true\"\n [value]=\"getSelectedItemsLabel()\"\n class=\"clickable-input\"\n />\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 class=\"chips-field\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-chip-grid #chipGrid class=\"chips-grid\" [formControl]=\"control()\">\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}", styles: [":host{display:block}.clickable-input{cursor:pointer!important;pointer-events:none}mat-form-field{cursor:pointer}.chips-field{width:auto}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}:host ::ng-deep .mat-mdc-form-field-infix{width:auto;min-width:180px}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"] }]
|
|
414
757
|
}] });
|
|
415
758
|
|
|
416
759
|
// export * from './lib/services/index';
|
|
@@ -420,5 +763,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
|
|
|
420
763
|
* Generated bundle index. Do not edit.
|
|
421
764
|
*/
|
|
422
765
|
|
|
423
|
-
export { NgxBasicTable, NgxInputFile, NgxLoadingButton, NgxPaginatedTable };
|
|
766
|
+
export { NgxBasicSelect, NgxBasicTable, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedTable };
|
|
424
767
|
//# sourceMappingURL=ngx-eiffage-material.mjs.map
|