@tilde-nlp/ngx-common 2.0.9 → 2.0.11
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/filter-bar/filter-bar.component.mjs +58 -8
- package/esm2020/lib/filter-bar/filter-bar.module.mjs +16 -5
- package/esm2020/lib/helpers/html-element-parse.helper.mjs +2 -2
- package/esm2020/lib/multi-functional-table/models/batch-config.model.mjs +2 -0
- package/esm2020/lib/multi-functional-table/models/column-select-config.model.mjs +1 -1
- package/esm2020/lib/multi-functional-table/models/export-config.model.mjs +1 -1
- package/esm2020/lib/multi-functional-table/models/index.mjs +2 -1
- package/esm2020/lib/multi-functional-table/models/multi-functional-table-config.model.mjs +1 -1
- package/esm2020/lib/multi-functional-table/multi-functional-table.component.mjs +7 -5
- package/fesm2015/tilde-nlp-ngx-common.mjs +78 -17
- package/fesm2015/tilde-nlp-ngx-common.mjs.map +1 -1
- package/fesm2020/tilde-nlp-ngx-common.mjs +76 -16
- package/fesm2020/tilde-nlp-ngx-common.mjs.map +1 -1
- package/lib/filter-bar/filter-bar.component.d.ts +23 -7
- package/lib/filter-bar/filter-bar.module.d.ts +3 -1
- package/lib/multi-functional-table/models/batch-config.model.d.ts +4 -0
- package/lib/multi-functional-table/models/column-select-config.model.d.ts +0 -4
- package/lib/multi-functional-table/models/export-config.model.d.ts +0 -4
- package/lib/multi-functional-table/models/index.d.ts +1 -0
- package/lib/multi-functional-table/models/multi-functional-table-config.model.d.ts +2 -0
- package/lib/multi-functional-table/multi-functional-table.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -21,6 +21,8 @@ import * as i2$2 from '@angular/flex-layout/flex';
|
|
|
21
21
|
import * as i3 from '@angular/flex-layout/extended';
|
|
22
22
|
import * as i2$3 from '@angular/material/progress-bar';
|
|
23
23
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
24
|
+
import * as i7 from '@angular/forms';
|
|
25
|
+
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
24
26
|
import * as i2$4 from '@angular/material/form-field';
|
|
25
27
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
26
28
|
import * as i3$1 from '@angular/material/input';
|
|
@@ -28,8 +30,8 @@ import { MatInputModule } from '@angular/material/input';
|
|
|
28
30
|
import * as i5 from '@angular/material/select';
|
|
29
31
|
import { MatSelectModule } from '@angular/material/select';
|
|
30
32
|
import * as i6$1 from '@angular/material/core';
|
|
31
|
-
import * as
|
|
32
|
-
import {
|
|
33
|
+
import * as i10 from '@angular/material/chips';
|
|
34
|
+
import { MatChipsModule } from '@angular/material/chips';
|
|
33
35
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
34
36
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
35
37
|
import * as i4 from '@angular/material/table';
|
|
@@ -901,7 +903,7 @@ class HtmlElementParseHelper {
|
|
|
901
903
|
for (let i = 0; i < rows.length; i++) {
|
|
902
904
|
const cols = rows[i].querySelectorAll(columnSelector);
|
|
903
905
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
904
|
-
const csvrow = Array.from(cols).map((element) => element.innerText);
|
|
906
|
+
const csvrow = Array.from(cols).map((element) => `"${element.innerText}"`);
|
|
905
907
|
csv_data.push(csvrow.join(","));
|
|
906
908
|
}
|
|
907
909
|
return csv_data.join('\n');
|
|
@@ -1150,6 +1152,12 @@ class FilterBarComponent {
|
|
|
1150
1152
|
};
|
|
1151
1153
|
this.filterOverflow = false;
|
|
1152
1154
|
this.filterBarChange = new EventEmitter();
|
|
1155
|
+
this.inputFormControlName = "input";
|
|
1156
|
+
this.filterFormGroup = new FormGroup({});
|
|
1157
|
+
this.form = new FormGroup({
|
|
1158
|
+
[this.inputFormControlName]: new FormControl(""),
|
|
1159
|
+
filters: this.filterFormGroup
|
|
1160
|
+
});
|
|
1153
1161
|
this.defaultScrollWidth = 180;
|
|
1154
1162
|
}
|
|
1155
1163
|
get inputText() {
|
|
@@ -1166,10 +1174,24 @@ class FilterBarComponent {
|
|
|
1166
1174
|
get fields() {
|
|
1167
1175
|
return this.settings?.filters ?? [];
|
|
1168
1176
|
}
|
|
1177
|
+
set filterRowVisible(value) {
|
|
1178
|
+
this._filterRowVisible = value;
|
|
1179
|
+
this.cdref.detectChanges();
|
|
1180
|
+
this.checkOverflow();
|
|
1181
|
+
}
|
|
1182
|
+
get filterRowVisible() { return this._filterRowVisible; }
|
|
1169
1183
|
onResize() {
|
|
1170
1184
|
this.checkOverflow();
|
|
1171
1185
|
}
|
|
1186
|
+
// getter for cleaner template html
|
|
1187
|
+
get filterFormGroupValue() {
|
|
1188
|
+
return this.filterFormGroup.value;
|
|
1189
|
+
}
|
|
1172
1190
|
ngOnInit() {
|
|
1191
|
+
this.fields.forEach((field) => {
|
|
1192
|
+
this.filterFormGroup.addControl(field.fieldName, new FormControl([]));
|
|
1193
|
+
});
|
|
1194
|
+
this.subscribeToFormValueChanges();
|
|
1173
1195
|
this.searchTooltip = this.settings?.searchTooltip ?? 'FILTER_BAR.SEARCH_TOOLTIP';
|
|
1174
1196
|
this.searchTitle = this.settings?.searchTitle ?? 'FILTER_BAR.SEARCH';
|
|
1175
1197
|
this.prefixIcon = this.settings?.prefixIcon ?? "filter_alt";
|
|
@@ -1180,9 +1202,8 @@ class FilterBarComponent {
|
|
|
1180
1202
|
this.checkOverflow();
|
|
1181
1203
|
this.cdref.detectChanges();
|
|
1182
1204
|
}
|
|
1183
|
-
|
|
1184
|
-
this.
|
|
1185
|
-
this.emitFilters();
|
|
1205
|
+
ngOnDestroy() {
|
|
1206
|
+
this.formChangesSubscription.unsubscribe();
|
|
1186
1207
|
}
|
|
1187
1208
|
emitFilters() {
|
|
1188
1209
|
this.filterBarChange.next(this.filters);
|
|
@@ -1193,19 +1214,47 @@ class FilterBarComponent {
|
|
|
1193
1214
|
scrollLeft() {
|
|
1194
1215
|
this.filterWrapper.nativeElement.scrollTo({ left: (this.filterWrapper.nativeElement.scrollLeft - this.defaultScrollWidth), behavior: 'smooth' });
|
|
1195
1216
|
}
|
|
1217
|
+
removeFilter(key, ix) {
|
|
1218
|
+
const control = this.filterFormGroup.get(key);
|
|
1219
|
+
if (!control) {
|
|
1220
|
+
return;
|
|
1221
|
+
}
|
|
1222
|
+
const newArray = control.value;
|
|
1223
|
+
newArray.splice(ix, 1);
|
|
1224
|
+
control.setValue(newArray);
|
|
1225
|
+
// this.form.setValue(this.filters.filters);
|
|
1226
|
+
}
|
|
1196
1227
|
checkOverflow() {
|
|
1197
|
-
|
|
1228
|
+
if (this.filterWrapper) {
|
|
1229
|
+
this.filterOverflow = this.filterWrapper.nativeElement.clientWidth < this.filterWrapper.nativeElement.scrollWidth;
|
|
1230
|
+
}
|
|
1231
|
+
}
|
|
1232
|
+
subscribeToFormValueChanges() {
|
|
1233
|
+
this.formChangesSubscription = this.form.valueChanges.subscribe(() => {
|
|
1234
|
+
this.filters = {
|
|
1235
|
+
input: this.form.value.input ?? "",
|
|
1236
|
+
filters: {}
|
|
1237
|
+
};
|
|
1238
|
+
for (const filterKey in this.form.value.filters) {
|
|
1239
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1240
|
+
const filter = this.form.value.filters[filterKey];
|
|
1241
|
+
this.filters.filters[filterKey] = filter.map((item) => item.value);
|
|
1242
|
+
}
|
|
1243
|
+
this.emitFilters();
|
|
1244
|
+
});
|
|
1198
1245
|
}
|
|
1199
1246
|
}
|
|
1200
1247
|
FilterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1201
|
-
FilterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterBarComponent, selector: "tld-filter-bar", inputs: { settings: "settings" }, outputs: { filterBarChange: "filterBarChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterWrapper", first: true, predicate: ["filterWrapper"], descendants: true }], ngImport: i0, template: "<button mat-icon-button (click)=\"scrollLeft()\" *ngIf=\"filterOverflow\">\r\n
|
|
1248
|
+
FilterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterBarComponent, selector: "tld-filter-bar", inputs: { settings: "settings", filterRowVisible: "filterRowVisible" }, outputs: { filterBarChange: "filterBarChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterWrapper", first: true, predicate: ["filterWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <button mat-icon-button (click)=\"scrollLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch\" class=\"filter-bar-search-input\">\r\n <span matPrefix class=\"material-icons-outlined\">\r\n {{prefixIcon}}\r\n </span>\r\n <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n {{suffixIcon}}\r\n </span>\r\n <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n [formControlName]=\"inputFormControlName\">\r\n </mat-form-field>\r\n <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n <mat-form-field *ngFor=\"let filter of fields\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n <mat-option *ngFor=\"let value of filter.values\" [value]=\"value\">\r\n {{value.key | translate : {default: value.value | titlecase } }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"scrollRight()\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_forward_ios\r\n </span>\r\n </button>\r\n</div>\r\n<mat-chip-list>\r\n <div *ngFor=\"let filter of fields\">\r\n <mat-chip *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n <button matChipRemove>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n <span class=\"chip-value semi-bold\"> {{filterValue.key | translate : {default: filterValue.value | titlecase }\r\n }}</span>\r\n </mat-chip>\r\n </div>\r\n</mat-chip-list>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:.5rem 1.25rem 1rem;max-width:100%;align-items:baseline;margin-bottom:.5rem}.filter-row ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.filter-row ::ng-deep .mat-form-field-underline{bottom:0!important}.search-input{background-color:unset;border:none}mat-form-field+mat-form-field{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-chip.mat-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-chip.mat-standard-chip span{display:inline-block}.mat-chip.mat-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.mat-chip .mat-chip-remove{margin-left:0;margin-right:.5em;color:var(--base-40);opacity:1}\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: i2$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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.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: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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: i10.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i10.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
1202
1249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarComponent, decorators: [{
|
|
1203
1250
|
type: Component,
|
|
1204
|
-
args: [{ selector: 'tld-filter-bar', template: "<button mat-icon-button (click)=\"scrollLeft()\" *ngIf=\"filterOverflow\">\r\n
|
|
1251
|
+
args: [{ selector: 'tld-filter-bar', template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <button mat-icon-button (click)=\"scrollLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch\" class=\"filter-bar-search-input\">\r\n <span matPrefix class=\"material-icons-outlined\">\r\n {{prefixIcon}}\r\n </span>\r\n <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n {{suffixIcon}}\r\n </span>\r\n <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n [formControlName]=\"inputFormControlName\">\r\n </mat-form-field>\r\n <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n <mat-form-field *ngFor=\"let filter of fields\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n <mat-option *ngFor=\"let value of filter.values\" [value]=\"value\">\r\n {{value.key | translate : {default: value.value | titlecase } }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"scrollRight()\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_forward_ios\r\n </span>\r\n </button>\r\n</div>\r\n<mat-chip-list>\r\n <div *ngFor=\"let filter of fields\">\r\n <mat-chip *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n <button matChipRemove>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n <span class=\"chip-value semi-bold\"> {{filterValue.key | translate : {default: filterValue.value | titlecase }\r\n }}</span>\r\n </mat-chip>\r\n </div>\r\n</mat-chip-list>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:.5rem 1.25rem 1rem;max-width:100%;align-items:baseline;margin-bottom:.5rem}.filter-row ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.filter-row ::ng-deep .mat-form-field-underline{bottom:0!important}.search-input{background-color:unset;border:none}mat-form-field+mat-form-field{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-chip.mat-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-chip.mat-standard-chip span{display:inline-block}.mat-chip.mat-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.mat-chip .mat-chip-remove{margin-left:0;margin-right:.5em;color:var(--base-40);opacity:1}\n"] }]
|
|
1205
1252
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { filterBarChange: [{
|
|
1206
1253
|
type: Output
|
|
1207
1254
|
}], settings: [{
|
|
1208
1255
|
type: Input
|
|
1256
|
+
}], filterRowVisible: [{
|
|
1257
|
+
type: Input
|
|
1209
1258
|
}], filterWrapper: [{
|
|
1210
1259
|
type: ViewChild,
|
|
1211
1260
|
args: ["filterWrapper"]
|
|
@@ -1225,7 +1274,10 @@ FilterBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
1225
1274
|
MatSelectModule,
|
|
1226
1275
|
FormsModule,
|
|
1227
1276
|
MatTooltipModule,
|
|
1228
|
-
MatButtonModule
|
|
1277
|
+
MatButtonModule,
|
|
1278
|
+
MatChipsModule,
|
|
1279
|
+
MatIconModule,
|
|
1280
|
+
ReactiveFormsModule], exports: [FilterBarComponent] });
|
|
1229
1281
|
FilterBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarModule, imports: [CommonModule,
|
|
1230
1282
|
TranslateModule,
|
|
1231
1283
|
MatInputModule,
|
|
@@ -1234,7 +1286,10 @@ FilterBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
1234
1286
|
MatSelectModule,
|
|
1235
1287
|
FormsModule,
|
|
1236
1288
|
MatTooltipModule,
|
|
1237
|
-
MatButtonModule
|
|
1289
|
+
MatButtonModule,
|
|
1290
|
+
MatChipsModule,
|
|
1291
|
+
MatIconModule,
|
|
1292
|
+
ReactiveFormsModule] });
|
|
1238
1293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarModule, decorators: [{
|
|
1239
1294
|
type: NgModule,
|
|
1240
1295
|
args: [{
|
|
@@ -1250,7 +1305,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1250
1305
|
MatSelectModule,
|
|
1251
1306
|
FormsModule,
|
|
1252
1307
|
MatTooltipModule,
|
|
1253
|
-
MatButtonModule
|
|
1308
|
+
MatButtonModule,
|
|
1309
|
+
MatChipsModule,
|
|
1310
|
+
MatIconModule,
|
|
1311
|
+
ReactiveFormsModule
|
|
1254
1312
|
],
|
|
1255
1313
|
exports: [
|
|
1256
1314
|
FilterBarComponent
|
|
@@ -1280,6 +1338,7 @@ class MultiFunctionalTableComponent {
|
|
|
1280
1338
|
set selection(value) {
|
|
1281
1339
|
this.matSelection.setSelection(...(value ?? []));
|
|
1282
1340
|
}
|
|
1341
|
+
get ignoreAttributeName() { return DISABLE_EXPORT_ATTRIBUTE_NAME; }
|
|
1283
1342
|
get filterActive() { return this.config.filter?.enabled; }
|
|
1284
1343
|
//#region Angular lifecycle hooks
|
|
1285
1344
|
ngOnInit() {
|
|
@@ -1301,7 +1360,7 @@ class MultiFunctionalTableComponent {
|
|
|
1301
1360
|
}
|
|
1302
1361
|
//#endregion
|
|
1303
1362
|
updateDisplayColumns(initial = false) {
|
|
1304
|
-
this.batchSelectedEnabled = this.config.
|
|
1363
|
+
this.batchSelectedEnabled = this.config.batchConfig?.enabled ? true : false;
|
|
1305
1364
|
const allColumns = this.config.columnSelect?.columns ?? [];
|
|
1306
1365
|
this.displayColumns = [];
|
|
1307
1366
|
this.configurableColumns = allColumns.filter(column => !column.notConfigurable);
|
|
@@ -1381,7 +1440,7 @@ class MultiFunctionalTableComponent {
|
|
|
1381
1440
|
case ExportFormat.CSV:
|
|
1382
1441
|
default:
|
|
1383
1442
|
extension = ExportFormat.CSV;
|
|
1384
|
-
fileString = HtmlElementParseHelper.tableAsCsv(this.tableElementRef.nativeElement, this.
|
|
1443
|
+
fileString = HtmlElementParseHelper.tableAsCsv(this.tableElementRef.nativeElement, this.ignoreAttributeName);
|
|
1385
1444
|
break;
|
|
1386
1445
|
}
|
|
1387
1446
|
const translatedFileName = this.translateService.instant(this.config.export.fileOptions.fileName);
|
|
@@ -1412,6 +1471,7 @@ class MultiFunctionalTableComponent {
|
|
|
1412
1471
|
}
|
|
1413
1472
|
setFilterProperties() {
|
|
1414
1473
|
if (this.config.filter?.enabled) {
|
|
1474
|
+
this.filterEnabled = true;
|
|
1415
1475
|
this.filterBarVisible = this.localStorageValue?.filter?.visible ?? this.config.filter.visible ?? false;
|
|
1416
1476
|
this.filterSettings = this.config.filter.settings;
|
|
1417
1477
|
}
|
|
@@ -1432,10 +1492,10 @@ class MultiFunctionalTableComponent {
|
|
|
1432
1492
|
}
|
|
1433
1493
|
}
|
|
1434
1494
|
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 });
|
|
1435
|
-
MultiFunctionalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config", highlightedElements: "highlightedElements", selection: "selection" }, 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
|
|
1495
|
+
MultiFunctionalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config", highlightedElements: "highlightedElements", selection: "selection" }, 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 [filterRowVisible]=\"!filterBarVisible\" [settings]=\"filterSettings\" *ngIf=\"filterEnabled\"\r\n (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 disable-export>\r\n <mat-checkbox [disabled]=\"config.batchConfig!.checkBoxesDisabled\" (change)=\"toggleAllRowSelection()\"\r\n [checked]=\"matSelection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"matSelection.hasValue() && !isAllSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\" disable-export>\r\n <mat-checkbox [disabled]=\"config.batchConfig!.checkBoxesDisabled\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"toggleElementSelection(element)\" [checked]=\"matSelection.isSelected(element)\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"displayColumns\" sticky></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayColumns\" [class.highlight]=\"highlightElement(row)\"></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,:host ::ng-deep tr.mat-row.highlight{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", "filterRowVisible"], 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" }] });
|
|
1436
1496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableComponent, decorators: [{
|
|
1437
1497
|
type: Component,
|
|
1438
|
-
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
|
|
1498
|
+
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 [filterRowVisible]=\"!filterBarVisible\" [settings]=\"filterSettings\" *ngIf=\"filterEnabled\"\r\n (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 disable-export>\r\n <mat-checkbox [disabled]=\"config.batchConfig!.checkBoxesDisabled\" (change)=\"toggleAllRowSelection()\"\r\n [checked]=\"matSelection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"matSelection.hasValue() && !isAllSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\" disable-export>\r\n <mat-checkbox [disabled]=\"config.batchConfig!.checkBoxesDisabled\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"toggleElementSelection(element)\" [checked]=\"matSelection.isSelected(element)\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"displayColumns\" sticky></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayColumns\" [class.highlight]=\"highlightElement(row)\"></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,:host ::ng-deep tr.mat-row.highlight{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"] }]
|
|
1439
1499
|
}], ctorParameters: function () { return [{ type: DOMService }, { type: i1$2.TranslateService }]; }, propDecorators: { config: [{
|
|
1440
1500
|
type: Input
|
|
1441
1501
|
}], highlightedElements: [{
|