@tilde-nlp/ngx-common 2.0.6 → 2.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/esm2020/lib/confirmation-modal/confirmation-modal.component.mjs +3 -3
- package/esm2020/lib/multi-functional-table/models/column-select-config.model.mjs +1 -1
- package/esm2020/lib/multi-functional-table/multi-functional-table.component.mjs +37 -10
- package/fesm2015/tilde-nlp-ngx-common.mjs +41 -14
- package/fesm2015/tilde-nlp-ngx-common.mjs.map +1 -1
- package/fesm2020/tilde-nlp-ngx-common.mjs +38 -11
- package/fesm2020/tilde-nlp-ngx-common.mjs.map +1 -1
- package/lib/multi-functional-table/models/column-select-config.model.d.ts +4 -0
- package/lib/multi-functional-table/multi-functional-table.component.d.ts +11 -2
- package/package.json +1 -1
- package/styles/components/buttons.scss +6 -0
- package/styles/components/dialogs.scss +10 -0
- package/styles/tilde-style.scss +1 -0
|
@@ -9,7 +9,7 @@ import * as i2$1 from '@angular/material/tooltip';
|
|
|
9
9
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
10
10
|
import * as i1$2 from '@ngx-translate/core';
|
|
11
11
|
import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
|
|
12
|
-
import { Observable, of, take } from 'rxjs';
|
|
12
|
+
import { Observable, of, map, take } from 'rxjs';
|
|
13
13
|
import * as i11 from '@angular/material/progress-spinner';
|
|
14
14
|
import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
15
15
|
import * as i1$3 from '@angular/material/button';
|
|
@@ -30,6 +30,7 @@ import { MatSelectModule } from '@angular/material/select';
|
|
|
30
30
|
import * as i6$1 from '@angular/material/core';
|
|
31
31
|
import * as i7 from '@angular/forms';
|
|
32
32
|
import { FormsModule } from '@angular/forms';
|
|
33
|
+
import { SelectionModel } from '@angular/cdk/collections';
|
|
33
34
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
34
35
|
import * as i4 from '@angular/material/table';
|
|
35
36
|
import { MatNoDataRow, MatHeaderRowDef, MatRowDef, MatColumnDef, MatTable, MatTableModule } from '@angular/material/table';
|
|
@@ -1268,11 +1269,16 @@ class MultiFunctionalTableComponent {
|
|
|
1268
1269
|
constructor(domService, translateService) {
|
|
1269
1270
|
this.domService = domService;
|
|
1270
1271
|
this.translateService = translateService;
|
|
1272
|
+
this.selection = new SelectionModel(true, []);
|
|
1271
1273
|
//#region Output properties
|
|
1272
1274
|
this.filterBarChange = new EventEmitter();
|
|
1273
1275
|
this.exported = new EventEmitter();
|
|
1276
|
+
this.selectionChange = this.selection.changed.asObservable().pipe(map(() => { return this.selection.selected; }));
|
|
1274
1277
|
this.noDataRowIcon = "manage_search";
|
|
1278
|
+
this.batchColumnName = "batch";
|
|
1275
1279
|
}
|
|
1280
|
+
get filterActive() { return this.config.filter?.enabled; }
|
|
1281
|
+
//#region Angular lifecycle hooks
|
|
1276
1282
|
ngOnInit() {
|
|
1277
1283
|
this.readFromLocalStorage();
|
|
1278
1284
|
this.setFilterProperties();
|
|
@@ -1290,10 +1296,15 @@ class MultiFunctionalTableComponent {
|
|
|
1290
1296
|
ngAfterViewInit() {
|
|
1291
1297
|
this.config.dataSource.sort = this.sort;
|
|
1292
1298
|
}
|
|
1299
|
+
//#endregion
|
|
1293
1300
|
updateDisplayColumns(initial = false) {
|
|
1301
|
+
this.batchSelectedEnabled = this.config.columnSelect?.batchSelect ? true : false;
|
|
1294
1302
|
const allColumns = this.config.columnSelect?.columns ?? [];
|
|
1295
1303
|
this.displayColumns = [];
|
|
1296
1304
|
this.configurableColumns = allColumns.filter(column => !column.notConfigurable);
|
|
1305
|
+
if (this.batchSelectedEnabled) {
|
|
1306
|
+
this.displayColumns.push(this.batchColumnName);
|
|
1307
|
+
}
|
|
1297
1308
|
if (!allColumns.length) {
|
|
1298
1309
|
return;
|
|
1299
1310
|
}
|
|
@@ -1337,6 +1348,23 @@ class MultiFunctionalTableComponent {
|
|
|
1337
1348
|
this.exportToFile();
|
|
1338
1349
|
}
|
|
1339
1350
|
}
|
|
1351
|
+
//#region Methods for batch selection
|
|
1352
|
+
isAllSelected() {
|
|
1353
|
+
const numSelected = this.selection.selected.length;
|
|
1354
|
+
const numRows = this.config.dataSource.data.length;
|
|
1355
|
+
return numSelected === numRows;
|
|
1356
|
+
}
|
|
1357
|
+
toggleAllRowSelection() {
|
|
1358
|
+
if (this.isAllSelected()) {
|
|
1359
|
+
this.selection.clear();
|
|
1360
|
+
return;
|
|
1361
|
+
}
|
|
1362
|
+
this.selection.select(...this.config.dataSource.data);
|
|
1363
|
+
}
|
|
1364
|
+
toggleElementSelection(element) {
|
|
1365
|
+
this.selection.toggle(element);
|
|
1366
|
+
}
|
|
1367
|
+
//#endregion
|
|
1340
1368
|
exportToFile() {
|
|
1341
1369
|
if (!this.config.export?.fileOptions?.saveToFile) {
|
|
1342
1370
|
return;
|
|
@@ -1373,14 +1401,11 @@ class MultiFunctionalTableComponent {
|
|
|
1373
1401
|
}
|
|
1374
1402
|
}
|
|
1375
1403
|
setColumnSelectProperties() {
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
this.updateDisplayColumns(true);
|
|
1379
|
-
}
|
|
1404
|
+
this.columnSelectActive = this.config.columnSelect?.enabled ? true : false;
|
|
1405
|
+
this.updateDisplayColumns(true);
|
|
1380
1406
|
}
|
|
1381
1407
|
setFilterProperties() {
|
|
1382
1408
|
if (this.config.filter?.enabled) {
|
|
1383
|
-
this.filterActive = true;
|
|
1384
1409
|
this.filterBarVisible = this.localStorageValue?.filter?.visible ?? this.config.filter.visible ?? false;
|
|
1385
1410
|
this.filterSettings = this.config.filter.settings;
|
|
1386
1411
|
}
|
|
@@ -1401,22 +1426,24 @@ class MultiFunctionalTableComponent {
|
|
|
1401
1426
|
}
|
|
1402
1427
|
}
|
|
1403
1428
|
MultiFunctionalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableComponent, deps: [{ token: DOMService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1404
|
-
MultiFunctionalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config" }, outputs: { filterBarChange: "filterBarChange", exported: "exported" }, queries: [{ propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "columnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableElementRef", first: true, predicate: MatTable, descendants: true, read: ElementRef }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n <div fxLayout=\"row\">\r\n <div fxFlex fxLayoutGap=\"1rem\">\r\n <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n <span class=\"material-icons column-select-icon\">menu</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n </button>\r\n\r\n <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n <span class=\"material-icons\">filter_list</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n </button>\r\n\r\n <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n <span class=\"material-icons-outlined\">cloud_download</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n </button>\r\n </div>\r\n\r\n <ng-content select=\"[additionalActions]\"></ng-content>\r\n </div>\r\n\r\n <mat-menu #columnMenu=\"matMenu\">\r\n <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n <div *ngFor=\"let column of configurableColumns\">\r\n <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n {{column.displayName | translate}}\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n </tld-filter-bar>\r\n <table #table mat-table [dataSource]=\"config.dataSource\">\r\n <ng-content></ng-content>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n <ng-container *ngIf=\"noDataRowActive\">\r\n <tr *matNoDataRow>\r\n <!-- add random number to make sure it takes full width -->\r\n <td colspan=\"99\">\r\n <div class=\"no-engines-wrapper\">\r\n <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n <div>\r\n <span class=\"material-icons-outlined\">\r\n {{noDataRowIcon}}\r\n </span>\r\n </div>\r\n <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n </div>\r\n <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n </ng-container>\r\n <ng-template #loading>\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </table>\r\n
|
|
1429
|
+
MultiFunctionalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config" }, outputs: { filterBarChange: "filterBarChange", exported: "exported", selectionChange: "selectionChange" }, queries: [{ propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "rowDefs", predicate: MatRowDef, descendants: true }, { propertyName: "columnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableElementRef", first: true, predicate: MatTable, descendants: true, read: ElementRef }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n <div fxLayout=\"row\">\r\n <div fxFlex fxLayoutGap=\"1rem\">\r\n <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n <span class=\"material-icons column-select-icon\">menu</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n </button>\r\n\r\n <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n <span class=\"material-icons\">filter_list</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n </button>\r\n\r\n <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n <span class=\"material-icons-outlined\">cloud_download</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n </button>\r\n </div>\r\n\r\n <ng-content select=\"[additionalActions]\"></ng-content>\r\n </div>\r\n\r\n <mat-menu #columnMenu=\"matMenu\">\r\n <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n <div *ngFor=\"let column of configurableColumns\">\r\n <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n {{column.displayName | translate}}\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n </tld-filter-bar>\r\n <table #table mat-table [dataSource]=\"config.dataSource\">\r\n <ng-content></ng-content>\r\n <ng-container [matColumnDef]=\"batchColumnName\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox (change)=\"toggleAllRowSelection()\" [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"toggleElementSelection(element)\"\r\n [checked]=\"selection.isSelected(element)\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n <ng-container *ngIf=\"noDataRowActive\">\r\n <tr *matNoDataRow>\r\n <!-- add random number to make sure it takes full width -->\r\n <td colspan=\"99\">\r\n <div class=\"no-engines-wrapper\">\r\n <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n <div>\r\n <span class=\"material-icons-outlined\">\r\n {{noDataRowIcon}}\r\n </span>\r\n </div>\r\n <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n </div>\r\n <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n </ng-container>\r\n <ng-template #loading>\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </table>\r\n</div>\r\n", styles: [":host ::ng-deep tr.mat-row:hover{background-color:var(--base-95)}table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FilterBarComponent, selector: "tld-filter-bar", inputs: ["settings"], outputs: ["filterBarChange"] }, { kind: "directive", type: i2$2.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$2.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$2.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
1405
1430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableComponent, decorators: [{
|
|
1406
1431
|
type: Component,
|
|
1407
|
-
args: [{ selector: 'tld-multi-functional-table', template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n <div fxLayout=\"row\">\r\n <div fxFlex fxLayoutGap=\"1rem\">\r\n <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n <span class=\"material-icons column-select-icon\">menu</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n </button>\r\n\r\n <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n <span class=\"material-icons\">filter_list</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n </button>\r\n\r\n <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n <span class=\"material-icons-outlined\">cloud_download</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n </button>\r\n </div>\r\n\r\n <ng-content select=\"[additionalActions]\"></ng-content>\r\n </div>\r\n\r\n <mat-menu #columnMenu=\"matMenu\">\r\n <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n <div *ngFor=\"let column of configurableColumns\">\r\n <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n {{column.displayName | translate}}\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n </tld-filter-bar>\r\n <table #table mat-table [dataSource]=\"config.dataSource\">\r\n <ng-content></ng-content>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n <ng-container *ngIf=\"noDataRowActive\">\r\n <tr *matNoDataRow>\r\n <!-- add random number to make sure it takes full width -->\r\n <td colspan=\"99\">\r\n <div class=\"no-engines-wrapper\">\r\n <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n <div>\r\n <span class=\"material-icons-outlined\">\r\n {{noDataRowIcon}}\r\n </span>\r\n </div>\r\n <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n </div>\r\n <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n </ng-container>\r\n <ng-template #loading>\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </table>\r\n
|
|
1432
|
+
args: [{ selector: 'tld-multi-functional-table', template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n <div fxLayout=\"row\">\r\n <div fxFlex fxLayoutGap=\"1rem\">\r\n <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n <span class=\"material-icons column-select-icon\">menu</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n </button>\r\n\r\n <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n <span class=\"material-icons\">filter_list</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n </button>\r\n\r\n <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n <span class=\"material-icons-outlined\">cloud_download</span>\r\n <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n </button>\r\n </div>\r\n\r\n <ng-content select=\"[additionalActions]\"></ng-content>\r\n </div>\r\n\r\n <mat-menu #columnMenu=\"matMenu\">\r\n <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n <div *ngFor=\"let column of configurableColumns\">\r\n <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n {{column.displayName | translate}}\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n </tld-filter-bar>\r\n <table #table mat-table [dataSource]=\"config.dataSource\">\r\n <ng-content></ng-content>\r\n <ng-container [matColumnDef]=\"batchColumnName\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox (change)=\"toggleAllRowSelection()\" [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"toggleElementSelection(element)\"\r\n [checked]=\"selection.isSelected(element)\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n <ng-container *ngIf=\"noDataRowActive\">\r\n <tr *matNoDataRow>\r\n <!-- add random number to make sure it takes full width -->\r\n <td colspan=\"99\">\r\n <div class=\"no-engines-wrapper\">\r\n <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n <div>\r\n <span class=\"material-icons-outlined\">\r\n {{noDataRowIcon}}\r\n </span>\r\n </div>\r\n <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n </div>\r\n <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n </ng-container>\r\n <ng-template #loading>\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </ng-template>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n\r\n </table>\r\n</div>\r\n", styles: [":host ::ng-deep tr.mat-row:hover{background-color:var(--base-95)}table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}\n"] }]
|
|
1408
1433
|
}], ctorParameters: function () { return [{ type: DOMService }, { type: i1$2.TranslateService }]; }, propDecorators: { config: [{
|
|
1409
1434
|
type: Input
|
|
1410
1435
|
}], filterBarChange: [{
|
|
1411
1436
|
type: Output
|
|
1412
1437
|
}], exported: [{
|
|
1413
1438
|
type: Output
|
|
1439
|
+
}], selectionChange: [{
|
|
1440
|
+
type: Output
|
|
1414
1441
|
}], headerRowDefs: [{
|
|
1415
1442
|
type: ContentChildren,
|
|
1416
1443
|
args: [MatHeaderRowDef]
|
|
1417
1444
|
}], rowDefs: [{
|
|
1418
1445
|
type: ContentChildren,
|
|
1419
|
-
args: [MatRowDef]
|
|
1446
|
+
args: [MatRowDef, { descendants: true }]
|
|
1420
1447
|
}], columnDefs: [{
|
|
1421
1448
|
type: ContentChildren,
|
|
1422
1449
|
args: [MatColumnDef]
|
|
@@ -1498,10 +1525,10 @@ class ConfirmationModalComponent {
|
|
|
1498
1525
|
}
|
|
1499
1526
|
}
|
|
1500
1527
|
ConfirmationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfirmationModalComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
1501
|
-
ConfirmationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ConfirmationModalComponent, selector: "lib-confirmation-modal", ngImport: i0, template: "<
|
|
1528
|
+
ConfirmationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ConfirmationModalComponent, selector: "lib-confirmation-modal", ngImport: i0, template: "<h1 class=\"text-2-xl\">{{ data.title | translate }}</h1>\r\n<div mat-dialog-content>\r\n <p>{{ data.descriptioon | translate }}</p>\r\n</div>\r\n<div class=\"d-flex justify-content-center\" mat-dialog-actions>\r\n <button mat-flat-button color=\"accent\" [mat-dialog-close]=\"confirmation.PRIMARY\">\r\n {{ data.confirmationText | translate }}\r\n </button>\r\n <button mat-stroked-button class=\"ml-3\" [mat-dialog-close]=\"confirmation.SECONDARY\">\r\n {{ data.rejectionText | translate }}\r\n </button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
1502
1529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
|
|
1503
1530
|
type: Component,
|
|
1504
|
-
args: [{ selector: 'lib-confirmation-modal', template: "<
|
|
1531
|
+
args: [{ selector: 'lib-confirmation-modal', template: "<h1 class=\"text-2-xl\">{{ data.title | translate }}</h1>\r\n<div mat-dialog-content>\r\n <p>{{ data.descriptioon | translate }}</p>\r\n</div>\r\n<div class=\"d-flex justify-content-center\" mat-dialog-actions>\r\n <button mat-flat-button color=\"accent\" [mat-dialog-close]=\"confirmation.PRIMARY\">\r\n {{ data.confirmationText | translate }}\r\n </button>\r\n <button mat-stroked-button class=\"ml-3\" [mat-dialog-close]=\"confirmation.SECONDARY\">\r\n {{ data.rejectionText | translate }}\r\n </button>\r\n</div>\r\n" }]
|
|
1505
1532
|
}], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
|
|
1506
1533
|
type: Inject,
|
|
1507
1534
|
args: [MAT_DIALOG_DATA]
|