@smartbit4all/ng-client 3.3.148 → 3.3.149

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.
Files changed (16) hide show
  1. package/esm2020/lib/smart-client/smart-component-api-client.mjs +3 -2
  2. package/esm2020/lib/smart-component-layout/smart-component-layout.component.mjs +3 -3
  3. package/esm2020/lib/smart-grid/api/grid-api/model/gridRow.mjs +1 -1
  4. package/esm2020/lib/smart-table/tables/material-table/material-table.component.mjs +3 -3
  5. package/esm2020/lib/smart-table/tables/table.mjs +28 -1
  6. package/esm2020/lib/view-context/utility/smart-style-utility.mjs +61 -0
  7. package/fesm2015/smartbit4all-ng-client.mjs +184 -98
  8. package/fesm2015/smartbit4all-ng-client.mjs.map +1 -1
  9. package/fesm2020/smartbit4all-ng-client.mjs +184 -98
  10. package/fesm2020/smartbit4all-ng-client.mjs.map +1 -1
  11. package/lib/smart-grid/api/grid-api/model/gridRow.d.ts +5 -0
  12. package/lib/smart-table/tables/table.d.ts +7 -0
  13. package/lib/view-context/utility/smart-style-utility.d.ts +12 -0
  14. package/package.json +1 -1
  15. package/smartbit4all-ng-client-3.3.149.tgz +0 -0
  16. package/smartbit4all-ng-client-3.3.148.tgz +0 -0
