@tilde-nlp/ngx-common 2.0.19 → 2.0.21
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 +7 -22
- package/esm2020/lib/filter-bar/filter-bar.module.mjs +8 -4
- package/esm2020/lib/multi-functional-table/multi-functional-table.component.mjs +8 -10
- package/esm2020/lib/pipes/index.mjs +2 -1
- package/esm2020/lib/pipes/sort-translations-by-property/index.mjs +3 -0
- package/esm2020/lib/pipes/sort-translations-by-property/sort-translations-by-property.module.mjs +18 -0
- package/esm2020/lib/pipes/sort-translations-by-property/sort-translations-by-property.pipe.mjs +40 -0
- package/fesm2015/tilde-nlp-ngx-common.mjs +77 -42
- package/fesm2015/tilde-nlp-ngx-common.mjs.map +1 -1
- package/fesm2020/tilde-nlp-ngx-common.mjs +70 -34
- package/fesm2020/tilde-nlp-ngx-common.mjs.map +1 -1
- package/lib/filter-bar/filter-bar.component.d.ts +0 -1
- package/lib/filter-bar/filter-bar.module.d.ts +2 -1
- package/lib/multi-functional-table/multi-functional-table.component.d.ts +3 -5
- package/lib/pipes/index.d.ts +1 -0
- package/lib/pipes/sort-translations-by-property/index.d.ts +2 -0
- package/lib/pipes/sort-translations-by-property/sort-translations-by-property.module.d.ts +8 -0
- package/lib/pipes/sort-translations-by-property/sort-translations-by-property.pipe.d.ts +15 -0
- package/package.json +1 -1
package/esm2020/lib/pipes/sort-translations-by-property/sort-translations-by-property.pipe.mjs
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Pipe } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "@ngx-translate/core";
|
|
4
|
+
/**
|
|
5
|
+
* Pipe transforms an array of objects by sorting them based on a provided localization key in A-Z order.
|
|
6
|
+
* Unlike the "sortTranslations" pipe, it does not require knowledge of the current language, and it does not require the use of the async pipe.
|
|
7
|
+
*/
|
|
8
|
+
export class SortTranslationsByPropertyPipe {
|
|
9
|
+
constructor(translate) {
|
|
10
|
+
this.translate = translate;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Transforms the input array of objects by sorting them based on the specified sortingValueKey.
|
|
14
|
+
* @param values An array of objects to be sorted.
|
|
15
|
+
* @param sortingValueKey The key by which the provided values should be sorted.
|
|
16
|
+
*/
|
|
17
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
18
|
+
transform(values, sortingValueKey) {
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
20
|
+
values.sort((a, b) => {
|
|
21
|
+
const aTranslated = this.translate.instant(a[sortingValueKey]).toLowerCase();
|
|
22
|
+
const bTranslated = this.translate.instant(b[sortingValueKey]).toLowerCase();
|
|
23
|
+
if (aTranslated < bTranslated)
|
|
24
|
+
return -1;
|
|
25
|
+
if (aTranslated > bTranslated)
|
|
26
|
+
return 1;
|
|
27
|
+
return 0;
|
|
28
|
+
});
|
|
29
|
+
return values;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
SortTranslationsByPropertyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SortTranslationsByPropertyPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
33
|
+
SortTranslationsByPropertyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SortTranslationsByPropertyPipe, name: "sortTranslationsByProperty" });
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SortTranslationsByPropertyPipe, decorators: [{
|
|
35
|
+
type: Pipe,
|
|
36
|
+
args: [{
|
|
37
|
+
name: 'sortTranslationsByProperty',
|
|
38
|
+
}]
|
|
39
|
+
}], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
|
|
40
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydC10cmFuc2xhdGlvbnMtYnktcHJvcGVydHkucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1jb21tb24vc3JjL2xpYi9waXBlcy9zb3J0LXRyYW5zbGF0aW9ucy1ieS1wcm9wZXJ0eS9zb3J0LXRyYW5zbGF0aW9ucy1ieS1wcm9wZXJ0eS5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDOzs7QUFNcEQ7OztHQUdHO0FBQ0gsTUFBTSxPQUFPLDhCQUE4QjtJQUN6QyxZQUFvQixTQUEyQjtRQUEzQixjQUFTLEdBQVQsU0FBUyxDQUFrQjtJQUFHLENBQUM7SUFFbkQ7Ozs7T0FJRztJQUNILDhEQUE4RDtJQUM5RCxTQUFTLENBQUMsTUFBYSxFQUFFLGVBQXVCO1FBQzlDLDhEQUE4RDtRQUM5RCxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBTSxFQUFFLENBQU0sRUFBRSxFQUFFO1lBQzdCLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQzdFLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQzdFLElBQUksV0FBVyxHQUFHLFdBQVc7Z0JBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQztZQUN6QyxJQUFJLFdBQVcsR0FBRyxXQUFXO2dCQUFFLE9BQU8sQ0FBQyxDQUFDO1lBQ3hDLE9BQU8sQ0FBQyxDQUFDO1FBQ1gsQ0FBQyxDQUFDLENBQUM7UUFFSCxPQUFPLE1BQU0sQ0FBQztJQUNoQixDQUFDOzsySEFwQlUsOEJBQThCO3lIQUE5Qiw4QkFBOEI7MkZBQTlCLDhCQUE4QjtrQkFQMUMsSUFBSTttQkFBQztvQkFDSixJQUFJLEVBQUUsNEJBQTRCO2lCQUNuQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBpcGUsIFBpcGVUcmFuc2Zvcm0gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgVHJhbnNsYXRlU2VydmljZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xyXG5cclxuQFBpcGUoe1xyXG4gIG5hbWU6ICdzb3J0VHJhbnNsYXRpb25zQnlQcm9wZXJ0eScsXHJcbn0pXHJcbi8qKlxyXG4gKiBQaXBlIHRyYW5zZm9ybXMgYW4gYXJyYXkgb2Ygb2JqZWN0cyBieSBzb3J0aW5nIHRoZW0gYmFzZWQgb24gYSBwcm92aWRlZCBsb2NhbGl6YXRpb24ga2V5IGluIEEtWiBvcmRlci5cclxuICogVW5saWtlIHRoZSBcInNvcnRUcmFuc2xhdGlvbnNcIiBwaXBlLCBpdCBkb2VzIG5vdCByZXF1aXJlIGtub3dsZWRnZSBvZiB0aGUgY3VycmVudCBsYW5ndWFnZSwgYW5kIGl0IGRvZXMgbm90IHJlcXVpcmUgdGhlIHVzZSBvZiB0aGUgYXN5bmMgcGlwZS5cclxuICovXHJcbmV4cG9ydCBjbGFzcyBTb3J0VHJhbnNsYXRpb25zQnlQcm9wZXJ0eVBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHRyYW5zbGF0ZTogVHJhbnNsYXRlU2VydmljZSkge31cclxuXHJcbiAgLyoqXHJcbiAgICogVHJhbnNmb3JtcyB0aGUgaW5wdXQgYXJyYXkgb2Ygb2JqZWN0cyBieSBzb3J0aW5nIHRoZW0gYmFzZWQgb24gdGhlIHNwZWNpZmllZCBzb3J0aW5nVmFsdWVLZXkuXHJcbiAgICogQHBhcmFtIHZhbHVlcyBBbiBhcnJheSBvZiBvYmplY3RzIHRvIGJlIHNvcnRlZC5cclxuICAgKiBAcGFyYW0gc29ydGluZ1ZhbHVlS2V5IFRoZSBrZXkgYnkgd2hpY2ggdGhlIHByb3ZpZGVkIHZhbHVlcyBzaG91bGQgYmUgc29ydGVkLlxyXG4gICAqL1xyXG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55XHJcbiAgdHJhbnNmb3JtKHZhbHVlczogYW55W10sIHNvcnRpbmdWYWx1ZUtleTogc3RyaW5nKTogYW55IHtcclxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55XHJcbiAgICB2YWx1ZXMuc29ydCgoYTogYW55LCBiOiBhbnkpID0+IHtcclxuICAgICAgY29uc3QgYVRyYW5zbGF0ZWQgPSB0aGlzLnRyYW5zbGF0ZS5pbnN0YW50KGFbc29ydGluZ1ZhbHVlS2V5XSkudG9Mb3dlckNhc2UoKTtcclxuICAgICAgY29uc3QgYlRyYW5zbGF0ZWQgPSB0aGlzLnRyYW5zbGF0ZS5pbnN0YW50KGJbc29ydGluZ1ZhbHVlS2V5XSkudG9Mb3dlckNhc2UoKTtcclxuICAgICAgaWYgKGFUcmFuc2xhdGVkIDwgYlRyYW5zbGF0ZWQpIHJldHVybiAtMTtcclxuICAgICAgaWYgKGFUcmFuc2xhdGVkID4gYlRyYW5zbGF0ZWQpIHJldHVybiAxO1xyXG4gICAgICByZXR1cm4gMDtcclxuICAgIH0pO1xyXG5cclxuICAgIHJldHVybiB2YWx1ZXM7XHJcbiAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -373,6 +373,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
373
373
|
}]
|
|
374
374
|
}] });
|
|
375
375
|
|
|
376
|
+
/**
|
|
377
|
+
* Pipe transforms an array of objects by sorting them based on a provided localization key in A-Z order.
|
|
378
|
+
* Unlike the "sortTranslations" pipe, it does not require knowledge of the current language, and it does not require the use of the async pipe.
|
|
379
|
+
*/
|
|
380
|
+
class SortTranslationsByPropertyPipe {
|
|
381
|
+
constructor(translate) {
|
|
382
|
+
this.translate = translate;
|
|
383
|
+
}
|
|
384
|
+
/**
|
|
385
|
+
* Transforms the input array of objects by sorting them based on the specified sortingValueKey.
|
|
386
|
+
* @param values An array of objects to be sorted.
|
|
387
|
+
* @param sortingValueKey The key by which the provided values should be sorted.
|
|
388
|
+
*/
|
|
389
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
390
|
+
transform(values, sortingValueKey) {
|
|
391
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
392
|
+
values.sort((a, b) => {
|
|
393
|
+
const aTranslated = this.translate.instant(a[sortingValueKey]).toLowerCase();
|
|
394
|
+
const bTranslated = this.translate.instant(b[sortingValueKey]).toLowerCase();
|
|
395
|
+
if (aTranslated < bTranslated)
|
|
396
|
+
return -1;
|
|
397
|
+
if (aTranslated > bTranslated)
|
|
398
|
+
return 1;
|
|
399
|
+
return 0;
|
|
400
|
+
});
|
|
401
|
+
return values;
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
SortTranslationsByPropertyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SortTranslationsByPropertyPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
405
|
+
SortTranslationsByPropertyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SortTranslationsByPropertyPipe, name: "sortTranslationsByProperty" });
|
|
406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SortTranslationsByPropertyPipe, decorators: [{
|
|
407
|
+
type: Pipe,
|
|
408
|
+
args: [{
|
|
409
|
+
name: 'sortTranslationsByProperty',
|
|
410
|
+
}]
|
|
411
|
+
}], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
|
|
412
|
+
|
|
413
|
+
class SortTranslationsByPropertyModule {
|
|
414
|
+
}
|
|
415
|
+
SortTranslationsByPropertyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SortTranslationsByPropertyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
416
|
+
SortTranslationsByPropertyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SortTranslationsByPropertyModule, declarations: [SortTranslationsByPropertyPipe], imports: [CommonModule], exports: [SortTranslationsByPropertyPipe] });
|
|
417
|
+
SortTranslationsByPropertyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SortTranslationsByPropertyModule, imports: [CommonModule] });
|
|
418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SortTranslationsByPropertyModule, decorators: [{
|
|
419
|
+
type: NgModule,
|
|
420
|
+
args: [{
|
|
421
|
+
declarations: [SortTranslationsByPropertyPipe],
|
|
422
|
+
imports: [CommonModule],
|
|
423
|
+
exports: [SortTranslationsByPropertyPipe],
|
|
424
|
+
}]
|
|
425
|
+
}] });
|
|
426
|
+
|
|
376
427
|
const DateAgoSettingsToken = "DATE_AGO_SETTINGS";
|
|
377
428
|
|
|
378
429
|
/**
|
|
@@ -1183,6 +1234,7 @@ class FilterBarComponent {
|
|
|
1183
1234
|
get filterFormGroupValue() {
|
|
1184
1235
|
return this.filterFormGroup.value;
|
|
1185
1236
|
}
|
|
1237
|
+
// eslint-disable-next-line @typescript-eslint/adjacent-overload-signatures
|
|
1186
1238
|
get filterRowVisible() { return this._filterRowVisible; }
|
|
1187
1239
|
get inputText() {
|
|
1188
1240
|
return this._inputText;
|
|
@@ -1191,22 +1243,23 @@ class FilterBarComponent {
|
|
|
1191
1243
|
var _a;
|
|
1192
1244
|
return !((_a = this.settings) === null || _a === void 0 ? void 0 : _a.hideSearch);
|
|
1193
1245
|
}
|
|
1246
|
+
// eslint-disable-next-line @typescript-eslint/adjacent-overload-signatures
|
|
1194
1247
|
set inputText(value) {
|
|
1195
1248
|
this._inputText = value;
|
|
1196
1249
|
this.filters.input = this._inputText;
|
|
1197
1250
|
this.emitFilters();
|
|
1198
1251
|
}
|
|
1199
1252
|
ngOnInit() {
|
|
1200
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
1201
|
-
this.
|
|
1253
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
1254
|
+
(_a = this.settings.filters) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
|
|
1202
1255
|
this.filterFormGroup.addControl(field.fieldName, new FormControl([]));
|
|
1203
1256
|
});
|
|
1204
1257
|
this.subscribeToFormValueChanges();
|
|
1205
|
-
this.searchTooltip = (
|
|
1206
|
-
this.searchTitle = (
|
|
1207
|
-
this.prefixIcon = (
|
|
1208
|
-
this.suffixIcon = (
|
|
1209
|
-
this.showSuffixIcon = (
|
|
1258
|
+
this.searchTooltip = (_c = (_b = this.settings) === null || _b === void 0 ? void 0 : _b.searchTooltip) !== null && _c !== void 0 ? _c : 'FILTER_BAR.SEARCH_TOOLTIP';
|
|
1259
|
+
this.searchTitle = (_e = (_d = this.settings) === null || _d === void 0 ? void 0 : _d.searchTitle) !== null && _e !== void 0 ? _e : 'FILTER_BAR.SEARCH';
|
|
1260
|
+
this.prefixIcon = (_g = (_f = this.settings) === null || _f === void 0 ? void 0 : _f.prefixIcon) !== null && _g !== void 0 ? _g : "filter_alt";
|
|
1261
|
+
this.suffixIcon = (_j = (_h = this.settings) === null || _h === void 0 ? void 0 : _h.suffixIcon) !== null && _j !== void 0 ? _j : "question_mark";
|
|
1262
|
+
this.showSuffixIcon = (_l = (_k = this.settings) === null || _k === void 0 ? void 0 : _k.showSuffixIcon) !== null && _l !== void 0 ? _l : true;
|
|
1210
1263
|
}
|
|
1211
1264
|
ngAfterViewInit() {
|
|
1212
1265
|
this.checkOverflow();
|
|
@@ -1239,25 +1292,6 @@ class FilterBarComponent {
|
|
|
1239
1292
|
const newArray = control.value;
|
|
1240
1293
|
newArray.splice(ix, 1);
|
|
1241
1294
|
control.setValue(newArray);
|
|
1242
|
-
// this.form.setValue(this.filters.filters);
|
|
1243
|
-
}
|
|
1244
|
-
getSortedFilters() {
|
|
1245
|
-
var _a;
|
|
1246
|
-
if ((_a = this.settings) === null || _a === void 0 ? void 0 : _a.filters) {
|
|
1247
|
-
this.settings.filters.forEach((item) => {
|
|
1248
|
-
item.values.sort((a, b) => {
|
|
1249
|
-
const aTranslated = this.translate.instant(a.key).toLowerCase();
|
|
1250
|
-
const bTranslated = this.translate.instant(b.key).toLowerCase();
|
|
1251
|
-
if (aTranslated < bTranslated)
|
|
1252
|
-
return -1;
|
|
1253
|
-
if (aTranslated > bTranslated)
|
|
1254
|
-
return 1;
|
|
1255
|
-
return 0;
|
|
1256
|
-
});
|
|
1257
|
-
});
|
|
1258
|
-
return this.settings.filters;
|
|
1259
|
-
}
|
|
1260
|
-
return [];
|
|
1261
1295
|
}
|
|
1262
1296
|
checkOverflow() {
|
|
1263
1297
|
if (this.filterWrapper) {
|
|
@@ -1281,10 +1315,10 @@ class FilterBarComponent {
|
|
|
1281
1315
|
}
|
|
1282
1316
|
}
|
|
1283
1317
|
FilterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1284
|
-
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 <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" 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 [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\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
|
|
1318
|
+
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 <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" 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 [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n <ng-container *ngIf=\"filter.values.length\">\r\n <mat-option *ngFor=\"let value of filter.values | sortTranslationsByProperty:'key'\" [value]=\"value\">\r\n {{value.key | translate : {default: value.value | titlecase } }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\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 settings?.filters\">\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}.engine-filter{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}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2$3.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$3.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: "directive", type: i3.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$2.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: i12.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: i12.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: i12.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SortTranslationsByPropertyPipe, name: "sortTranslationsByProperty" }] });
|
|
1285
1319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarComponent, decorators: [{
|
|
1286
1320
|
type: Component,
|
|
1287
|
-
args: [{ selector: 'tld-filter-bar', template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" 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 [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\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
|
|
1321
|
+
args: [{ selector: 'tld-filter-bar', template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" 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 [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n <ng-container *ngIf=\"filter.values.length\">\r\n <mat-option *ngFor=\"let value of filter.values | sortTranslationsByProperty:'key'\" [value]=\"value\">\r\n {{value.key | translate : {default: value.value | titlecase } }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\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 settings?.filters\">\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}.engine-filter{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}.hidden{display:none}\n"] }]
|
|
1288
1322
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }]; }, propDecorators: { filterWrapper: [{
|
|
1289
1323
|
type: ViewChild,
|
|
1290
1324
|
args: ["filterWrapper"]
|
|
@@ -1313,7 +1347,8 @@ FilterBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
1313
1347
|
MatButtonModule,
|
|
1314
1348
|
MatChipsModule,
|
|
1315
1349
|
MatIconModule,
|
|
1316
|
-
ReactiveFormsModule
|
|
1350
|
+
ReactiveFormsModule,
|
|
1351
|
+
SortTranslationsByPropertyModule], exports: [FilterBarComponent] });
|
|
1317
1352
|
FilterBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarModule, imports: [CommonModule,
|
|
1318
1353
|
TranslateModule,
|
|
1319
1354
|
MatInputModule,
|
|
@@ -1325,7 +1360,8 @@ FilterBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
1325
1360
|
MatButtonModule,
|
|
1326
1361
|
MatChipsModule,
|
|
1327
1362
|
MatIconModule,
|
|
1328
|
-
ReactiveFormsModule
|
|
1363
|
+
ReactiveFormsModule,
|
|
1364
|
+
SortTranslationsByPropertyModule] });
|
|
1329
1365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarModule, decorators: [{
|
|
1330
1366
|
type: NgModule,
|
|
1331
1367
|
args: [{
|
|
@@ -1344,7 +1380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1344
1380
|
MatButtonModule,
|
|
1345
1381
|
MatChipsModule,
|
|
1346
1382
|
MatIconModule,
|
|
1347
|
-
ReactiveFormsModule
|
|
1383
|
+
ReactiveFormsModule,
|
|
1384
|
+
SortTranslationsByPropertyModule
|
|
1348
1385
|
],
|
|
1349
1386
|
exports: [
|
|
1350
1387
|
FilterBarComponent
|
|
@@ -1379,7 +1416,7 @@ class MultiFunctionalTableComponent {
|
|
|
1379
1416
|
//#region Angular lifecycle hooks
|
|
1380
1417
|
ngOnInit() {
|
|
1381
1418
|
this.readFromLocalStorage();
|
|
1382
|
-
this.
|
|
1419
|
+
this.setFilterVisibility();
|
|
1383
1420
|
this.setColumnSelectProperties();
|
|
1384
1421
|
this.setExportProperties();
|
|
1385
1422
|
this.setNoDataRowProperties();
|
|
@@ -1514,13 +1551,9 @@ class MultiFunctionalTableComponent {
|
|
|
1514
1551
|
this.columnSelectActive = ((_a = this.config.columnSelect) === null || _a === void 0 ? void 0 : _a.enabled) ? true : false;
|
|
1515
1552
|
this.updateDisplayColumns(true);
|
|
1516
1553
|
}
|
|
1517
|
-
|
|
1518
|
-
var _a, _b, _c, _d, _e;
|
|
1519
|
-
|
|
1520
|
-
this.filterEnabled = true;
|
|
1521
|
-
this.filterBarVisible = (_e = (_d = (_c = (_b = this.localStorageValue) === null || _b === void 0 ? void 0 : _b.filter) === null || _c === void 0 ? void 0 : _c.visible) !== null && _d !== void 0 ? _d : this.config.filter.visible) !== null && _e !== void 0 ? _e : false;
|
|
1522
|
-
this.filterSettings = this.config.filter.settings;
|
|
1523
|
-
}
|
|
1554
|
+
setFilterVisibility() {
|
|
1555
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1556
|
+
this.filterBarVisible = (_f = (_c = (_b = (_a = this.localStorageValue) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : (_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.filter) === null || _e === void 0 ? void 0 : _e.visible) !== null && _f !== void 0 ? _f : false;
|
|
1524
1557
|
}
|
|
1525
1558
|
setNoDataRowProperties() {
|
|
1526
1559
|
if (this.config.noDataRow) {
|
|
@@ -1539,12 +1572,14 @@ class MultiFunctionalTableComponent {
|
|
|
1539
1572
|
}
|
|
1540
1573
|
}
|
|
1541
1574
|
MultiFunctionalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableComponent, deps: [{ token: DOMService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1542
|
-
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\r\n <div class=\"table-overflow\">\r\n <table #table mat-table [dataSource]=\"config.dataSource\">\r\n <ng-content></ng-content>\r\n <ng-container [matColumnDef]=\"batchColumnName\">\r\n <th class=\"row-select\" 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 class=\"row-select\" mat-cell *matCellDef=\"let element\" disable-export>\r\n <mat-checkbox *ngIf=\"hoveredRow === element || matSelection.isSelected(element)\" [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\" (mouseover)=\"hoveredRow = row\" (mouseleave)=\"hoveredRow = null\" [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 </table>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep th,:host ::ng-deep tr{white-space:nowrap}:host ::ng-deep td{padding-right:10px!important}: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}th.mat-header-cell:first-of-type,td.mat-cell:first-of-type,td.mat-footer-cell:first-of-type{padding:0 22px}.row-select{width:0}.mat-checkbox{padding-top:8px}.table-overflow{overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i1$2.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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$1.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.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$3.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$3.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$3.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$1.TranslatePipe, name: "translate" }] });
|
|
1575
|
+
MultiFunctionalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config", filterEnabled: "filterEnabled", 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 *ngIf=\"filterEnabled && config.filter\" [filterRowVisible]=\"!filterBarVisible\" [settings]=\"config.filter.settings\" \r\n (filterBarChange)=\"filtersChanged($event)\">\r\n </tld-filter-bar>\r\n\r\n <div class=\"table-overflow\">\r\n <table #table mat-table [dataSource]=\"config.dataSource\">\r\n <ng-content></ng-content>\r\n <ng-container [matColumnDef]=\"batchColumnName\">\r\n <th class=\"row-select\" 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 class=\"row-select\" mat-cell *matCellDef=\"let element\" disable-export>\r\n <mat-checkbox *ngIf=\"hoveredRow === element || matSelection.isSelected(element)\" [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\" (mouseover)=\"hoveredRow = row\" (mouseleave)=\"hoveredRow = null\" [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 </table>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep th,:host ::ng-deep tr{white-space:nowrap}:host ::ng-deep td{padding-right:10px!important}: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}th.mat-header-cell:first-of-type,td.mat-cell:first-of-type,td.mat-footer-cell:first-of-type{padding:0 22px}.row-select{width:0}.mat-checkbox{padding-top:8px}.table-overflow{overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i1$2.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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$1.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.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$3.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$3.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$3.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$1.TranslatePipe, name: "translate" }] });
|
|
1543
1576
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableComponent, decorators: [{
|
|
1544
1577
|
type: Component,
|
|
1545
|
-
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]=\"
|
|
1578
|
+
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=\"filterEnabled && config.filter\" [filterRowVisible]=\"!filterBarVisible\" [settings]=\"config.filter.settings\" \r\n (filterBarChange)=\"filtersChanged($event)\">\r\n </tld-filter-bar>\r\n\r\n <div class=\"table-overflow\">\r\n <table #table mat-table [dataSource]=\"config.dataSource\">\r\n <ng-content></ng-content>\r\n <ng-container [matColumnDef]=\"batchColumnName\">\r\n <th class=\"row-select\" 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 class=\"row-select\" mat-cell *matCellDef=\"let element\" disable-export>\r\n <mat-checkbox *ngIf=\"hoveredRow === element || matSelection.isSelected(element)\" [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\" (mouseover)=\"hoveredRow = row\" (mouseleave)=\"hoveredRow = null\" [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 </table>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep th,:host ::ng-deep tr{white-space:nowrap}:host ::ng-deep td{padding-right:10px!important}: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}th.mat-header-cell:first-of-type,td.mat-cell:first-of-type,td.mat-footer-cell:first-of-type{padding:0 22px}.row-select{width:0}.mat-checkbox{padding-top:8px}.table-overflow{overflow-x:auto}\n"] }]
|
|
1546
1579
|
}], ctorParameters: function () { return [{ type: DOMService }, { type: i1$1.TranslateService }]; }, propDecorators: { config: [{
|
|
1547
1580
|
type: Input
|
|
1581
|
+
}], filterEnabled: [{
|
|
1582
|
+
type: Input
|
|
1548
1583
|
}], highlightedElements: [{
|
|
1549
1584
|
type: Input
|
|
1550
1585
|
}], selection: [{
|
|
@@ -1696,5 +1731,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1696
1731
|
* Generated bundle index. Do not edit.
|
|
1697
1732
|
*/
|
|
1698
1733
|
|
|
1699
|
-
export { ClickOutsideDirective, ClickOutsideModule, CloseButtonComponent, CloseButtonModule, CompanyProductComponent, CompanyProductModule, Confirmation, ConfirmationModalComponent, ConfirmationModalModule, ConfirmationService, DISABLE_EXPORT_ATTRIBUTE_NAME, DOMService, DateAgoModule, DateAgoPipe, DragAndDropDirective, DragAndDropModule, ExportFormat, FileUploadComponent, FileUploadErrorTypeEnum, FileUploadModule, FilterBarComponent, FilterBarModule, FilterWithHighlightModule, FilterWithHighlightPipe, FooterComponent, FooterModule, HtmlElementParseHelper, IconService, InlineMessageComponent, InlineMessageIconPosition, InlineMessageModule, InlineMessageType, MatButtonLoadingDirective, MatButtonLoadingModule, MissingTranslationHelper, MultiFunctionalTableComponent, MultiFunctionalTableModule, NotificationMessageComponent, NotificationMessageModule, NotificationMessageType, PlausibleEventDirective, PlausibleHelper, PlausibleModule, SaveFileHelper, SortTranslationsModule, SortTranslationsPipe, TldLoaderComponent, TldLoaderModule };
|
|
1734
|
+
export { ClickOutsideDirective, ClickOutsideModule, CloseButtonComponent, CloseButtonModule, CompanyProductComponent, CompanyProductModule, Confirmation, ConfirmationModalComponent, ConfirmationModalModule, ConfirmationService, DISABLE_EXPORT_ATTRIBUTE_NAME, DOMService, DateAgoModule, DateAgoPipe, DragAndDropDirective, DragAndDropModule, ExportFormat, FileUploadComponent, FileUploadErrorTypeEnum, FileUploadModule, FilterBarComponent, FilterBarModule, FilterWithHighlightModule, FilterWithHighlightPipe, FooterComponent, FooterModule, HtmlElementParseHelper, IconService, InlineMessageComponent, InlineMessageIconPosition, InlineMessageModule, InlineMessageType, MatButtonLoadingDirective, MatButtonLoadingModule, MissingTranslationHelper, MultiFunctionalTableComponent, MultiFunctionalTableModule, NotificationMessageComponent, NotificationMessageModule, NotificationMessageType, PlausibleEventDirective, PlausibleHelper, PlausibleModule, SaveFileHelper, SortTranslationsByPropertyModule, SortTranslationsByPropertyPipe, SortTranslationsModule, SortTranslationsPipe, TldLoaderComponent, TldLoaderModule };
|
|
1700
1735
|
//# sourceMappingURL=tilde-nlp-ngx-common.mjs.map
|