package/esm2020/lib/view-context/utility/smart-style-utility.mjs ADDED
@@ -0,0 +1,61 @@
1
+ import { RendererStyleFlags2 } from '@angular/core';
2
+ export class SmartStyleUtility {
3
+ static applyStyle(style, elementRef, renderer) {
4
+ if (style && elementRef && renderer) {
5
+ let element = elementRef.nativeElement;
6
+ // css style properties
7
+ if (style.style) {
8
+ Object.entries(style.style).forEach(([key, value]) => {
9
+ renderer.setStyle(element, key, value, RendererStyleFlags2.Important);
10
+ });
11
+ }
12
+ // add classes
13
+ if (style.classesToAdd) {
14
+ style.classesToAdd.forEach((cl) => renderer.addClass(element, cl));
15
+ }
16
+ // remove classes
17
+ if (style.classesToRemove) {
18
+ style.classesToRemove.forEach((cl) => renderer.removeClass(element, cl));
19
+ }
20
+ }
21
+ }
22
+ static getNgClasses(style, classesToAdd, classesToRemove) {
23
+ if (classesToAdd === undefined || classesToAdd === null) {
24
+ classesToAdd = [];
25
+ }
26
+ if (classesToRemove === undefined || classesToRemove === null) {
27
+ classesToRemove = [];
28
+ }
29
+ if (style) {
30
+ style.classesToAdd.forEach((s) => classesToAdd.push(s));
31
+ style.classesToRemove.forEach((s) => classesToRemove.push(s));
32
+ }
33
+ const classes = {};
34
+ // Add classes to the object with true values
35
+ classesToAdd.forEach((className) => {
36
+ classes[className] = true;
37
+ });
38
+ // Add classes to remove to the object with false values
39
+ classesToRemove.forEach((className) => {
40
+ classes[className] = false;
41
+ });
42
+ return classes;
43
+ }
44
+ static getNgStyles(style) {
45
+ const styles = {};
46
+ if (style) {
47
+ for (const key in style.style) {
48
+ if (styles.hasOwnProperty(key)) {
49
+ styles[this.toCamelCase(key)] = style.style[key];
50
+ }
51
+ }
52
+ }
53
+ return styles;
54
+ }
55
+ static toCamelCase(css) {
56
+ return css.replace(/-([a-z])/g, function (g) {
57
+ return g[1].toUpperCase();
58
+ });
59
+ }
60
+ }
61
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic21hcnQtc3R5bGUtdXRpbGl0eS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NtYXJ0LW5nLWNsaWVudC9zcmMvbGliL3ZpZXctY29udGV4dC91dGlsaXR5L3NtYXJ0LXN0eWxlLXV0aWxpdHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUF5QixtQkFBbUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUczRSxNQUFNLE9BQU8saUJBQWlCO0lBQ3JCLE1BQU0sQ0FBQyxVQUFVLENBQ3RCLEtBQXdCLEVBQ3hCLFVBQXVCLEVBQ3ZCLFFBQW9CO1FBRXBCLElBQUksS0FBSyxJQUFJLFVBQVUsSUFBSSxRQUFRLEVBQUU7WUFDbkMsSUFBSSxPQUFPLEdBQUcsVUFBVSxDQUFDLGFBQWEsQ0FBQztZQUN2Qyx1QkFBdUI7WUFDdkIsSUFBSSxLQUFLLENBQUMsS0FBSyxFQUFFO2dCQUNmLE1BQU0sQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxFQUFFLEVBQUU7b0JBQ25ELFFBQVEsQ0FBQyxRQUFRLENBQUMsT0FBTyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsbUJBQW1CLENBQUMsU0FBUyxDQUFDLENBQUM7Z0JBQ3hFLENBQUMsQ0FBQyxDQUFDO2FBQ0o7WUFDRCxjQUFjO1lBQ2QsSUFBSSxLQUFLLENBQUMsWUFBWSxFQUFFO2dCQUN0QixLQUFLLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUUsRUFBRSxFQUFFLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQzthQUNwRTtZQUNELGlCQUFpQjtZQUNqQixJQUFJLEtBQUssQ0FBQyxlQUFlLEVBQUU7Z0JBQ3pCLEtBQUssQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDO2FBQzFFO1NBQ0Y7SUFDSCxDQUFDO0lBRU0sTUFBTSxDQUFDLFlBQVksQ0FDeEIsS0FBd0IsRUFDeEIsWUFBdUIsRUFDdkIsZUFBMEI7UUFFMUIsSUFBSSxZQUFZLEtBQUssU0FBUyxJQUFJLFlBQVksS0FBSyxJQUFJLEVBQUU7WUFDdkQsWUFBWSxHQUFHLEVBQUUsQ0FBQztTQUNuQjtRQUNELElBQUksZUFBZSxLQUFLLFNBQVMsSUFBSSxlQUFlLEtBQUssSUFBSSxFQUFFO1lBQzdELGVBQWUsR0FBRyxFQUFFLENBQUM7U0FDdEI7UUFDRCxJQUFJLEtBQUssRUFBRTtZQUNULEtBQUssQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxZQUFhLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDekQsS0FBSyxDQUFDLGVBQWUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLGVBQWdCLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDaEU7UUFDRCxNQUFNLE9BQU8sR0FBcUMsRUFBRSxDQUFDO1FBQ3JELDZDQUE2QztRQUM3QyxZQUFZLENBQUMsT0FBTyxDQUFDLENBQUMsU0FBUyxFQUFFLEVBQUU7WUFDakMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxHQUFHLElBQUksQ0FBQztRQUM1QixDQUFDLENBQUMsQ0FBQztRQUVILHdEQUF3RDtRQUN4RCxlQUFlLENBQUMsT0FBTyxDQUFDLENBQUMsU0FBUyxFQUFFLEVBQUU7WUFDcEMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEtBQUssQ0FBQztRQUM3QixDQUFDLENBQUMsQ0FBQztRQUNILE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFFTSxNQUFNLENBQUMsV0FBVyxDQUFDLEtBQXdCO1FBQ2hELE1BQU0sTUFBTSxHQUF1QyxFQUFFLENBQUM7UUFDdEQsSUFBSSxLQUFLLEVBQUU7WUFDVCxLQUFLLE1BQU0sR0FBRyxJQUFJLEtBQUssQ0FBQyxLQUFLLEVBQUU7Z0JBQzdCLElBQUksTUFBTSxDQUFDLGNBQWMsQ0FBQyxHQUFHLENBQUMsRUFBRTtvQkFDOUIsTUFBTSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO2lCQUNsRDthQUNGO1NBQ0Y7UUFDRCxPQUFPLE1BQU0sQ0FBQztJQUNoQixDQUFDO0lBRU8sTUFBTSxDQUFDLFdBQVcsQ0FBQyxHQUFXO1FBQ3BDLE9BQU8sR0FBRyxDQUFDLE9BQU8sQ0FBQyxXQUFXLEVBQUUsVUFBVSxDQUFDO1lBQ3pDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQzVCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRWxlbWVudFJlZiwgUmVuZGVyZXIyLCBSZW5kZXJlclN0eWxlRmxhZ3MyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFN0eWxlIH0gZnJvbSAnLi4vYXBpL21vZGVsL3N0eWxlJztcclxuXHJcbmV4cG9ydCBjbGFzcyBTbWFydFN0eWxlVXRpbGl0eSB7XHJcbiAgcHVibGljIHN0YXRpYyBhcHBseVN0eWxlKFxyXG4gICAgc3R5bGU6IFN0eWxlIHwgdW5kZWZpbmVkLFxyXG4gICAgZWxlbWVudFJlZj86IEVsZW1lbnRSZWYsXHJcbiAgICByZW5kZXJlcj86IFJlbmRlcmVyMlxyXG4gICkge1xyXG4gICAgaWYgKHN0eWxlICYmIGVsZW1lbnRSZWYgJiYgcmVuZGVyZXIpIHtcclxuICAgICAgbGV0IGVsZW1lbnQgPSBlbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XHJcbiAgICAgIC8vIGNzcyBzdHlsZSBwcm9wZXJ0aWVzXHJcbiAgICAgIGlmIChzdHlsZS5zdHlsZSkge1xyXG4gICAgICAgIE9iamVjdC5lbnRyaWVzKHN0eWxlLnN0eWxlKS5mb3JFYWNoKChba2V5LCB2YWx1ZV0pID0+IHtcclxuICAgICAgICAgIHJlbmRlcmVyLnNldFN0eWxlKGVsZW1lbnQsIGtleSwgdmFsdWUsIFJlbmRlcmVyU3R5bGVGbGFnczIuSW1wb3J0YW50KTtcclxuICAgICAgICB9KTtcclxuICAgICAgfVxyXG4gICAgICAvLyBhZGQgY2xhc3Nlc1xyXG4gICAgICBpZiAoc3R5bGUuY2xhc3Nlc1RvQWRkKSB7XHJcbiAgICAgICAgc3R5bGUuY2xhc3Nlc1RvQWRkLmZvckVhY2goKGNsKSA9PiByZW5kZXJlci5hZGRDbGFzcyhlbGVtZW50LCBjbCkpO1xyXG4gICAgICB9XHJcbiAgICAgIC8vIHJlbW92ZSBjbGFzc2VzXHJcbiAgICAgIGlmIChzdHlsZS5jbGFzc2VzVG9SZW1vdmUpIHtcclxuICAgICAgICBzdHlsZS5jbGFzc2VzVG9SZW1vdmUuZm9yRWFjaCgoY2wpID0+IHJlbmRlcmVyLnJlbW92ZUNsYXNzKGVsZW1lbnQsIGNsKSk7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG4gIHB1YmxpYyBzdGF0aWMgZ2V0TmdDbGFzc2VzKFxyXG4gICAgc3R5bGU6IFN0eWxlIHwgdW5kZWZpbmVkLFxyXG4gICAgY2xhc3Nlc1RvQWRkPzogc3RyaW5nW10sXHJcbiAgICBjbGFzc2VzVG9SZW1vdmU/OiBzdHJpbmdbXVxyXG4gICkge1xyXG4gICAgaWYgKGNsYXNzZXNUb0FkZCA9PT0gdW5kZWZpbmVkIHx8IGNsYXNzZXNUb0FkZCA9PT0gbnVsbCkge1xyXG4gICAgICBjbGFzc2VzVG9BZGQgPSBbXTtcclxuICAgIH1cclxuICAgIGlmIChjbGFzc2VzVG9SZW1vdmUgPT09IHVuZGVmaW5lZCB8fCBjbGFzc2VzVG9SZW1vdmUgPT09IG51bGwpIHtcclxuICAgICAgY2xhc3Nlc1RvUmVtb3ZlID0gW107XHJcbiAgICB9XHJcbiAgICBpZiAoc3R5bGUpIHtcclxuICAgICAgc3R5bGUuY2xhc3Nlc1RvQWRkLmZvckVhY2goKHMpID0+IGNsYXNzZXNUb0FkZCEucHVzaChzKSk7XHJcbiAgICAgIHN0eWxlLmNsYXNzZXNUb1JlbW92ZS5mb3JFYWNoKChzKSA9PiBjbGFzc2VzVG9SZW1vdmUhLnB1c2gocykpO1xyXG4gICAgfVxyXG4gICAgY29uc3QgY2xhc3NlczogeyBbY2xhc3NOYW1lOiBzdHJpbmddOiBib29sZWFuIH0gPSB7fTtcclxuICAgIC8vIEFkZCBjbGFzc2VzIHRvIHRoZSBvYmplY3Qgd2l0aCB0cnVlIHZhbHVlc1xyXG4gICAgY2xhc3Nlc1RvQWRkLmZvckVhY2goKGNsYXNzTmFtZSkgPT4ge1xyXG4gICAgICBjbGFzc2VzW2NsYXNzTmFtZV0gPSB0cnVlO1xyXG4gICAgfSk7XHJcblxyXG4gICAgLy8gQWRkIGNsYXNzZXMgdG8gcmVtb3ZlIHRvIHRoZSBvYmplY3Qgd2l0aCBmYWxzZSB2YWx1ZXNcclxuICAgIGNsYXNzZXNUb1JlbW92ZS5mb3JFYWNoKChjbGFzc05hbWUpID0+IHtcclxuICAgICAgY2xhc3Nlc1tjbGFzc05hbWVdID0gZmFsc2U7XHJcbiAgICB9KTtcclxuICAgIHJldHVybiBjbGFzc2VzO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIHN0YXRpYyBnZXROZ1N0eWxlcyhzdHlsZTogU3R5bGUgfCB1bmRlZmluZWQpOiB7IFtrZXk6IHN0cmluZ106IHN0cmluZyB8IG51bWJlciB9IHtcclxuICAgIGNvbnN0IHN0eWxlczogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfCBudW1iZXIgfSA9IHt9O1xyXG4gICAgaWYgKHN0eWxlKSB7XHJcbiAgICAgIGZvciAoY29uc3Qga2V5IGluIHN0eWxlLnN0eWxlKSB7XHJcbiAgICAgICAgaWYgKHN0eWxlcy5oYXNPd25Qcm9wZXJ0eShrZXkpKSB7XHJcbiAgICAgICAgICBzdHlsZXNbdGhpcy50b0NhbWVsQ2FzZShrZXkpXSA9IHN0eWxlLnN0eWxlW2tleV07XHJcbiAgICAgICAgfVxyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICByZXR1cm4gc3R5bGVzO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBzdGF0aWMgdG9DYW1lbENhc2UoY3NzOiBzdHJpbmcpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIGNzcy5yZXBsYWNlKC8tKFthLXpdKS9nLCBmdW5jdGlvbiAoZykge1xyXG4gICAgICByZXR1cm4gZ1sxXS50b1VwcGVyQ2FzZSgpO1xyXG4gICAgfSk7XHJcbiAgfVxyXG59XHJcbiJdfQ==
package/fesm2015/smartbit4all-ng-client.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, Component, Input, Directive, HostBinding, HostListener, ViewChild, forwardRef, EventEmitter, Output, Pipe, ViewContainerRef, ViewEncapsulation, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, RendererStyleFlags2 } from '@angular/core';
2
+ import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, Component, Input, Directive, HostBinding, HostListener, ViewChild, forwardRef, EventEmitter, Output, Pipe, ViewContainerRef, ViewEncapsulation, ViewChildren, RendererStyleFlags2, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
3
3
  import { __awaiter } from 'tslib';
4
4
  import { Subject, takeUntil, startWith, map, distinctUntilChanged, catchError, throwError, from, lastValueFrom } from 'rxjs';
5
5
  import * as i1 from '@angular/common/http';
@@ -6427,6 +6427,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
6427
6427
  args: [{ selector: 'lib-loading', template: "<div class=\"spinnerContainer\">\r\n <div class=\"spinner\">\r\n <mat-spinner color=\"accent\" #mainSpinner></mat-spinner>\r\n </div>\r\n</div>\r\n", styles: [".spinnerContainer{width:100%;display:flex;flex-direction:row;justify-content:center}\n"] }]
6428
6428
  }], ctorParameters: function () { return []; } });
6429
6429
 
6430
+ class SmartStyleUtility {
6431
+ static applyStyle(style, elementRef, renderer) {
6432
+ if (style && elementRef && renderer) {
6433
+ let element = elementRef.nativeElement;
6434
+ // css style properties
6435
+ if (style.style) {
6436
+ Object.entries(style.style).forEach(([key, value]) => {
6437
+ renderer.setStyle(element, key, value, RendererStyleFlags2.Important);
6438
+ });
6439
+ }
6440
+ // add classes
6441
+ if (style.classesToAdd) {
6442
+ style.classesToAdd.forEach((cl) => renderer.addClass(element, cl));
6443
+ }
6444
+ // remove classes
6445
+ if (style.classesToRemove) {
6446
+ style.classesToRemove.forEach((cl) => renderer.removeClass(element, cl));
6447
+ }
6448
+ }
6449
+ }
6450
+ static getNgClasses(style, classesToAdd, classesToRemove) {
6451
+ if (classesToAdd === undefined || classesToAdd === null) {
6452
+ classesToAdd = [];
6453
+ }
6454
+ if (classesToRemove === undefined || classesToRemove === null) {
6455
+ classesToRemove = [];
6456
+ }
6457
+ if (style) {
6458
+ style.classesToAdd.forEach((s) => classesToAdd.push(s));
6459
+ style.classesToRemove.forEach((s) => classesToRemove.push(s));
6460
+ }
6461
+ const classes = {};
6462
+ // Add classes to the object with true values
6463
+ classesToAdd.forEach((className) => {
6464
+ classes[className] = true;
6465
+ });
6466
+ // Add classes to remove to the object with false values
6467
+ classesToRemove.forEach((className) => {
6468
+ classes[className] = false;
6469
+ });
6470
+ return classes;
6471
+ }
6472
+ static getNgStyles(style) {
6473
+ const styles = {};
6474
+ if (style) {
6475
+ for (const key in style.style) {
6476
+ if (styles.hasOwnProperty(key)) {
6477
+ styles[this.toCamelCase(key)] = style.style[key];
6478
+ }
6479
+ }
6480
+ }
6481
+ return styles;
6482
+ }
6483
+ static toCamelCase(css) {
6484
+ return css.replace(/-([a-z])/g, function (g) {
6485
+ return g[1].toUpperCase();
6486
+ });
6487
+ }
6488
+ }
6489
+
6430
6490
  class Table {
6431
6491
  constructor(cfService) {
6432
6492
  this.cfService = cfService;
@@ -6710,6 +6770,32 @@ class Table {
6710
6770
  }
6711
6771
  return this.highlightedRows.includes(row);
6712
6772
  }
6773
+ getRowClasses(row) {
6774
+ let classesToAdd = [];
6775
+ let classesToRemove = [];
6776
+ classesToAdd.push(this.isHighlighted(row) ? this.smartTable.highlightClass : 'unselected');
6777
+ if (this.smartTable.hover) {
6778
+ classesToAdd.push('smartTableRowHover');
6779
+ }
6780
+ else {
6781
+ classesToRemove.push('smartTableRowHover');
6782
+ }
6783
+ if (this.isSelected(row)) {
6784
+ classesToAdd.push('selected');
6785
+ }
6786
+ else {
6787
+ classesToRemove.push('selected');
6788
+ }
6789
+ return SmartStyleUtility.getNgClasses(row.style, classesToAdd, classesToRemove);
6790
+ }
6791
+ getRowStyles(row) {
6792
+ return SmartStyleUtility.getNgStyles(row.style);
6793
+ }
6794
+ toCamelCase(css) {
6795
+ return css.replace(/-([a-z])/g, function (g) {
6796
+ return g[1].toUpperCase();
6797
+ });
6798
+ }
6713
6799
  onRowClick(row) {
6714
6800
  if (this.smartTable.highlightOnRowClick) {
6715
6801
  if (this.isHighlighted(row)) {
@@ -6969,7 +7055,7 @@ class MaterialTableComponent extends Table {
6969
7055
  }
6970
7056
  }
6971
7057
  MaterialTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MaterialTableComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component });
6972
- MaterialTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MaterialTableComponent, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\r\n #myTable\r\n mat-table\r\n [dataSource]=\"smartTable.tableRows\"\r\n class=\"full-width\"\r\n multiTemplateDataRows\r\n>\r\n <!-- Column Descriptor -->\r\n <ng-container\r\n *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n matColumnDef=\"{{ header }}\"\r\n >\r\n <th mat-header-cell *matHeaderCellDef>\r\n <div\r\n *ngIf=\"header === 'icon' || header === 'img' || header === 'options' || header === 'button'\"\r\n ></div>\r\n <div *ngIf=\"header === 'select'\">\r\n <mat-checkbox\r\n *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n [aria-label]=\"checkboxLabel()\"\r\n >\r\n </mat-checkbox>\r\n <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n {{ smartTable.customTableHeaders[i] }}\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'options' &&\r\n header !== 'button' &&\r\n header !== 'select' &&\r\n header !== 'expand' &&\r\n header !== 'actions'\r\n \"\r\n >\r\n <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n <ng-template #sortable>\r\n <button\r\n (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n mat-button\r\n class=\"sortableHeaderButton\"\r\n >\r\n {{ smartTable.customTableHeaders[i] }}\r\n <smart-icon\r\n class=\"sortableHeaderButtonIcon\"\r\n *ngIf=\"getSortIcon(header)\"\r\n title=\"sort\"\r\n [icon]=\"getSortIcon(header)!\"\r\n ></smart-icon>\r\n <smart-icon\r\n class=\"sortableHeaderButtonIcon\"\r\n *ngIf=\"hasSortNumIcon(header)\"\r\n title=\"sort\"\r\n [icon]=\"getSortNumIcon(header)\"\r\n ></smart-icon>\r\n </button>\r\n </ng-template>\r\n <ng-template #notSortable>\r\n {{ smartTable.customTableHeaders[i] }}\r\n </ng-template>\r\n </div>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n <mat-checkbox\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n !isDisabled(element)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"\r\n $event\r\n ? setSelection(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n : null\r\n \"\r\n [disabled]=\"isDisabled(element)\"\r\n [checked]=\"\r\n smartTable.selection!.isSelected(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \"\r\n [aria-label]=\"\r\n checkboxLabel(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \"\r\n >\r\n </mat-checkbox>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n \"\r\n >\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n {{\r\n getValue(element, header)\r\n | smartDateTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n {{\r\n getValue(element, header)\r\n | smartDate : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n {{\r\n getValue(element, header)\r\n | smartTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n \"\r\n >\r\n <smart-icon\r\n [smartTooltip]=\"getToolTip(element, i)\"\r\n [icon]=\"getIcon(getValue(element, header), i)!\"\r\n [color]=\"getColor(getValue(element, header), i)\"\r\n >\r\n </smart-icon>\r\n </div>\r\n </div>\r\n <div class=\"smart-table-icon-container\">\r\n <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\r\n <div [smartTooltip]=\"ir.tooltip!\" [ngStyle]=\"getImageResourceStyle(ir)\"\r\n ><smart-icon [icon]=\"ir.identifier!\" [color]=\"ir.color!\"> </smart-icon\r\n ></div>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n class=\"smart-table-buttons-col\"\r\n >\r\n <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n mat-icon-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n </button>\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n mat-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n mat-raised-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n <div *ngSwitchCase=\"smartTableButtonType.MENU\">\r\n <button\r\n *ngIf=\"showMenuButton(element, button)\"\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"customButtonClicked($event, button, element, undefined, true)\"\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n <!-- {{ button.label ?? (button.translator ? button.translator(element).title : '') }} -->\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <div *ngIf=\"button.menuItemButtons\">\r\n <button\r\n *ngFor=\"let btn of button.menuItemButtons\"\r\n (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\r\n mat-menu-item\r\n >\r\n <smart-icon\r\n *ngIf=\"btn?.translator(btn)?.icon\"\r\n [icon]=\"btn!.translator!(btn)!.icon!\"\r\n ></smart-icon>\r\n {{ btn?.translator(btn)?.title }}\r\n </button>\r\n </div>\r\n <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n <div *ngFor=\"let btn of getValue(element, button.menuItemButtonsPropertyName)\">\r\n <button\r\n *ngIf=\"btn.code !== ACTION_SEPERATOR\"\r\n (click)=\"customButtonClicked($event, button, element, btn, true)\"\r\n mat-menu-item\r\n [smartTooltip]=\"\r\n btn?.descriptor?.tooltip\r\n ? btn?.descriptor?.tooltip\r\n : button.translator!(btn).tooltip\r\n \"\r\n >\r\n <div\r\n class=\"smart-table-icon-container\"\r\n [ngClass]=\"\r\n button.translator!(btn).iconPosition === 'POST' ? 'reversed' : ''\r\n \"\r\n ><smart-icon\r\n *ngIf=\"button.translator!(btn).icon\"\r\n [icon]=\"button.translator!(btn).icon!\"\r\n ></smart-icon>\r\n {{ button.translator!(btn).title }}</div\r\n >\r\n </button>\r\n <mat-divider *ngIf=\"btn.code === ACTION_SEPERATOR\"></mat-divider>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n <smart-icon\r\n *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n >\r\n </smart-icon>\r\n </div>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].translator !== undefined\r\n \"\r\n >\r\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n </div>\r\n <button\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n \"\r\n mat-icon-button\r\n aria-label=\"expand row\"\r\n (click)=\"onToggle(element, $event)\"\r\n >\r\n <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n </button>\r\n <div\r\n *ngIf=\"\r\n !smartTable.customSmartTableHeaders ||\r\n (smartTable.customSmartTableHeaders &&\r\n !smartTable.customSmartTableHeaders[i].properties &&\r\n !smartTable.customSmartTableHeaders[i].icon &&\r\n !smartTable.customSmartTableHeaders[i].buttons &&\r\n !smartTable.customSmartTableHeaders[i].translator &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n \"\r\n >\r\n <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n <img\r\n *ngIf=\"header === 'img'\"\r\n [src]=\"getValue(element, header)\"\r\n alt=\"\"\r\n class=\"smarttableImg\"\r\n />\r\n <div\r\n *ngIf=\"\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'option' &&\r\n header !== 'button' &&\r\n !isImageResource(element, header)\r\n \"\r\n [innerHtml]=\"getValue(element, header)\"\r\n ></div>\r\n </div>\r\n <div *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\">\r\n <lib-default-actions-popup\r\n #defaultActionMenu\r\n [buttons]=\"getDefaultActionsForRow(element)!\"\r\n [row]=\"element\"\r\n ></lib-default-actions-popup>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n <div\r\n class=\"example-element-detail\"\r\n [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n >\r\n <ng-template #expandedArea></ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let element; columns: smartTable.tableHeaders\"\r\n class=\"example-element-row\"\r\n [class.example-expanded-row]=\"expandedElement === element\"\r\n [ngClass]=\"[\r\n isHighlighted(element) ? smartTable.highlightClass! : 'unselected',\r\n smartTable.hover ? 'smartTableRowHover' : '',\r\n isSelected(element) ? 'selected' : ''\r\n ]\"\r\n (click)=\"handleOnRowClick(element)\"\r\n (dblclick)=\"handleOnRowDoubleClick(element)\"\r\n ></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:whitesmoke}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-menu-item{line-height:normal!important}\n"], components: [{ type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i12.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i2.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"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row"] }, { type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatCellDef, selector: "[matCellDef]" }, { type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "smartDateTime": SmartDateTimePipe, "smartDate": SmartDatePipe, "smartTime": SmartTimePipe }, animations: [
7058
+ MaterialTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MaterialTableComponent, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\r\n #myTable\r\n mat-table\r\n [dataSource]=\"smartTable.tableRows\"\r\n class=\"full-width\"\r\n multiTemplateDataRows\r\n>\r\n <!-- Column Descriptor -->\r\n <ng-container\r\n *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n matColumnDef=\"{{ header }}\"\r\n >\r\n <th mat-header-cell *matHeaderCellDef>\r\n <div\r\n *ngIf=\"header === 'icon' || header === 'img' || header === 'options' || header === 'button'\"\r\n ></div>\r\n <div *ngIf=\"header === 'select'\">\r\n <mat-checkbox\r\n *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n [aria-label]=\"checkboxLabel()\"\r\n >\r\n </mat-checkbox>\r\n <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n {{ smartTable.customTableHeaders[i] }}\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'options' &&\r\n header !== 'button' &&\r\n header !== 'select' &&\r\n header !== 'expand' &&\r\n header !== 'actions'\r\n \"\r\n >\r\n <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n <ng-template #sortable>\r\n <button\r\n (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n mat-button\r\n class=\"sortableHeaderButton\"\r\n >\r\n {{ smartTable.customTableHeaders[i] }}\r\n <smart-icon\r\n class=\"sortableHeaderButtonIcon\"\r\n *ngIf=\"getSortIcon(header)\"\r\n title=\"sort\"\r\n [icon]=\"getSortIcon(header)!\"\r\n ></smart-icon>\r\n <smart-icon\r\n class=\"sortableHeaderButtonIcon\"\r\n *ngIf=\"hasSortNumIcon(header)\"\r\n title=\"sort\"\r\n [icon]=\"getSortNumIcon(header)\"\r\n ></smart-icon>\r\n </button>\r\n </ng-template>\r\n <ng-template #notSortable>\r\n {{ smartTable.customTableHeaders[i] }}\r\n </ng-template>\r\n </div>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n <mat-checkbox\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n !isDisabled(element)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"\r\n $event\r\n ? setSelection(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n : null\r\n \"\r\n [disabled]=\"isDisabled(element)\"\r\n [checked]=\"\r\n smartTable.selection!.isSelected(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \"\r\n [aria-label]=\"\r\n checkboxLabel(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \"\r\n >\r\n </mat-checkbox>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n \"\r\n >\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n {{\r\n getValue(element, header)\r\n | smartDateTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n {{\r\n getValue(element, header)\r\n | smartDate : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n {{\r\n getValue(element, header)\r\n | smartTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n \"\r\n >\r\n <smart-icon\r\n [smartTooltip]=\"getToolTip(element, i)\"\r\n [icon]=\"getIcon(getValue(element, header), i)!\"\r\n [color]=\"getColor(getValue(element, header), i)\"\r\n >\r\n </smart-icon>\r\n </div>\r\n </div>\r\n <div class=\"smart-table-icon-container\">\r\n <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\r\n <div [smartTooltip]=\"ir.tooltip!\" [ngStyle]=\"getImageResourceStyle(ir)\"\r\n ><smart-icon [icon]=\"ir.identifier!\" [color]=\"ir.color!\"> </smart-icon\r\n ></div>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n class=\"smart-table-buttons-col\"\r\n >\r\n <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n mat-icon-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n </button>\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n mat-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n mat-raised-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n <div *ngSwitchCase=\"smartTableButtonType.MENU\">\r\n <button\r\n *ngIf=\"showMenuButton(element, button)\"\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"customButtonClicked($event, button, element, undefined, true)\"\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n <!-- {{ button.label ?? (button.translator ? button.translator(element).title : '') }} -->\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <div *ngIf=\"button.menuItemButtons\">\r\n <button\r\n *ngFor=\"let btn of button.menuItemButtons\"\r\n (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\r\n mat-menu-item\r\n >\r\n <smart-icon\r\n *ngIf=\"btn?.translator(btn)?.icon\"\r\n [icon]=\"btn!.translator!(btn)!.icon!\"\r\n ></smart-icon>\r\n {{ btn?.translator(btn)?.title }}\r\n </button>\r\n </div>\r\n <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n <div *ngFor=\"let btn of getValue(element, button.menuItemButtonsPropertyName)\">\r\n <button\r\n *ngIf=\"btn.code !== ACTION_SEPERATOR\"\r\n (click)=\"customButtonClicked($event, button, element, btn, true)\"\r\n mat-menu-item\r\n [smartTooltip]=\"\r\n btn?.descriptor?.tooltip\r\n ? btn?.descriptor?.tooltip\r\n : button.translator!(btn).tooltip\r\n \"\r\n >\r\n <div\r\n class=\"smart-table-icon-container\"\r\n [ngClass]=\"\r\n button.translator!(btn).iconPosition === 'POST' ? 'reversed' : ''\r\n \"\r\n ><smart-icon\r\n *ngIf=\"button.translator!(btn).icon\"\r\n [icon]=\"button.translator!(btn).icon!\"\r\n ></smart-icon>\r\n {{ button.translator!(btn).title }}</div\r\n >\r\n </button>\r\n <mat-divider *ngIf=\"btn.code === ACTION_SEPERATOR\"></mat-divider>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n <smart-icon\r\n *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n >\r\n </smart-icon>\r\n </div>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].translator !== undefined\r\n \"\r\n >\r\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n </div>\r\n <button\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n \"\r\n mat-icon-button\r\n aria-label=\"expand row\"\r\n (click)=\"onToggle(element, $event)\"\r\n >\r\n <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n </button>\r\n <div\r\n *ngIf=\"\r\n !smartTable.customSmartTableHeaders ||\r\n (smartTable.customSmartTableHeaders &&\r\n !smartTable.customSmartTableHeaders[i].properties &&\r\n !smartTable.customSmartTableHeaders[i].icon &&\r\n !smartTable.customSmartTableHeaders[i].buttons &&\r\n !smartTable.customSmartTableHeaders[i].translator &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n \"\r\n >\r\n <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n <img\r\n *ngIf=\"header === 'img'\"\r\n [src]=\"getValue(element, header)\"\r\n alt=\"\"\r\n class=\"smarttableImg\"\r\n />\r\n <div\r\n *ngIf=\"\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'option' &&\r\n header !== 'button' &&\r\n !isImageResource(element, header)\r\n \"\r\n [innerHtml]=\"getValue(element, header)\"\r\n ></div>\r\n </div>\r\n <div *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\">\r\n <lib-default-actions-popup\r\n #defaultActionMenu\r\n [buttons]=\"getDefaultActionsForRow(element)!\"\r\n [row]=\"element\"\r\n ></lib-default-actions-popup>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n <div\r\n class=\"example-element-detail\"\r\n [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n >\r\n <ng-template #expandedArea></ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let element; columns: smartTable.tableHeaders\"\r\n class=\"example-element-row\"\r\n [class.example-expanded-row]=\"expandedElement === element\"\r\n [ngClass]=\"getRowClasses(element)\"\r\n [ngStyle]=\"getRowStyles(element)\"\r\n (click)=\"handleOnRowClick(element)\"\r\n (dblclick)=\"handleOnRowDoubleClick(element)\"\r\n ></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:whitesmoke}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-menu-item{line-height:normal!important}\n"], components: [{ type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i12.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i2.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"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row"] }, { type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatCellDef, selector: "[matCellDef]" }, { type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "smartDateTime": SmartDateTimePipe, "smartDate": SmartDatePipe, "smartTime": SmartTimePipe }, animations: [
6973
7059
  trigger('detailExpand', [
6974
7060
  state('collapsed', style({ height: '0px', minHeight: '0' })),
6975
7061
  state('expanded', style({ height: '*' })),
@@ -6984,7 +7070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
6984
7070
  state('expanded', style({ height: '*' })),
6985
7071
  transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
6986
7072
  ]),
6987
- ], template: "<table\r\n #myTable\r\n mat-table\r\n [dataSource]=\"smartTable.tableRows\"\r\n class=\"full-width\"\r\n multiTemplateDataRows\r\n>\r\n <!-- Column Descriptor -->\r\n <ng-container\r\n *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n matColumnDef=\"{{ header }}\"\r\n >\r\n <th mat-header-cell *matHeaderCellDef>\r\n <div\r\n *ngIf=\"header === 'icon' || header === 'img' || header === 'options' || header === 'button'\"\r\n ></div>\r\n <div *ngIf=\"header === 'select'\">\r\n <mat-checkbox\r\n *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n [aria-label]=\"checkboxLabel()\"\r\n >\r\n </mat-checkbox>\r\n <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n {{ smartTable.customTableHeaders[i] }}\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'options' &&\r\n header !== 'button' &&\r\n header !== 'select' &&\r\n header !== 'expand' &&\r\n header !== 'actions'\r\n \"\r\n >\r\n <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n <ng-template #sortable>\r\n <button\r\n (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n mat-button\r\n class=\"sortableHeaderButton\"\r\n >\r\n {{ smartTable.customTableHeaders[i] }}\r\n <smart-icon\r\n class=\"sortableHeaderButtonIcon\"\r\n *ngIf=\"getSortIcon(header)\"\r\n title=\"sort\"\r\n [icon]=\"getSortIcon(header)!\"\r\n ></smart-icon>\r\n <smart-icon\r\n class=\"sortableHeaderButtonIcon\"\r\n *ngIf=\"hasSortNumIcon(header)\"\r\n title=\"sort\"\r\n [icon]=\"getSortNumIcon(header)\"\r\n ></smart-icon>\r\n </button>\r\n </ng-template>\r\n <ng-template #notSortable>\r\n {{ smartTable.customTableHeaders[i] }}\r\n </ng-template>\r\n </div>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n <mat-checkbox\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n !isDisabled(element)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"\r\n $event\r\n ? setSelection(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n : null\r\n \"\r\n [disabled]=\"isDisabled(element)\"\r\n [checked]=\"\r\n smartTable.selection!.isSelected(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \"\r\n [aria-label]=\"\r\n checkboxLabel(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \"\r\n >\r\n </mat-checkbox>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n \"\r\n >\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n {{\r\n getValue(element, header)\r\n | smartDateTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n {{\r\n getValue(element, header)\r\n | smartDate : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n {{\r\n getValue(element, header)\r\n | smartTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n \"\r\n >\r\n <smart-icon\r\n [smartTooltip]=\"getToolTip(element, i)\"\r\n [icon]=\"getIcon(getValue(element, header), i)!\"\r\n [color]=\"getColor(getValue(element, header), i)\"\r\n >\r\n </smart-icon>\r\n </div>\r\n </div>\r\n <div class=\"smart-table-icon-container\">\r\n <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\r\n <div [smartTooltip]=\"ir.tooltip!\" [ngStyle]=\"getImageResourceStyle(ir)\"\r\n ><smart-icon [icon]=\"ir.identifier!\" [color]=\"ir.color!\"> </smart-icon\r\n ></div>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n class=\"smart-table-buttons-col\"\r\n >\r\n <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n mat-icon-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n </button>\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n mat-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n mat-raised-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n <div *ngSwitchCase=\"smartTableButtonType.MENU\">\r\n <button\r\n *ngIf=\"showMenuButton(element, button)\"\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"customButtonClicked($event, button, element, undefined, true)\"\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n <!-- {{ button.label ?? (button.translator ? button.translator(element).title : '') }} -->\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <div *ngIf=\"button.menuItemButtons\">\r\n <button\r\n *ngFor=\"let btn of button.menuItemButtons\"\r\n (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\r\n mat-menu-item\r\n >\r\n <smart-icon\r\n *ngIf=\"btn?.translator(btn)?.icon\"\r\n [icon]=\"btn!.translator!(btn)!.icon!\"\r\n ></smart-icon>\r\n {{ btn?.translator(btn)?.title }}\r\n </button>\r\n </div>\r\n <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n <div *ngFor=\"let btn of getValue(element, button.menuItemButtonsPropertyName)\">\r\n <button\r\n *ngIf=\"btn.code !== ACTION_SEPERATOR\"\r\n (click)=\"customButtonClicked($event, button, element, btn, true)\"\r\n mat-menu-item\r\n [smartTooltip]=\"\r\n btn?.descriptor?.tooltip\r\n ? btn?.descriptor?.tooltip\r\n : button.translator!(btn).tooltip\r\n \"\r\n >\r\n <div\r\n class=\"smart-table-icon-container\"\r\n [ngClass]=\"\r\n button.translator!(btn).iconPosition === 'POST' ? 'reversed' : ''\r\n \"\r\n ><smart-icon\r\n *ngIf=\"button.translator!(btn).icon\"\r\n [icon]=\"button.translator!(btn).icon!\"\r\n ></smart-icon>\r\n {{ button.translator!(btn).title }}</div\r\n >\r\n </button>\r\n <mat-divider *ngIf=\"btn.code === ACTION_SEPERATOR\"></mat-divider>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n <smart-icon\r\n *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n >\r\n </smart-icon>\r\n </div>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].translator !== undefined\r\n \"\r\n >\r\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n </div>\r\n <button\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n \"\r\n mat-icon-button\r\n aria-label=\"expand row\"\r\n (click)=\"onToggle(element, $event)\"\r\n >\r\n <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n </button>\r\n <div\r\n *ngIf=\"\r\n !smartTable.customSmartTableHeaders ||\r\n (smartTable.customSmartTableHeaders &&\r\n !smartTable.customSmartTableHeaders[i].properties &&\r\n !smartTable.customSmartTableHeaders[i].icon &&\r\n !smartTable.customSmartTableHeaders[i].buttons &&\r\n !smartTable.customSmartTableHeaders[i].translator &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n \"\r\n >\r\n <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n <img\r\n *ngIf=\"header === 'img'\"\r\n [src]=\"getValue(element, header)\"\r\n alt=\"\"\r\n class=\"smarttableImg\"\r\n />\r\n <div\r\n *ngIf=\"\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'option' &&\r\n header !== 'button' &&\r\n !isImageResource(element, header)\r\n \"\r\n [innerHtml]=\"getValue(element, header)\"\r\n ></div>\r\n </div>\r\n <div *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\">\r\n <lib-default-actions-popup\r\n #defaultActionMenu\r\n [buttons]=\"getDefaultActionsForRow(element)!\"\r\n [row]=\"element\"\r\n ></lib-default-actions-popup>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n <div\r\n class=\"example-element-detail\"\r\n [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n >\r\n <ng-template #expandedArea></ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let element; columns: smartTable.tableHeaders\"\r\n class=\"example-element-row\"\r\n [class.example-expanded-row]=\"expandedElement === element\"\r\n [ngClass]=\"[\r\n isHighlighted(element) ? smartTable.highlightClass! : 'unselected',\r\n smartTable.hover ? 'smartTableRowHover' : '',\r\n isSelected(element) ? 'selected' : ''\r\n ]\"\r\n (click)=\"handleOnRowClick(element)\"\r\n (dblclick)=\"handleOnRowDoubleClick(element)\"\r\n ></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:whitesmoke}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-menu-item{line-height:normal!important}\n"] }]
7073
+ ], template: "<table\r\n #myTable\r\n mat-table\r\n [dataSource]=\"smartTable.tableRows\"\r\n class=\"full-width\"\r\n multiTemplateDataRows\r\n>\r\n <!-- Column Descriptor -->\r\n <ng-container\r\n *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n matColumnDef=\"{{ header }}\"\r\n >\r\n <th mat-header-cell *matHeaderCellDef>\r\n <div\r\n *ngIf=\"header === 'icon' || header === 'img' || header === 'options' || header === 'button'\"\r\n ></div>\r\n <div *ngIf=\"header === 'select'\">\r\n <mat-checkbox\r\n *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n [aria-label]=\"checkboxLabel()\"\r\n >\r\n </mat-checkbox>\r\n <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n {{ smartTable.customTableHeaders[i] }}\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'options' &&\r\n header !== 'button' &&\r\n header !== 'select' &&\r\n header !== 'expand' &&\r\n header !== 'actions'\r\n \"\r\n >\r\n <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n <ng-template #sortable>\r\n <button\r\n (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n mat-button\r\n class=\"sortableHeaderButton\"\r\n >\r\n {{ smartTable.customTableHeaders[i] }}\r\n <smart-icon\r\n class=\"sortableHeaderButtonIcon\"\r\n *ngIf=\"getSortIcon(header)\"\r\n title=\"sort\"\r\n [icon]=\"getSortIcon(header)!\"\r\n ></smart-icon>\r\n <smart-icon\r\n class=\"sortableHeaderButtonIcon\"\r\n *ngIf=\"hasSortNumIcon(header)\"\r\n title=\"sort\"\r\n [icon]=\"getSortNumIcon(header)\"\r\n ></smart-icon>\r\n </button>\r\n </ng-template>\r\n <ng-template #notSortable>\r\n {{ smartTable.customTableHeaders[i] }}\r\n </ng-template>\r\n </div>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n <mat-checkbox\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n !isDisabled(element)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"\r\n $event\r\n ? setSelection(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n : null\r\n \"\r\n [disabled]=\"isDisabled(element)\"\r\n [checked]=\"\r\n smartTable.selection!.isSelected(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \"\r\n [aria-label]=\"\r\n checkboxLabel(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \"\r\n >\r\n </mat-checkbox>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n \"\r\n >\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n {{\r\n getValue(element, header)\r\n | smartDateTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n {{\r\n getValue(element, header)\r\n | smartDate : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n {{\r\n getValue(element, header)\r\n | smartTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n }}\r\n </div>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n \"\r\n >\r\n <smart-icon\r\n [smartTooltip]=\"getToolTip(element, i)\"\r\n [icon]=\"getIcon(getValue(element, header), i)!\"\r\n [color]=\"getColor(getValue(element, header), i)\"\r\n >\r\n </smart-icon>\r\n </div>\r\n </div>\r\n <div class=\"smart-table-icon-container\">\r\n <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\r\n <div [smartTooltip]=\"ir.tooltip!\" [ngStyle]=\"getImageResourceStyle(ir)\"\r\n ><smart-icon [icon]=\"ir.identifier!\" [color]=\"ir.color!\"> </smart-icon\r\n ></div>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n class=\"smart-table-buttons-col\"\r\n >\r\n <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n mat-icon-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n </button>\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n mat-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n <button\r\n (click)=\"customButtonClicked($event, button, element)\"\r\n *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n mat-raised-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n <div *ngSwitchCase=\"smartTableButtonType.MENU\">\r\n <button\r\n *ngIf=\"showMenuButton(element, button)\"\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"customButtonClicked($event, button, element, undefined, true)\"\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n <!-- {{ button.label ?? (button.translator ? button.translator(element).title : '') }} -->\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <div *ngIf=\"button.menuItemButtons\">\r\n <button\r\n *ngFor=\"let btn of button.menuItemButtons\"\r\n (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\r\n mat-menu-item\r\n >\r\n <smart-icon\r\n *ngIf=\"btn?.translator(btn)?.icon\"\r\n [icon]=\"btn!.translator!(btn)!.icon!\"\r\n ></smart-icon>\r\n {{ btn?.translator(btn)?.title }}\r\n </button>\r\n </div>\r\n <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n <div *ngFor=\"let btn of getValue(element, button.menuItemButtonsPropertyName)\">\r\n <button\r\n *ngIf=\"btn.code !== ACTION_SEPERATOR\"\r\n (click)=\"customButtonClicked($event, button, element, btn, true)\"\r\n mat-menu-item\r\n [smartTooltip]=\"\r\n btn?.descriptor?.tooltip\r\n ? btn?.descriptor?.tooltip\r\n : button.translator!(btn).tooltip\r\n \"\r\n >\r\n <div\r\n class=\"smart-table-icon-container\"\r\n [ngClass]=\"\r\n button.translator!(btn).iconPosition === 'POST' ? 'reversed' : ''\r\n \"\r\n ><smart-icon\r\n *ngIf=\"button.translator!(btn).icon\"\r\n [icon]=\"button.translator!(btn).icon!\"\r\n ></smart-icon>\r\n {{ button.translator!(btn).title }}</div\r\n >\r\n </button>\r\n <mat-divider *ngIf=\"btn.code === ACTION_SEPERATOR\"></mat-divider>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n <smart-icon\r\n *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n >\r\n </smart-icon>\r\n </div>\r\n <div\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].translator !== undefined\r\n \"\r\n >\r\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n </div>\r\n <button\r\n *ngIf=\"\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n \"\r\n mat-icon-button\r\n aria-label=\"expand row\"\r\n (click)=\"onToggle(element, $event)\"\r\n >\r\n <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n </button>\r\n <div\r\n *ngIf=\"\r\n !smartTable.customSmartTableHeaders ||\r\n (smartTable.customSmartTableHeaders &&\r\n !smartTable.customSmartTableHeaders[i].properties &&\r\n !smartTable.customSmartTableHeaders[i].icon &&\r\n !smartTable.customSmartTableHeaders[i].buttons &&\r\n !smartTable.customSmartTableHeaders[i].translator &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n \"\r\n >\r\n <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n <img\r\n *ngIf=\"header === 'img'\"\r\n [src]=\"getValue(element, header)\"\r\n alt=\"\"\r\n class=\"smarttableImg\"\r\n />\r\n <div\r\n *ngIf=\"\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'option' &&\r\n header !== 'button' &&\r\n !isImageResource(element, header)\r\n \"\r\n [innerHtml]=\"getValue(element, header)\"\r\n ></div>\r\n </div>\r\n <div *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\">\r\n <lib-default-actions-popup\r\n #defaultActionMenu\r\n [buttons]=\"getDefaultActionsForRow(element)!\"\r\n [row]=\"element\"\r\n ></lib-default-actions-popup>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n <div\r\n class=\"example-element-detail\"\r\n [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n >\r\n <ng-template #expandedArea></ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let element; columns: smartTable.tableHeaders\"\r\n class=\"example-element-row\"\r\n [class.example-expanded-row]=\"expandedElement === element\"\r\n [ngClass]=\"getRowClasses(element)\"\r\n [ngStyle]=\"getRowStyles(element)\"\r\n (click)=\"handleOnRowClick(element)\"\r\n (dblclick)=\"handleOnRowDoubleClick(element)\"\r\n ></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:whitesmoke}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-menu-item{line-height:normal!important}\n"] }]
6988
7074
  }], ctorParameters: function () { return [{ type: ComponentFactoryService }]; } });
6989
7075
 
6990
7076
  class MobileTableComponent extends Table {
@@ -13033,99 +13119,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
13033
13119
  * Public API Surface of smart-grid
13034
13120
  */
13035
13121
 
13036
- class SmartComponentLayoutUtility {
13037
- static getForms(comp) {
13038
- let result = [];
13039
- if (comp.components) {
13040
- const children = comp.components
13041
- .map((c) => this.getForms(c))
13042
- .reduce((acc, value) => acc.concat(value), []);
13043
- result.push(...children);
13044
- }
13045
- const expandable = this.getExpandableComponent(comp);
13046
- if (expandable) {
13047
- result.push(...this.getForms(expandable));
13048
- }
13049
- if (comp.smartFormComponent) {
13050
- result.push(comp.smartFormComponent);
13051
- }
13052
- return result;
13053
- }
13054
- static getGrids(comp) {
13055
- let result = [];
13056
- if (comp.components) {
13057
- const children = comp.components
13058
- .map((c) => this.getGrids(c))
13059
- .reduce((acc, value) => acc.concat(value), []);
13060
- result.push(...children);
13061
- }
13062
- const expandable = this.getExpandableComponent(comp);
13063
- if (expandable) {
13064
- result.push(...this.getGrids(expandable));
13065
- }
13066
- if (comp.smartGridComponent) {
13067
- result.push(comp.smartGridComponent);
13068
- }
13069
- return result;
13070
- }
13071
- static getTrees(comp) {
13072
- var _a;
13073
- let result = [];
13074
- if (comp.components) {
13075
- const children = (_a = comp.components) === null || _a === void 0 ? void 0 : _a.map((c) => this.getTrees(c)).reduce((acc, value) => acc.concat(value), []);
13076
- result.push(...children);
13077
- }
13078
- const expandable = this.getExpandableComponent(comp);
13079
- if (expandable) {
13080
- result.push(...this.getTrees(expandable));
13081
- }
13082
- if (comp.treeService) {
13083
- result.push(comp.treeService);
13084
- }
13085
- return result;
13086
- }
13087
- static getToolbars(comp) {
13088
- let result = [];
13089
- if (comp.components) {
13090
- const children = comp.components
13091
- .map((c) => this.getToolbars(c))
13092
- .reduce((acc, value) => acc.concat(value), []);
13093
- result.push(...children);
13094
- }
13095
- const expandable = this.getExpandableComponent(comp);
13096
- if (expandable) {
13097
- result.push(...this.getToolbars(expandable));
13098
- }
13099
- if (comp.toolbar) {
13100
- result.push(comp.toolbar);
13101
- }
13102
- return result;
13103
- }
13104
- static getExpandableComponent(comp) {
13105
- var _a, _b, _c;
13106
- return (_c = (_b = (_a = comp.expandableComponents) === null || _a === void 0 ? void 0 : _a.first) === null || _b === void 0 ? void 0 : _b.componentRef) === null || _c === void 0 ? void 0 : _c.instance;
13107
- }
13108
- static applyStyle(style, elementRef, renderer) {
13109
- if (style && elementRef && renderer) {
13110
- let element = elementRef.nativeElement;
13111
- // css style properties
13112
- if (style.style) {
13113
- Object.entries(style.style).forEach(([key, value]) => {
13114
- renderer.setStyle(element, key, value, RendererStyleFlags2.Important);
13115
- });
13116
- }
13117
- // add classes
13118
- if (style.classesToAdd) {
13119
- style.classesToAdd.forEach((cl) => renderer.addClass(element, cl));
13120
- }
13121
- // remove classes
13122
- if (style.classesToRemove) {
13123
- style.classesToRemove.forEach((cl) => renderer.removeClass(element, cl));
13124
- }
13125
- }
13126
- }
13127
- }
13128
-
13129
13122
  class SmartComponentLayoutComponent {
13130
13123
  constructor(layoutService, element, renderer) {
13131
13124
  this.layoutService = layoutService;
@@ -13217,7 +13210,7 @@ class SmartComponentLayoutComponent {
13217
13210
  this.parentSmartComponent.initActions();
13218
13211
  }
13219
13212
  }
13220
- SmartComponentLayoutUtility.applyStyle(this.smartComponentLayout.style, this.element, this.renderer);
13213
+ SmartStyleUtility.applyStyle(this.smartComponentLayout.style, this.element, this.renderer);
13221
13214
  }
13222
13215
  type() {
13223
13216
  return ComponentType;
@@ -14730,6 +14723,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
14730
14723
  * Public API Surface of smarttree
14731
14724
  */
14732
14725
 
14726
+ class SmartComponentLayoutUtility {
14727
+ static getForms(comp) {
14728
+ let result = [];
14729
+ if (comp.components) {
14730
+ const children = comp.components
14731
+ .map((c) => this.getForms(c))
14732
+ .reduce((acc, value) => acc.concat(value), []);
14733
+ result.push(...children);
14734
+ }
14735
+ const expandable = this.getExpandableComponent(comp);
14736
+ if (expandable) {
14737
+ result.push(...this.getForms(expandable));
14738
+ }
14739
+ if (comp.smartFormComponent) {
14740
+ result.push(comp.smartFormComponent);
14741
+ }
14742
+ return result;
14743
+ }
14744
+ static getGrids(comp) {
14745
+ let result = [];
14746
+ if (comp.components) {
14747
+ const children = comp.components
14748
+ .map((c) => this.getGrids(c))
14749
+ .reduce((acc, value) => acc.concat(value), []);
14750
+ result.push(...children);
14751
+ }
14752
+ const expandable = this.getExpandableComponent(comp);
14753
+ if (expandable) {
14754
+ result.push(...this.getGrids(expandable));
14755
+ }
14756
+ if (comp.smartGridComponent) {
14757
+ result.push(comp.smartGridComponent);
14758
+ }
14759
+ return result;
14760
+ }
14761
+ static getTrees(comp) {
14762
+ var _a;
14763
+ let result = [];
14764
+ if (comp.components) {
14765
+ const children = (_a = comp.components) === null || _a === void 0 ? void 0 : _a.map((c) => this.getTrees(c)).reduce((acc, value) => acc.concat(value), []);
14766
+ result.push(...children);
14767
+ }
14768
+ const expandable = this.getExpandableComponent(comp);
14769
+ if (expandable) {
14770
+ result.push(...this.getTrees(expandable));
14771
+ }
14772
+ if (comp.treeService) {
14773
+ result.push(comp.treeService);
14774
+ }
14775
+ return result;
14776
+ }
14777
+ static getToolbars(comp) {
14778
+ let result = [];
14779
+ if (comp.components) {
14780
+ const children = comp.components
14781
+ .map((c) => this.getToolbars(c))
14782
+ .reduce((acc, value) => acc.concat(value), []);
14783
+ result.push(...children);
14784
+ }
14785
+ const expandable = this.getExpandableComponent(comp);
14786
+ if (expandable) {
14787
+ result.push(...this.getToolbars(expandable));
14788
+ }
14789
+ if (comp.toolbar) {
14790
+ result.push(comp.toolbar);
14791
+ }
14792
+ return result;
14793
+ }
14794
+ static getExpandableComponent(comp) {
14795
+ var _a, _b, _c;
14796
+ return (_c = (_b = (_a = comp.expandableComponents) === null || _a === void 0 ? void 0 : _a.first) === null || _b === void 0 ? void 0 : _b.componentRef) === null || _c === void 0 ? void 0 : _c.instance;
14797
+ }
14798
+ static applyStyle(style, elementRef, renderer) {
14799
+ if (style && elementRef && renderer) {
14800
+ let element = elementRef.nativeElement;
14801
+ // css style properties
14802
+ if (style.style) {
14803
+ Object.entries(style.style).forEach(([key, value]) => {
14804
+ renderer.setStyle(element, key, value, RendererStyleFlags2.Important);
14805
+ });
14806
+ }
14807
+ // add classes
14808
+ if (style.classesToAdd) {
14809
+ style.classesToAdd.forEach((cl) => renderer.addClass(element, cl));
14810
+ }
14811
+ // remove classes
14812
+ if (style.classesToRemove) {
14813
+ style.classesToRemove.forEach((cl) => renderer.removeClass(element, cl));
14814
+ }
14815
+ }
14816
+ }
14817
+ }
14818
+
14733
14819
  /*
14734
14820
  * Public API Surface of smart-component-layout
14735
14821
  */
@@ -15290,7 +15376,7 @@ class SmartComponentApiClient {
15290
15376
  }
15291
15377
  initComponentByModel() {
15292
15378
  var _a, _b;
15293
- SmartComponentLayoutUtility.applyStyle((_a = this.model) === null || _a === void 0 ? void 0 : _a.style, this.element, this.renderer);
15379
+ SmartStyleUtility.applyStyle((_a = this.model) === null || _a === void 0 ? void 0 : _a.style, this.element, this.renderer);
15294
15380
  this.initData();
15295
15381
  this.initActions();
15296
15382
  if (this.useQueryLists) {