@smartbit4all/ng-client 6.0.10 → 6.0.12

package/fesm2022/smartbit4all-ng-client.mjs

@@ -95,9 +95,9 @@ import { DomHandler } from 'primeng/dom';
 import * as i3$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule, MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
+import { SelectionModel } from '@angular/cdk/collections';
 import * as i5$1 from '@angular/material/menu';
 import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
-import { SelectionModel } from '@angular/cdk/collections';
 import * as i5$2 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i1$7 from '@angular/material/progress-spinner';
@@ -2542,6 +2542,29 @@ var LinkTargetEnum;
 })(LinkTargetEnum || (LinkTargetEnum = {}));
 ;
 
+/**
+ * View API
+ * View API
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var MenuOpenDirection;
+(function (MenuOpenDirection) {
+    MenuOpenDirection["BELOW_LEFT"] = "BELOW_LEFT";
+    MenuOpenDirection["BELOW_RIGHT"] = "BELOW_RIGHT";
+    MenuOpenDirection["ABOVE_LEFT"] = "ABOVE_LEFT";
+    MenuOpenDirection["ABOVE_RIGHT"] = "ABOVE_RIGHT";
+    MenuOpenDirection["RIGHT_TOP"] = "RIGHT_TOP";
+    MenuOpenDirection["RIGHT_BOTTOM"] = "RIGHT_BOTTOM";
+    MenuOpenDirection["LEFT_TOP"] = "LEFT_TOP";
+    MenuOpenDirection["LEFT_BOTTOM"] = "LEFT_BOTTOM";
+})(MenuOpenDirection || (MenuOpenDirection = {}));
+
 /**
  * View API
  * View API
@@ -3331,11 +3354,11 @@ class SmartIconComponent {
         return Object.assign({}, ...styles.filter(Boolean));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartIconComponent, deps: [{ token: SmartIconService }, { token: i0.ChangeDetectorRef }, { token: i2.DomSanitizer }, { token: COMPONENT_LIBRARY }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartIconComponent, selector: "smart-icon", inputs: { iconWithoutNamespace: ["icon", "iconWithoutNamespace"], color: "color", imageResource: "imageResource" }, usesOnChanges: true, ngImport: i0, template: "@if(imageResource){\r\n<ng-container *ngTemplateOutlet=\"imageResourceIcon\" />\r\n} @else if(iconWithoutNamespace){\r\n<ng-container *ngTemplateOutlet=\"normalIcon\" />\r\n}\r\n\r\n<ng-template #imageResourceIcon>\r\n  @if(imageResource){\r\n  <div\r\n    class=\"imageResourceIcon\"\r\n    [smartTooltip]=\"imageResource.tooltip\"\r\n    [uiBadge]=\"imageResource.badge\"\r\n  >\r\n    @if(imageResource.kind === imageResourceKind.URL){\r\n    <img\r\n      [ngStyle]=\"getImageResourceStyle(imageResource)\"\r\n      class=\"imageIcon\"\r\n      [src]=\"imageResource.source\"\r\n      [alt]=\"imageResource.identifier\"\r\n    />\r\n    } @else if(imageResource.identifier){\r\n    <ng-container *ngTemplateOutlet=\"normalIcon\"></ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #normalIcon>\r\n  @if(compLib === componentLibrary.PRIMENG){\r\n  <ng-container *ngTemplateOutlet=\"primeIcon\" />\r\n  }@else {\r\n  <ng-container *ngTemplateOutlet=\"materialIcon\" />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #primeIcon>\r\n  @if (isCustom) {\r\n  <i\r\n    class=\"pi custom-prime-icon\"\r\n    [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n  >\r\n    @if(iconHtml){\r\n    <span\r\n      [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n      [innerHTML]=\"iconHtml\"\r\n    ></span>\r\n    }\r\n  </i>\r\n  }@else if(icon) {\r\n  <i\r\n    [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n    [ngClass]=\"getIcon(icon)\"\r\n  ></i>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #materialIcon>\r\n  @if (isCustom) {\r\n  <mat-icon\r\n    [ngStyle]=\"getImageResourceStyle(imageResource)\"\r\n    [color]=\"color ?? 'primary'\"\r\n    svgIcon=\"{{ icon }}\"\r\n  ></mat-icon>\r\n  }@else if(icon) {\r\n  <mat-icon [ngStyle]=\"getImageResourceStyle(imageResource)\" [color]=\"color ?? 'primary'\">\r\n    {{ icon }}\r\n  </mat-icon>\r\n  }\r\n</ng-template>\r\n", styles: [".custom-prime-icon{height:1rem;width:auto}:host ::ng-deep .p-badge{background-color:var(--accent-color);color:#fff;font-size:.5rem;min-width:1rem;height:1rem;line-height:1rem}:host ::ng-deep .p-overlay-badge .p-badge{transform:translate(80%,-70%)}.imageIcon{height:1rem;max-width:1rem;border-radius:.3rem}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: UiBadgeDirective, selector: "[uiBadge], [uiBadgeValue]", inputs: ["uiBadge", "uiBadgeValue"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartIconComponent, selector: "smart-icon", inputs: { iconWithoutNamespace: ["icon", "iconWithoutNamespace"], color: "color", imageResource: "imageResource" }, usesOnChanges: true, ngImport: i0, template: "@if(imageResource){\r\n<ng-container *ngTemplateOutlet=\"imageResourceIcon\" />\r\n} @else if(iconWithoutNamespace){\r\n<ng-container *ngTemplateOutlet=\"normalIcon\" />\r\n}\r\n\r\n<ng-template #imageResourceIcon>\r\n  @if(imageResource){\r\n  <div\r\n    class=\"imageResourceIcon\"\r\n    [smartTooltip]=\"imageResource.tooltip\"\r\n    [uiBadge]=\"imageResource.badge\"\r\n  >\r\n    @if(imageResource.kind === imageResourceKind.URL){\r\n    <img\r\n      [ngStyle]=\"getImageResourceStyle(imageResource)\"\r\n      class=\"imageIcon\"\r\n      [src]=\"imageResource.source\"\r\n      [alt]=\"imageResource.identifier\"\r\n    />\r\n    } @else if(imageResource.identifier){\r\n    <ng-container *ngTemplateOutlet=\"normalIcon\"></ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #normalIcon>\r\n  @if(compLib === componentLibrary.PRIMENG){\r\n  <ng-container *ngTemplateOutlet=\"primeIcon\" />\r\n  }@else {\r\n  <ng-container *ngTemplateOutlet=\"materialIcon\" />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #primeIcon>\r\n  @if (isCustom) {\r\n  <i\r\n    class=\"pi custom-prime-icon\"\r\n    [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n  >\r\n    @if(iconHtml){\r\n    <span\r\n      [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n      [innerHTML]=\"iconHtml\"\r\n    ></span>\r\n    }\r\n  </i>\r\n  }@else if(icon) {\r\n  <i\r\n    [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n    [ngClass]=\"getIcon(icon)\"\r\n  ></i>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #materialIcon>\r\n  @if (isCustom) {\r\n  <mat-icon\r\n    [ngStyle]=\"getImageResourceStyle(imageResource)\"\r\n    [color]=\"color ?? 'primary'\"\r\n    svgIcon=\"{{ icon }}\"\r\n  ></mat-icon>\r\n  }@else if(icon) {\r\n  <mat-icon [ngStyle]=\"getImageResourceStyle(imageResource)\" [color]=\"color ?? 'primary'\">\r\n    {{ icon }}\r\n  </mat-icon>\r\n  }\r\n</ng-template>\r\n", styles: [":host{display:inline-flex;min-width:1rem;width:1rem}.custom-prime-icon{height:1rem;width:auto}:host ::ng-deep .p-badge{background-color:var(--accent-color);color:#fff;font-size:.5rem;min-width:1rem;height:1rem;line-height:1rem}:host ::ng-deep .p-overlay-badge .p-badge{transform:translate(80%,-70%)}.imageIcon{height:1rem;max-width:1rem;border-radius:.3rem}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: UiBadgeDirective, selector: "[uiBadge], [uiBadgeValue]", inputs: ["uiBadge", "uiBadgeValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-icon', template: "@if(imageResource){\r\n<ng-container *ngTemplateOutlet=\"imageResourceIcon\" />\r\n} @else if(iconWithoutNamespace){\r\n<ng-container *ngTemplateOutlet=\"normalIcon\" />\r\n}\r\n\r\n<ng-template #imageResourceIcon>\r\n  @if(imageResource){\r\n  <div\r\n    class=\"imageResourceIcon\"\r\n    [smartTooltip]=\"imageResource.tooltip\"\r\n    [uiBadge]=\"imageResource.badge\"\r\n  >\r\n    @if(imageResource.kind === imageResourceKind.URL){\r\n    <img\r\n      [ngStyle]=\"getImageResourceStyle(imageResource)\"\r\n      class=\"imageIcon\"\r\n      [src]=\"imageResource.source\"\r\n      [alt]=\"imageResource.identifier\"\r\n    />\r\n    } @else if(imageResource.identifier){\r\n    <ng-container *ngTemplateOutlet=\"normalIcon\"></ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #normalIcon>\r\n  @if(compLib === componentLibrary.PRIMENG){\r\n  <ng-container *ngTemplateOutlet=\"primeIcon\" />\r\n  }@else {\r\n  <ng-container *ngTemplateOutlet=\"materialIcon\" />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #primeIcon>\r\n  @if (isCustom) {\r\n  <i\r\n    class=\"pi custom-prime-icon\"\r\n    [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n  >\r\n    @if(iconHtml){\r\n    <span\r\n      [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n      [innerHTML]=\"iconHtml\"\r\n    ></span>\r\n    }\r\n  </i>\r\n  }@else if(icon) {\r\n  <i\r\n    [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n    [ngClass]=\"getIcon(icon)\"\r\n  ></i>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #materialIcon>\r\n  @if (isCustom) {\r\n  <mat-icon\r\n    [ngStyle]=\"getImageResourceStyle(imageResource)\"\r\n    [color]=\"color ?? 'primary'\"\r\n    svgIcon=\"{{ icon }}\"\r\n  ></mat-icon>\r\n  }@else if(icon) {\r\n  <mat-icon [ngStyle]=\"getImageResourceStyle(imageResource)\" [color]=\"color ?? 'primary'\">\r\n    {{ icon }}\r\n  </mat-icon>\r\n  }\r\n</ng-template>\r\n", styles: [".custom-prime-icon{height:1rem;width:auto}:host ::ng-deep .p-badge{background-color:var(--accent-color);color:#fff;font-size:.5rem;min-width:1rem;height:1rem;line-height:1rem}:host ::ng-deep .p-overlay-badge .p-badge{transform:translate(80%,-70%)}.imageIcon{height:1rem;max-width:1rem;border-radius:.3rem}\n"] }]
+            args: [{ selector: 'smart-icon', template: "@if(imageResource){\r\n<ng-container *ngTemplateOutlet=\"imageResourceIcon\" />\r\n} @else if(iconWithoutNamespace){\r\n<ng-container *ngTemplateOutlet=\"normalIcon\" />\r\n}\r\n\r\n<ng-template #imageResourceIcon>\r\n  @if(imageResource){\r\n  <div\r\n    class=\"imageResourceIcon\"\r\n    [smartTooltip]=\"imageResource.tooltip\"\r\n    [uiBadge]=\"imageResource.badge\"\r\n  >\r\n    @if(imageResource.kind === imageResourceKind.URL){\r\n    <img\r\n      [ngStyle]=\"getImageResourceStyle(imageResource)\"\r\n      class=\"imageIcon\"\r\n      [src]=\"imageResource.source\"\r\n      [alt]=\"imageResource.identifier\"\r\n    />\r\n    } @else if(imageResource.identifier){\r\n    <ng-container *ngTemplateOutlet=\"normalIcon\"></ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #normalIcon>\r\n  @if(compLib === componentLibrary.PRIMENG){\r\n  <ng-container *ngTemplateOutlet=\"primeIcon\" />\r\n  }@else {\r\n  <ng-container *ngTemplateOutlet=\"materialIcon\" />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #primeIcon>\r\n  @if (isCustom) {\r\n  <i\r\n    class=\"pi custom-prime-icon\"\r\n    [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n  >\r\n    @if(iconHtml){\r\n    <span\r\n      [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n      [innerHTML]=\"iconHtml\"\r\n    ></span>\r\n    }\r\n  </i>\r\n  }@else if(icon) {\r\n  <i\r\n    [ngStyle]=\"mergeStyles(getImageResourceStyle(imageResource), getStyle(color))\"\r\n    [ngClass]=\"getIcon(icon)\"\r\n  ></i>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #materialIcon>\r\n  @if (isCustom) {\r\n  <mat-icon\r\n    [ngStyle]=\"getImageResourceStyle(imageResource)\"\r\n    [color]=\"color ?? 'primary'\"\r\n    svgIcon=\"{{ icon }}\"\r\n  ></mat-icon>\r\n  }@else if(icon) {\r\n  <mat-icon [ngStyle]=\"getImageResourceStyle(imageResource)\" [color]=\"color ?? 'primary'\">\r\n    {{ icon }}\r\n  </mat-icon>\r\n  }\r\n</ng-template>\r\n", styles: [":host{display:inline-flex;min-width:1rem;width:1rem}.custom-prime-icon{height:1rem;width:auto}:host ::ng-deep .p-badge{background-color:var(--accent-color);color:#fff;font-size:.5rem;min-width:1rem;height:1rem;line-height:1rem}:host ::ng-deep .p-overlay-badge .p-badge{transform:translate(80%,-70%)}.imageIcon{height:1rem;max-width:1rem;border-radius:.3rem}\n"] }]
         }], ctorParameters: () => [{ type: SmartIconService }, { type: i0.ChangeDetectorRef }, { type: i2.DomSanitizer }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -3361,13 +3384,18 @@ class UiActionButtonComponent {
         this.compLib = compLib ?? ComponentLibrary.PRIMENG;
     }
     ngOnInit() {
-        if (!this.descriptor) {
-            this.descriptor = {
-                title: this.code ?? 'UNDEFINED_BUTTON',
-                color: 'primary',
-                type: UiActionButtonType.FLAT,
-            };
-        }
+        const defaults = {
+            title: this.code ?? 'UNDEFINED_BUTTON',
+            color: 'primary',
+            type: UiActionButtonType.NORMAL,
+        };
+        this.descriptor = {
+            ...defaults,
+            ...this.descriptor,
+            title: this.descriptor?.title ?? defaults.title,
+            color: this.descriptor?.color ?? defaults.color,
+            type: this.descriptor?.type ?? defaults.type,
+        };
         this.buildMainActionModel();
     }
     ngOnChanges(changes) {
@@ -3530,12 +3558,15 @@ class UiActionButtonComponent {
         return (this.descriptor.iconPosition === IconPosition.POST &&
             (this.descriptor.icon != null || this.descriptor.iconResource != null));
     }
+    getColor() {
+        return this.descriptor?.color || 'text';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionButtonComponent, selector: "ui-action-button", inputs: { disabled: "disabled", descriptor: "descriptor", code: "code", addedCssClass: "addedCssClass", addBasicClasses: "addBasicClasses" }, outputs: { actionClick: "actionClick", actionDoubleClick: "actionDoubleClick" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\r\n\r\n<ng-template #buttonWithBadge>\r\n  @if (descriptor && descriptor.badge) {\r\n    <ui-badge [descriptor]=\"descriptor.badge\">\r\n      <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n    </ui-badge>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonTemplate>\r\n  @if (compLib === componentLibrary.PRIMENG) {\r\n    <button\r\n      pButton\r\n      pRipple\r\n      [smartTooltip]=\"descriptor.tooltip\"\r\n      [disabled]=\"!!disabled\"\r\n      (click)=\"onActionClicked($event, mainActionModel)\"\r\n      (dblclick)=\"onActionDoubleClicked($event)\"\r\n      [autofocus]=\"false\"\r\n      [ngStyle]=\"calcStyle(descriptor.style)\"\r\n      [ngClass]=\"getCombinedClasses()\"\r\n      class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n      type=\"button\"\r\n      [attr.data-testid]=\"code ?? null\"\r\n    >\r\n      <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n    </button>\r\n  } @else {\r\n    <button\r\n      mat-button\r\n      [smartTooltip]=\"descriptor.tooltip\"\r\n      [color]=\"descriptor.color\"\r\n      [disabled]=\"!!disabled\"\r\n      (click)=\"onActionClicked($event, mainActionModel)\"\r\n      (dblclick)=\"onActionDoubleClicked($event)\"\r\n      [ngStyle]=\"calcStyle(descriptor.style)\"\r\n      [ngClass]=\"getCombinedClasses()\"\r\n      class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n      type=\"button\"\r\n      [attr.data-testid]=\"code ?? null\"\r\n    >\r\n      <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #text>\r\n  @if (renderPre() || renderEmpty()) {\r\n    <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n  }\r\n  {{ descriptor.title }}\r\n  @if (renderPost()) {\r\n    <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonIcon>\r\n  @if (renderEmpty()) {\r\n    <smart-icon></smart-icon>\r\n  } @else if (descriptor.iconResource) {\r\n    <smart-icon [imageResource]=\"descriptor.iconResource\"></smart-icon>\r\n  } @else {\r\n    <smart-icon\r\n      [icon]=\"descriptor.icon\"\r\n      [color]=\"descriptor.iconColor ?? descriptor.color\"\r\n    ></smart-icon>\r\n  }\r\n</ng-template>\r\n", styles: [":host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mdc-text-button-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiBadgeComponent, selector: "ui-badge", inputs: ["descriptor", "inputValue"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionButtonComponent, selector: "ui-action-button", inputs: { disabled: "disabled", descriptor: "descriptor", code: "code", addedCssClass: "addedCssClass", addBasicClasses: "addBasicClasses" }, outputs: { actionClick: "actionClick", actionDoubleClick: "actionDoubleClick" }, usesOnChanges: true, ngImport: i0, template: "@if (descriptor.type === 'SEPARATOR') {\r\n  <div class=\"separator\">\r\n    @if (descriptor.title) {\r\n      <span class=\"separator-label\" [style.color]=\"'var(--' + getColor() + '-color)'\">\r\n        {{ descriptor.title }}\r\n      </span>\r\n    }\r\n    <hr class=\"separator-line\" [style.border-top-color]=\"'var(--' + getColor() + '-color)'\" />\r\n  </div>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\r\n}\r\n\r\n<ng-template #buttonWithBadge>\r\n  @if (descriptor && descriptor.badge) {\r\n    <ui-badge [descriptor]=\"descriptor.badge\">\r\n      <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n    </ui-badge>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonTemplate>\r\n  @if (compLib === componentLibrary.PRIMENG) {\r\n    <button\r\n      pButton\r\n      pRipple\r\n      [smartTooltip]=\"descriptor.tooltip\"\r\n      [disabled]=\"!!disabled\"\r\n      (click)=\"onActionClicked($event, mainActionModel)\"\r\n      (dblclick)=\"onActionDoubleClicked($event)\"\r\n      [autofocus]=\"false\"\r\n      [ngStyle]=\"calcStyle(descriptor.style)\"\r\n      [ngClass]=\"getCombinedClasses()\"\r\n      class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n      type=\"button\"\r\n      [attr.data-testid]=\"code ?? null\"\r\n    >\r\n      <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n    </button>\r\n  } @else {\r\n    <button\r\n      mat-button\r\n      [smartTooltip]=\"descriptor.tooltip\"\r\n      [color]=\"descriptor.color\"\r\n      [disabled]=\"!!disabled\"\r\n      (click)=\"onActionClicked($event, mainActionModel)\"\r\n      (dblclick)=\"onActionDoubleClicked($event)\"\r\n      [ngStyle]=\"calcStyle(descriptor.style)\"\r\n      [ngClass]=\"getCombinedClasses()\"\r\n      class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n      type=\"button\"\r\n      [attr.data-testid]=\"code ?? null\"\r\n    >\r\n      <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #text>\r\n  @if (renderPre() || renderEmpty()) {\r\n    <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n  }\r\n  {{ descriptor.title }}\r\n  @if (renderPost()) {\r\n    <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonIcon>\r\n  @if (renderEmpty()) {\r\n    <smart-icon></smart-icon>\r\n  } @else if (descriptor.iconResource) {\r\n    <smart-icon [imageResource]=\"descriptor.iconResource\"></smart-icon>\r\n  } @else {\r\n    <smart-icon\r\n      [icon]=\"descriptor.icon\"\r\n      [color]=\"descriptor.iconColor ?? descriptor.color\"\r\n    ></smart-icon>\r\n  }\r\n</ng-template>\r\n", styles: [":host{--text-color: black}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mdc-text-button-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}.separator{display:flex;flex-direction:column;padding:0 .5rem;width:100%}.separator-label{font-size:.7rem;color:#888;padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid #e2e5e9;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiBadgeComponent, selector: "ui-badge", inputs: ["descriptor", "inputValue"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-action-button', template: "<ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\r\n\r\n<ng-template #buttonWithBadge>\r\n  @if (descriptor && descriptor.badge) {\r\n    <ui-badge [descriptor]=\"descriptor.badge\">\r\n      <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n    </ui-badge>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonTemplate>\r\n  @if (compLib === componentLibrary.PRIMENG) {\r\n    <button\r\n      pButton\r\n      pRipple\r\n      [smartTooltip]=\"descriptor.tooltip\"\r\n      [disabled]=\"!!disabled\"\r\n      (click)=\"onActionClicked($event, mainActionModel)\"\r\n      (dblclick)=\"onActionDoubleClicked($event)\"\r\n      [autofocus]=\"false\"\r\n      [ngStyle]=\"calcStyle(descriptor.style)\"\r\n      [ngClass]=\"getCombinedClasses()\"\r\n      class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n      type=\"button\"\r\n      [attr.data-testid]=\"code ?? null\"\r\n    >\r\n      <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n    </button>\r\n  } @else {\r\n    <button\r\n      mat-button\r\n      [smartTooltip]=\"descriptor.tooltip\"\r\n      [color]=\"descriptor.color\"\r\n      [disabled]=\"!!disabled\"\r\n      (click)=\"onActionClicked($event, mainActionModel)\"\r\n      (dblclick)=\"onActionDoubleClicked($event)\"\r\n      [ngStyle]=\"calcStyle(descriptor.style)\"\r\n      [ngClass]=\"getCombinedClasses()\"\r\n      class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n      type=\"button\"\r\n      [attr.data-testid]=\"code ?? null\"\r\n    >\r\n      <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #text>\r\n  @if (renderPre() || renderEmpty()) {\r\n    <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n  }\r\n  {{ descriptor.title }}\r\n  @if (renderPost()) {\r\n    <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonIcon>\r\n  @if (renderEmpty()) {\r\n    <smart-icon></smart-icon>\r\n  } @else if (descriptor.iconResource) {\r\n    <smart-icon [imageResource]=\"descriptor.iconResource\"></smart-icon>\r\n  } @else {\r\n    <smart-icon\r\n      [icon]=\"descriptor.icon\"\r\n      [color]=\"descriptor.iconColor ?? descriptor.color\"\r\n    ></smart-icon>\r\n  }\r\n</ng-template>\r\n", styles: [":host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mdc-text-button-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}\n"] }]
+            args: [{ selector: 'ui-action-button', template: "@if (descriptor.type === 'SEPARATOR') {\r\n  <div class=\"separator\">\r\n    @if (descriptor.title) {\r\n      <span class=\"separator-label\" [style.color]=\"'var(--' + getColor() + '-color)'\">\r\n        {{ descriptor.title }}\r\n      </span>\r\n    }\r\n    <hr class=\"separator-line\" [style.border-top-color]=\"'var(--' + getColor() + '-color)'\" />\r\n  </div>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\r\n}\r\n\r\n<ng-template #buttonWithBadge>\r\n  @if (descriptor && descriptor.badge) {\r\n    <ui-badge [descriptor]=\"descriptor.badge\">\r\n      <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n    </ui-badge>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonTemplate>\r\n  @if (compLib === componentLibrary.PRIMENG) {\r\n    <button\r\n      pButton\r\n      pRipple\r\n      [smartTooltip]=\"descriptor.tooltip\"\r\n      [disabled]=\"!!disabled\"\r\n      (click)=\"onActionClicked($event, mainActionModel)\"\r\n      (dblclick)=\"onActionDoubleClicked($event)\"\r\n      [autofocus]=\"false\"\r\n      [ngStyle]=\"calcStyle(descriptor.style)\"\r\n      [ngClass]=\"getCombinedClasses()\"\r\n      class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n      type=\"button\"\r\n      [attr.data-testid]=\"code ?? null\"\r\n    >\r\n      <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n    </button>\r\n  } @else {\r\n    <button\r\n      mat-button\r\n      [smartTooltip]=\"descriptor.tooltip\"\r\n      [color]=\"descriptor.color\"\r\n      [disabled]=\"!!disabled\"\r\n      (click)=\"onActionClicked($event, mainActionModel)\"\r\n      (dblclick)=\"onActionDoubleClicked($event)\"\r\n      [ngStyle]=\"calcStyle(descriptor.style)\"\r\n      [ngClass]=\"getCombinedClasses()\"\r\n      class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n      type=\"button\"\r\n      [attr.data-testid]=\"code ?? null\"\r\n    >\r\n      <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #text>\r\n  @if (renderPre() || renderEmpty()) {\r\n    <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n  }\r\n  {{ descriptor.title }}\r\n  @if (renderPost()) {\r\n    <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonIcon>\r\n  @if (renderEmpty()) {\r\n    <smart-icon></smart-icon>\r\n  } @else if (descriptor.iconResource) {\r\n    <smart-icon [imageResource]=\"descriptor.iconResource\"></smart-icon>\r\n  } @else {\r\n    <smart-icon\r\n      [icon]=\"descriptor.icon\"\r\n      [color]=\"descriptor.iconColor ?? descriptor.color\"\r\n    ></smart-icon>\r\n  }\r\n</ng-template>\r\n", styles: [":host{--text-color: black}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mdc-text-button-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}.separator{display:flex;flex-direction:column;padding:0 .5rem;width:100%}.separator-label{font-size:.7rem;color:#888;padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid #e2e5e9;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -6414,76 +6445,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }] }, { type: i1$4.MatSnackBar }, { type: SmartViewContextService }] });
 
 const SUBMENU_POSITIONS = [
-    // Top-left of trigger → aligns top-left of overlay
-    //   {
-    //     originX: 'start',
-    //     originY: 'top',
-    //     overlayX: 'start',
-    //     overlayY: 'top',
-    //   },
-    //   // Bottom-left of trigger → aligns bottom-left of overlay
-    //   {
-    //     originX: 'start',
-    //     originY: 'bottom',
-    //     overlayX: 'start',
-    //     overlayY: 'bottom',
-    //   },
-    //   // Top-right of trigger → aligns top-right of overlay
-    //   {
-    //     originX: 'end',
-    //     originY: 'top',
-    //     overlayX: 'end',
-    //     overlayY: 'top',
-    //   },
-    //   // Bottom-right of trigger → aligns bottom-right of overlay
-    //   {
-    //     originX: 'end',
-    //     originY: 'bottom',
-    //     overlayX: 'end',
-    //     overlayY: 'bottom',
-    //   },
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'top',
-    },
-    {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'top',
-    },
+    { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
+    { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
 ];
+function getSubmenuPositions(direction) {
+    if (!direction) {
+        return SUBMENU_POSITIONS;
+    }
+    return MENU_POSITIONS[direction];
+}
+const MENU_POSITIONS = {
+    [MenuOpenDirection.BELOW_LEFT]: [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+    ],
+    [MenuOpenDirection.BELOW_RIGHT]: [
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+    ],
+    [MenuOpenDirection.ABOVE_LEFT]: [
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+    ],
+    [MenuOpenDirection.ABOVE_RIGHT]: [
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+    ],
+    [MenuOpenDirection.RIGHT_TOP]: [
+        { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
+        { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
+        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
+    ],
+    [MenuOpenDirection.RIGHT_BOTTOM]: [
+        { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
+        { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
+    ],
+    [MenuOpenDirection.LEFT_TOP]: [
+        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
+        { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
+        { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
+    ],
+    [MenuOpenDirection.LEFT_BOTTOM]: [
+        { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
+        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
+        { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
+    ],
+};
 const ROOT_MENU_POSITIONS = [
-    // Below-right of trigger
-    {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-    }, // Below-left of trigger
-    {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'top',
-    },
-    // Above-left of trigger
-    {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'bottom',
-    },
-    // Above-right of trigger
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-    },
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
 ];
+function getMenuPositions(direction) {
+    if (!direction) {
+        return ROOT_MENU_POSITIONS;
+    }
+    return MENU_POSITIONS[direction];
+}
 
 class UiMenuService {
     constructor() {
@@ -6518,6 +6538,7 @@ class ClickMenuComponent {
         this.submenuOpenMap = new Map();
         this.subActions = [];
         this.hasCheckedChildren = false;
+        this.hasSubActionSiblings = false;
         this.compLib = compLib ?? ComponentLibrary.PRIMENG;
         if (this.compLib === ComponentLibrary.PRIMENG) {
             this.icon = 'chevron-right';
@@ -6543,7 +6564,7 @@ class ClickMenuComponent {
         if (changes['triggerAction']) {
             const trigger = changes['triggerAction'].currentValue;
             const previousTrigger = changes['triggerAction'].previousValue;
-            this.subActions = trigger?.subActions ?? [];
+            this.subActions = this.normalizeSubActions(trigger?.subActions ?? []);
             if (this.isOpen && previousTrigger) {
                 const hasSubActionsChanged = this.hasSubActionsChanged(previousTrigger?.subActions, trigger?.subActions);
                 if (hasSubActionsChanged) {
@@ -6621,7 +6642,9 @@ class ClickMenuComponent {
             this.menuService.closeAllMenus();
         }
         let triggerElement = event.currentTarget;
-        var positions = this.isSubmenu ? SUBMENU_POSITIONS : ROOT_MENU_POSITIONS;
+        var positions = this.isSubmenu
+            ? getSubmenuPositions(this.menuOpenDirection)
+            : getMenuPositions(this.triggerAction?.descriptor?.menu?.openDirection);
         let positionStrategy = this.overlayPositionBuilder
             .flexibleConnectedTo(triggerElement)
             .withFlexibleDimensions(false)
@@ -6663,12 +6686,38 @@ class ClickMenuComponent {
             }
         });
     }
+    normalizeSubActions(actions) {
+        this.hasSubActionSiblings = actions.some((a) => a.subActions && a.subActions.length > 0);
+        const anyHasIcon = actions.some((a) => a.descriptor?.icon || a.descriptor?.iconResource);
+        const lastSetPosition = [...actions].reverse().find((a) => a.descriptor?.iconPosition != null)?.descriptor
+            ?.iconPosition ?? IconPosition.PRE;
+        return actions.map((action) => {
+            const hasIcon = !!(action.descriptor?.icon || action.descriptor?.iconResource);
+            return {
+                ...action,
+                descriptor: action.descriptor
+                    ? {
+                        ...action.descriptor,
+                        type: UiActionButtonType.NORMAL,
+                        iconPosition: anyHasIcon
+                            ? hasIcon
+                                ? (action.descriptor.iconPosition ?? lastSetPosition)
+                                : IconPosition.EMPTY
+                            : action.descriptor.iconPosition,
+                    }
+                    : {
+                        type: UiActionButtonType.NORMAL,
+                        iconPosition: anyHasIcon ? IconPosition.EMPTY : undefined,
+                    },
+            };
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ClickMenuComponent, deps: [{ token: UiMenuService }, { token: i2$2.Overlay }, { token: i0.ViewContainerRef }, { token: i2$2.OverlayPositionBuilder }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: { triggerAction: "triggerAction", isSubmenu: "isSubmenu" }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu) {\r\n  <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n    <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n    <smart-icon [icon]=\"icon\" color=\"black\"></smart-icon>\r\n  </div>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n  <ul class=\"ui-tiered-menu sb4-menu-panel\">\r\n    <li\r\n      *ngFor=\"let action of subActions\"\r\n      class=\"hoverEffect\"\r\n      [class.disabled]=\"action.disabled\"\r\n      (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n    >\r\n      @if (action.subActions && action.subActions.length > 0) {\r\n        <ui-tiered-menu\r\n          #submenu\r\n          [triggerAction]=\"action\"\r\n          [isSubmenu]=\"true\"\r\n          [subActions]=\"action.subActions!\"\r\n          (actionClick)=\"actionClick.emit($event)\"\r\n          (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n        ></ui-tiered-menu>\r\n      } @else {\r\n        <ui-action-button\r\n          [descriptor]=\"action.descriptor!\"\r\n          [code]=\"action.code\"\r\n          [disabled]=\"!!action.disabled\"\r\n          (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n        ></ui-action-button>\r\n      }\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n  <ui-action-button\r\n    [descriptor]=\"triggerAction.descriptor!\"\r\n    [code]=\"triggerAction.code\"\r\n    [disabled]=\"!!triggerAction.disabled\"\r\n    (actionClick)=\"toggleMenu($event.event)\"\r\n    [class.submenuTrigger]=\"isSubmenu\"\r\n  >\r\n  </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: { triggerAction: "triggerAction", isSubmenu: "isSubmenu", menuOpenDirection: "menuOpenDirection" }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu) {\r\n  <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n    <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n    <smart-icon [icon]=\"icon\" color=\"black\"></smart-icon>\r\n  </div>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n  <ul class=\"ui-tiered-menu sb4-menu-panel\">\r\n    <li\r\n      *ngFor=\"let action of subActions\"\r\n      class=\"hoverEffect\"\r\n      [class.disabled]=\"action.disabled\"\r\n      (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n    >\r\n      @if (action.subActions && action.subActions.length > 0) {\r\n        <ui-tiered-menu\r\n          #submenu\r\n          [triggerAction]=\"action\"\r\n          [isSubmenu]=\"true\"\r\n          [subActions]=\"action.subActions!\"\r\n          [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n          (actionClick)=\"actionClick.emit($event)\"\r\n          (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n        ></ui-tiered-menu>\r\n      } @else {\r\n        <ui-action-button\r\n          [descriptor]=\"action.descriptor!\"\r\n          [code]=\"action.code\"\r\n          [disabled]=\"!!action.disabled\"\r\n          (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n        ></ui-action-button>\r\n        <smart-icon></smart-icon>\r\n      }\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n  <ui-action-button\r\n    [descriptor]=\"triggerAction.descriptor!\"\r\n    [code]=\"triggerAction.code\"\r\n    [disabled]=\"!!triggerAction.disabled\"\r\n    (actionClick)=\"toggleMenu($event.event)\"\r\n    [class.submenuTrigger]=\"isSubmenu\"\r\n  >\r\n  </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}:host ::ng-deep .menu-row{display:flex;flex-direction:row;align-items:center}:host ::ng-deep .menu-row-reverse{display:flex;flex-direction:row-reverse;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ClickMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tiered-menu', template: "@if (isSubmenu) {\r\n  <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n    <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n    <smart-icon [icon]=\"icon\" color=\"black\"></smart-icon>\r\n  </div>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n  <ul class=\"ui-tiered-menu sb4-menu-panel\">\r\n    <li\r\n      *ngFor=\"let action of subActions\"\r\n      class=\"hoverEffect\"\r\n      [class.disabled]=\"action.disabled\"\r\n      (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n    >\r\n      @if (action.subActions && action.subActions.length > 0) {\r\n        <ui-tiered-menu\r\n          #submenu\r\n          [triggerAction]=\"action\"\r\n          [isSubmenu]=\"true\"\r\n          [subActions]=\"action.subActions!\"\r\n          (actionClick)=\"actionClick.emit($event)\"\r\n          (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n        ></ui-tiered-menu>\r\n      } @else {\r\n        <ui-action-button\r\n          [descriptor]=\"action.descriptor!\"\r\n          [code]=\"action.code\"\r\n          [disabled]=\"!!action.disabled\"\r\n          (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n        ></ui-action-button>\r\n      }\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n  <ui-action-button\r\n    [descriptor]=\"triggerAction.descriptor!\"\r\n    [code]=\"triggerAction.code\"\r\n    [disabled]=\"!!triggerAction.disabled\"\r\n    (actionClick)=\"toggleMenu($event.event)\"\r\n    [class.submenuTrigger]=\"isSubmenu\"\r\n  >\r\n  </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}\n"] }]
+            args: [{ selector: 'ui-tiered-menu', template: "@if (isSubmenu) {\r\n  <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n    <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n    <smart-icon [icon]=\"icon\" color=\"black\"></smart-icon>\r\n  </div>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n  <ul class=\"ui-tiered-menu sb4-menu-panel\">\r\n    <li\r\n      *ngFor=\"let action of subActions\"\r\n      class=\"hoverEffect\"\r\n      [class.disabled]=\"action.disabled\"\r\n      (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n    >\r\n      @if (action.subActions && action.subActions.length > 0) {\r\n        <ui-tiered-menu\r\n          #submenu\r\n          [triggerAction]=\"action\"\r\n          [isSubmenu]=\"true\"\r\n          [subActions]=\"action.subActions!\"\r\n          [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n          (actionClick)=\"actionClick.emit($event)\"\r\n          (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n        ></ui-tiered-menu>\r\n      } @else {\r\n        <ui-action-button\r\n          [descriptor]=\"action.descriptor!\"\r\n          [code]=\"action.code\"\r\n          [disabled]=\"!!action.disabled\"\r\n          (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n        ></ui-action-button>\r\n        <smart-icon></smart-icon>\r\n      }\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n  <ui-action-button\r\n    [descriptor]=\"triggerAction.descriptor!\"\r\n    [code]=\"triggerAction.code\"\r\n    [disabled]=\"!!triggerAction.disabled\"\r\n    (actionClick)=\"toggleMenu($event.event)\"\r\n    [class.submenuTrigger]=\"isSubmenu\"\r\n  >\r\n  </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}:host ::ng-deep .menu-row{display:flex;flex-direction:row;align-items:center}:host ::ng-deep .menu-row-reverse{display:flex;flex-direction:row-reverse;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: UiMenuService }, { type: i2$2.Overlay }, { type: i0.ViewContainerRef }, { type: i2$2.OverlayPositionBuilder }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -6684,6 +6733,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }], isSubmenu: [{
                 type: Input
+            }], menuOpenDirection: [{
+                type: Input
             }], actionClick: [{
                 type: Output
             }], submenuOpened: [{
@@ -6736,7 +6787,7 @@ class HoverMenuComponent {
         if (changes['triggerAction']) {
             const trigger = changes['triggerAction'].currentValue;
             const previousTrigger = changes['triggerAction'].previousValue;
-            this.subActions = trigger?.subActions ?? [];
+            this.subActions = this.normalizeSubActions(trigger?.subActions ?? []);
             if (this.isOpen && previousTrigger) {
                 const hasSubActionsChanged = this.hasSubActionsChanged(previousTrigger?.subActions, trigger?.subActions);
                 if (hasSubActionsChanged) {
@@ -6814,7 +6865,9 @@ class HoverMenuComponent {
             this.menuService.closeAllMenus();
         }
         let triggerElement = event.currentTarget;
-        var positions = this.isSubmenu ? SUBMENU_POSITIONS : ROOT_MENU_POSITIONS;
+        var positions = this.isSubmenu
+            ? getSubmenuPositions(this.menuOpenDirection)
+            : getMenuPositions(this.triggerAction?.descriptor?.menu?.openDirection);
         let positionStrategy = this.overlayPositionBuilder
             .flexibleConnectedTo(triggerElement)
             .withFlexibleDimensions(false)
@@ -6856,12 +6909,32 @@ class HoverMenuComponent {
             }
         });
     }
+    normalizeSubActions(actions) {
+        const anyHasIcon = actions.some((a) => a.descriptor?.icon || a.descriptor?.iconResource);
+        return actions.map((action) => ({
+            ...action,
+            descriptor: action.descriptor
+                ? {
+                    ...action.descriptor,
+                    type: UiActionButtonType.NORMAL,
+                    iconPosition: anyHasIcon
+                        ? action.descriptor.icon || action.descriptor.iconResource
+                            ? action.descriptor.iconPosition
+                            : IconPosition.EMPTY
+                        : action.descriptor.iconPosition,
+                }
+                : {
+                    type: UiActionButtonType.NORMAL,
+                    iconPosition: anyHasIcon ? IconPosition.EMPTY : undefined,
+                },
+        }));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HoverMenuComponent, deps: [{ token: UiMenuService }, { token: i2$2.Overlay }, { token: i0.ViewContainerRef }, { token: i2$2.OverlayPositionBuilder }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: { triggerAction: "triggerAction", isSubmenu: "isSubmenu" }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu) {\r\n  <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n    <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n    <smart-icon [icon]=\"icon\" color=\"black\"></smart-icon>\r\n  </div>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n  <ul class=\"ui-hover-menu sb4-menu-panel\">\r\n    <li\r\n      *ngFor=\"let action of subActions\"\r\n      class=\"hoverEffect\"\r\n      [class.disabled]=\"action.disabled\"\r\n      (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n    >\r\n      @if (action.subActions && action.subActions.length > 0) {\r\n        <ui-hover-menu\r\n          #submenu\r\n          [triggerAction]=\"action\"\r\n          [isSubmenu]=\"true\"\r\n          [subActions]=\"action.subActions!\"\r\n          (actionClick)=\"actionClick.emit($event)\"\r\n          (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n        ></ui-hover-menu>\r\n      } @else {\r\n        <ui-action-button\r\n          [descriptor]=\"action.descriptor!\"\r\n          [code]=\"action.code\"\r\n          [disabled]=\"!!action.disabled\"\r\n          (actionClick)=\"onActionClick(action)\"\r\n        ></ui-action-button>\r\n      }\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n  <ui-action-button\r\n    [descriptor]=\"triggerAction.descriptor!\"\r\n    [code]=\"triggerAction.code\"\r\n    [disabled]=\"!!triggerAction.disabled\"\r\n    (mouseenter)=\"openMenu($event)\"\r\n    (actionClick)=\"onActionClick(triggerAction)\"\r\n    [class.submenuTrigger]=\"isSubmenu\"\r\n  >\r\n  </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: { triggerAction: "triggerAction", isSubmenu: "isSubmenu", menuOpenDirection: "menuOpenDirection" }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n  @if (isSubmenu) {\r\n    <smart-icon [icon]=\"icon\" color=\"black\"></smart-icon>\r\n  } @else {\r\n    <smart-icon></smart-icon>\r\n  }\r\n</div>\r\n\r\n<ng-template #menuTemplate>\r\n  <ul class=\"ui-hover-menu sb4-menu-panel\">\r\n    <li\r\n      *ngFor=\"let action of subActions\"\r\n      class=\"hoverEffect\"\r\n      [class.disabled]=\"action.disabled\"\r\n      (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n    >\r\n      @if (action.subActions && action.subActions.length > 0) {\r\n        <ui-hover-menu\r\n          #submenu\r\n          [triggerAction]=\"action\"\r\n          [isSubmenu]=\"true\"\r\n          [subActions]=\"action.subActions!\"\r\n          [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n          (actionClick)=\"actionClick.emit($event)\"\r\n          (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n        ></ui-hover-menu>\r\n      } @else {\r\n        <ui-action-button\r\n          [descriptor]=\"action.descriptor!\"\r\n          [code]=\"action.code\"\r\n          [disabled]=\"!!action.disabled\"\r\n          (actionClick)=\"onActionClick(action)\"\r\n        ></ui-action-button>\r\n      }\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n  <ui-action-button\r\n    [descriptor]=\"triggerAction.descriptor!\"\r\n    [code]=\"triggerAction.code\"\r\n    [disabled]=\"!!triggerAction.disabled\"\r\n    (mouseenter)=\"openMenu($event)\"\r\n    (actionClick)=\"onActionClick(triggerAction)\"\r\n    [class.submenuTrigger]=\"isSubmenu\"\r\n  >\r\n  </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HoverMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-hover-menu', template: "@if (isSubmenu) {\r\n  <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n    <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n    <smart-icon [icon]=\"icon\" color=\"black\"></smart-icon>\r\n  </div>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n  <ul class=\"ui-hover-menu sb4-menu-panel\">\r\n    <li\r\n      *ngFor=\"let action of subActions\"\r\n      class=\"hoverEffect\"\r\n      [class.disabled]=\"action.disabled\"\r\n      (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n    >\r\n      @if (action.subActions && action.subActions.length > 0) {\r\n        <ui-hover-menu\r\n          #submenu\r\n          [triggerAction]=\"action\"\r\n          [isSubmenu]=\"true\"\r\n          [subActions]=\"action.subActions!\"\r\n          (actionClick)=\"actionClick.emit($event)\"\r\n          (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n        ></ui-hover-menu>\r\n      } @else {\r\n        <ui-action-button\r\n          [descriptor]=\"action.descriptor!\"\r\n          [code]=\"action.code\"\r\n          [disabled]=\"!!action.disabled\"\r\n          (actionClick)=\"onActionClick(action)\"\r\n        ></ui-action-button>\r\n      }\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n  <ui-action-button\r\n    [descriptor]=\"triggerAction.descriptor!\"\r\n    [code]=\"triggerAction.code\"\r\n    [disabled]=\"!!triggerAction.disabled\"\r\n    (mouseenter)=\"openMenu($event)\"\r\n    (actionClick)=\"onActionClick(triggerAction)\"\r\n    [class.submenuTrigger]=\"isSubmenu\"\r\n  >\r\n  </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}\n"] }]
+            args: [{ selector: 'ui-hover-menu', template: "<div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n  @if (isSubmenu) {\r\n    <smart-icon [icon]=\"icon\" color=\"black\"></smart-icon>\r\n  } @else {\r\n    <smart-icon></smart-icon>\r\n  }\r\n</div>\r\n\r\n<ng-template #menuTemplate>\r\n  <ul class=\"ui-hover-menu sb4-menu-panel\">\r\n    <li\r\n      *ngFor=\"let action of subActions\"\r\n      class=\"hoverEffect\"\r\n      [class.disabled]=\"action.disabled\"\r\n      (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n    >\r\n      @if (action.subActions && action.subActions.length > 0) {\r\n        <ui-hover-menu\r\n          #submenu\r\n          [triggerAction]=\"action\"\r\n          [isSubmenu]=\"true\"\r\n          [subActions]=\"action.subActions!\"\r\n          [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n          (actionClick)=\"actionClick.emit($event)\"\r\n          (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n        ></ui-hover-menu>\r\n      } @else {\r\n        <ui-action-button\r\n          [descriptor]=\"action.descriptor!\"\r\n          [code]=\"action.code\"\r\n          [disabled]=\"!!action.disabled\"\r\n          (actionClick)=\"onActionClick(action)\"\r\n        ></ui-action-button>\r\n      }\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n  <ui-action-button\r\n    [descriptor]=\"triggerAction.descriptor!\"\r\n    [code]=\"triggerAction.code\"\r\n    [disabled]=\"!!triggerAction.disabled\"\r\n    (mouseenter)=\"openMenu($event)\"\r\n    (actionClick)=\"onActionClick(triggerAction)\"\r\n    [class.submenuTrigger]=\"isSubmenu\"\r\n  >\r\n  </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}\n"] }]
         }], ctorParameters: () => [{ type: UiMenuService }, { type: i2$2.Overlay }, { type: i0.ViewContainerRef }, { type: i2$2.OverlayPositionBuilder }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -6877,6 +6950,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }], isSubmenu: [{
                 type: Input
+            }], menuOpenDirection: [{
+                type: Input
             }], actionClick: [{
                 type: Output
             }], submenuOpened: [{
@@ -6928,7 +7003,6 @@ class UiActionToolbarComponent {
         this.compLib = compLib;
         this._destroy$ = new Subject();
         this.componentLibrary = ComponentLibrary; // Expose the enum to the template
-        this.triggerType = MenuTriggerType;
         this.pressedButtonActive = true;
         this.scrollOnWrap = false;
         this.isScrollable = false;
@@ -7024,7 +7098,7 @@ class UiActionToolbarComponent {
     scheduleActions(uiActionModels) {
         this.clearSchedule();
         uiActionModels.forEach((uiActionModel) => {
-            let uiAction = uiActionModel.uiAction;
+            var uiAction = uiActionModel.uiAction;
             if (!uiAction.code ||
                 uiAction.disabled ||
                 !uiAction.schedule?.intervalSeconds ||
@@ -7032,15 +7106,21 @@ class UiActionToolbarComponent {
                 uiAction.subActions?.length) {
                 return;
             }
-            let intervalInMs = uiAction.schedule.intervalSeconds * 1000;
-            let sub = interval(intervalInMs)
+            var intervalInMs = uiAction.schedule.intervalSeconds * 1000;
+            var sub = interval(intervalInMs)
                 .pipe(takeUntil(this._destroy$))
                 .subscribe(() => {
-                uiActionModel.uiAction.params = {
-                    ...uiActionModel.uiAction.params,
-                    scheduled: true,
+                var scheduledUiActionModel = {
+                    ...uiActionModel,
+                    uiAction: {
+                        ...uiActionModel.uiAction,
+                        params: {
+                            ...uiActionModel.uiAction.params,
+                            scheduled: true,
+                        },
+                    },
                 };
-                this.fireAction(uiActionModel);
+                this.fireAction(scheduledUiActionModel);
             });
             this.schedules.set(uiAction.code, sub);
         });
@@ -7200,12 +7280,15 @@ class UiActionToolbarComponent {
     get isVertical() {
         return this.toolbarPropertes?.direction === ToolbarDirection.VERTICAL;
     }
+    get triggerType() {
+        return MenuTriggerType;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionToolbarComponent, deps: [{ token: UiActionService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: COMPONENT_LIBRARY }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: "uiActionModels", uiActionDescriptorService: "uiActionDescriptorService", id: "id", scrollOnWrap: "scrollOnWrap", toolbarPropertes: "toolbarPropertes" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.code === 'themeSelector') {\r\n      <theme-selector [model]=\"uiActionModel\"></theme-selector>\r\n    } @else if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"menuTypes; context: { uiActionModel: uiActionModel }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [code]=\"uiActionModel.uiAction.code\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<ng-template #menuTypes let-uiActionModel=\"uiActionModel\">\r\n  @if (uiActionModel?.uiAction?.descriptor?.menuTriggerType == triggerType.HOVER) {\r\n    <ui-hover-menu\r\n      #menu\r\n      [triggerAction]=\"uiActionModel.uiAction\"\r\n      [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n      (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n    ></ui-hover-menu>\r\n  } @else {\r\n    <ui-tiered-menu\r\n      #menu\r\n      [triggerAction]=\"uiActionModel.uiAction\"\r\n      [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n      (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n    ></ui-tiered-menu>\r\n  }\r\n</ng-template>\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["model"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: "uiActionModels", uiActionDescriptorService: "uiActionDescriptorService", id: "id", scrollOnWrap: "scrollOnWrap", toolbarPropertes: "toolbarPropertes" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.code === 'themeSelector') {\r\n      <theme-selector [model]=\"uiActionModel\"></theme-selector>\r\n    } @else if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"menuTypes; context: { uiActionModel: uiActionModel }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [code]=\"uiActionModel.uiAction.code\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<ng-template #menuTypes let-uiActionModel=\"uiActionModel\">\r\n  @switch (uiActionModel?.uiAction?.descriptor?.menu?.triggerType) {\r\n    @case (triggerType.HOVER) {\r\n      <ui-hover-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-hover-menu>\r\n    }\r\n    @case (triggerType.CLICK) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    }\r\n    @default {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["model"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-ui-action-toolbar', template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.code === 'themeSelector') {\r\n      <theme-selector [model]=\"uiActionModel\"></theme-selector>\r\n    } @else if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"menuTypes; context: { uiActionModel: uiActionModel }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [code]=\"uiActionModel.uiAction.code\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<ng-template #menuTypes let-uiActionModel=\"uiActionModel\">\r\n  @if (uiActionModel?.uiAction?.descriptor?.menuTriggerType == triggerType.HOVER) {\r\n    <ui-hover-menu\r\n      #menu\r\n      [triggerAction]=\"uiActionModel.uiAction\"\r\n      [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n      (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n    ></ui-hover-menu>\r\n  } @else {\r\n    <ui-tiered-menu\r\n      #menu\r\n      [triggerAction]=\"uiActionModel.uiAction\"\r\n      [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n      (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n    ></ui-tiered-menu>\r\n  }\r\n</ng-template>\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"] }]
+            args: [{ selector: 'smart-ui-action-toolbar', template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.code === 'themeSelector') {\r\n      <theme-selector [model]=\"uiActionModel\"></theme-selector>\r\n    } @else if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"menuTypes; context: { uiActionModel: uiActionModel }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [code]=\"uiActionModel.uiAction.code\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<ng-template #menuTypes let-uiActionModel=\"uiActionModel\">\r\n  @switch (uiActionModel?.uiAction?.descriptor?.menu?.triggerType) {\r\n    @case (triggerType.HOVER) {\r\n      <ui-hover-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-hover-menu>\r\n    }\r\n    @case (triggerType.CLICK) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    }\r\n    @default {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"] }]
         }], ctorParameters: () => [{ type: UiActionService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -8240,11 +8323,11 @@ class FileEditorToolbarComponent extends UiActionToolbarComponent {
         await super.fireAction(uiActionModel);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FileEditorToolbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: FileEditorToolbarComponent, selector: "file-editor-toolbar", inputs: { dataUri: "dataUri" }, outputs: { actionEvent: "actionEvent" }, usesInheritance: true, ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.code === 'themeSelector') {\r\n      <theme-selector [model]=\"uiActionModel\"></theme-selector>\r\n    } @else if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"menuTypes; context: { uiActionModel: uiActionModel }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [code]=\"uiActionModel.uiAction.code\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<ng-template #menuTypes let-uiActionModel=\"uiActionModel\">\r\n  @if (uiActionModel?.uiAction?.descriptor?.menuTriggerType == triggerType.HOVER) {\r\n    <ui-hover-menu\r\n      #menu\r\n      [triggerAction]=\"uiActionModel.uiAction\"\r\n      [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n      (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n    ></ui-hover-menu>\r\n  } @else {\r\n    <ui-tiered-menu\r\n      #menu\r\n      [triggerAction]=\"uiActionModel.uiAction\"\r\n      [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n      (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n    ></ui-tiered-menu>\r\n  }\r\n</ng-template>\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["model"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: FileEditorToolbarComponent, selector: "file-editor-toolbar", inputs: { dataUri: "dataUri" }, outputs: { actionEvent: "actionEvent" }, usesInheritance: true, ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.code === 'themeSelector') {\r\n      <theme-selector [model]=\"uiActionModel\"></theme-selector>\r\n    } @else if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"menuTypes; context: { uiActionModel: uiActionModel }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [code]=\"uiActionModel.uiAction.code\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<ng-template #menuTypes let-uiActionModel=\"uiActionModel\">\r\n  @switch (uiActionModel?.uiAction?.descriptor?.menu?.triggerType) {\r\n    @case (triggerType.HOVER) {\r\n      <ui-hover-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-hover-menu>\r\n    }\r\n    @case (triggerType.CLICK) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    }\r\n    @default {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["model"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FileEditorToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-editor-toolbar', template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.code === 'themeSelector') {\r\n      <theme-selector [model]=\"uiActionModel\"></theme-selector>\r\n    } @else if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"menuTypes; context: { uiActionModel: uiActionModel }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [code]=\"uiActionModel.uiAction.code\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<ng-template #menuTypes let-uiActionModel=\"uiActionModel\">\r\n  @if (uiActionModel?.uiAction?.descriptor?.menuTriggerType == triggerType.HOVER) {\r\n    <ui-hover-menu\r\n      #menu\r\n      [triggerAction]=\"uiActionModel.uiAction\"\r\n      [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n      (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n    ></ui-hover-menu>\r\n  } @else {\r\n    <ui-tiered-menu\r\n      #menu\r\n      [triggerAction]=\"uiActionModel.uiAction\"\r\n      [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n      (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n    ></ui-tiered-menu>\r\n  }\r\n</ng-template>\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"] }]
+            args: [{ selector: 'file-editor-toolbar', template: "@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonLeft\"\r\n    (actionClick)=\"scrollLeft()\"\r\n    (mousedown)=\"scrollStart('left')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('left')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<div\r\n  #container\r\n  class=\"uiActionButtonsContainer\"\r\n  [ngClass]=\"{\r\n    scrollableContent: scrollOnWrap,\r\n    verticalToolbar: isVertical,\r\n  }\"\r\n>\r\n  <ng-container *ngFor=\"let uiActionModel of uiActionModelsWithDescriptions; trackBy: trackByFn\">\r\n    @if (uiActionModel.uiAction.code === 'themeSelector') {\r\n      <theme-selector [model]=\"uiActionModel\"></theme-selector>\r\n    } @else if (uiActionModel.uiAction.subActions && uiActionModel.uiAction.subActions.length > 0) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"menuTypes; context: { uiActionModel: uiActionModel }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ui-action-button\r\n        [descriptor]=\"uiActionModel.descriptor!\"\r\n        [code]=\"uiActionModel.uiAction.code\"\r\n        [disabled]=\"!!uiActionModel.uiAction.disabled\"\r\n        [addedCssClass]=\"uiActionModel.cssClass\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n        (actionDoubleClick)=\"onActionDoubleClicked($event, uiActionModel)\"\r\n      >\r\n      </ui-action-button>\r\n    }\r\n  </ng-container>\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n  <ui-action-button\r\n    [disabled]=\"!isScrollable\"\r\n    [descriptor]=\"buttonRight\"\r\n    (actionClick)=\"scrollRight()\"\r\n    (mousedown)=\"scrollStart('right')\"\r\n    (mouseup)=\"stopScroll()\"\r\n    (mouseleave)=\"stopScroll()\"\r\n    (touchstart)=\"scrollStart('right')\"\r\n    (touchend)=\"stopScroll()\"\r\n  />\r\n}\r\n\r\n<ng-template #menuTypes let-uiActionModel=\"uiActionModel\">\r\n  @switch (uiActionModel?.uiAction?.descriptor?.menu?.triggerType) {\r\n    @case (triggerType.HOVER) {\r\n      <ui-hover-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-hover-menu>\r\n    }\r\n    @case (triggerType.CLICK) {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    }\r\n    @default {\r\n      <ui-tiered-menu\r\n        #menu\r\n        [triggerAction]=\"uiActionModel.uiAction\"\r\n        [subActions]=\"uiActionModel.uiAction.subActions!\"\r\n        (actionClick)=\"onActionClicked($event, uiActionModel)\"\r\n      ></ui-tiered-menu>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%;justify-content:flex-start}\n"] }]
         }], propDecorators: { dataUri: [{
                 type: Input
             }], actionEvent: [{
@@ -11113,8 +11196,11 @@ class SmartGridToolbarActionsUtil {
         if (!row.columnActions && row.actions && row.actions.length > 0) {
             return true;
         }
-        let _columnsToFilter = [...orderedColumns, this.defaultActionToolbarId];
-        let filteredActionColumns = Object.keys(row.columnActions || {})
+        var _columnsToFilter = [
+            ...orderedColumns.map((col) => col.startsWith('data.') ? col.substring('data.'.length) : col),
+            this.defaultActionToolbarId,
+        ];
+        var filteredActionColumns = Object.keys(row.columnActions || {})
             .filter((key) => _columnsToFilter.includes(key))
             .reduce((acc, key) => {
             acc[key] = row.columnActions[key];
@@ -11122,7 +11208,7 @@ class SmartGridToolbarActionsUtil {
         }, {});
         return (row.actions &&
             row.actions.length > 0 &&
-            Object.values(filteredActionColumns).flat().length != row.actions.length);
+            Object.values(filteredActionColumns).flat().length !== row.actions.length);
     }
     static showToolbar(row, columnName) {
         return !!row.actions && row.actions.length > 0 && !!row.columnActions?.[columnName];
@@ -11157,14 +11243,15 @@ class SmartGridToolbarActionsUtil {
         return cellToActionMap;
     }
     static calculateMenuActions(row, orderedColumns) {
-        let _columnsToFilter = [...orderedColumns, this.defaultActionToolbarId];
-        let columnCodes = Object.keys(row.columnActions || {})
+        var _columnsToFilter = [
+            ...orderedColumns.map((col) => col.startsWith('data.') ? col.substring('data.'.length) : col),
+            this.defaultActionToolbarId,
+        ];
+        var columnCodes = Object.keys(row.columnActions || {})
             .filter((key) => _columnsToFilter.includes(key))
             .map((key) => row.columnActions[key])
             .flat();
-        return row.actions?.filter((action) => {
-            return !columnCodes.includes(action.code);
-        });
+        return row.actions?.filter((action) => !columnCodes.includes(action.code)) ?? [];
     }
     static getActionModelsFromMap(cellToActionMap, row, header) {
         let key = row.id + header;
@@ -11185,6 +11272,10 @@ class Table {
         this.onSelectionChanged = new Subject();
         this.asyncTranslationResult = (translator, param) => translator(param);
         this.ACTION_SEPERATOR = '_actionSeparator_';
+        // ---- Toolbar ----
+        this.defaultActionToolbarId = SmartGridToolbarActionsUtil.defaultActionToolbarId;
+        this.rowMenuActionModelCache = new Map();
+        this.rowMenuActionModelArrayCache = new Map();
     }
     ngOnInit() {
         if (this.smartTable.sortable)
@@ -11221,6 +11312,8 @@ class Table {
     }
     renderRows() {
         this.createCellToActionMap();
+        this.rowMenuActionModelCache.clear();
+        this.rowMenuActionModelArrayCache.clear();
         this.myTableChild.renderRows();
     }
     createCellToActionMap() {
@@ -11263,12 +11356,6 @@ class Table {
             throw new Error(`Button with name ${button.label || button.icon} does not have a callback!`);
         }
         button.callback(button.args, element, btn);
-        if (close) {
-            let openMenus = this.triggers.filter((matMenuTrigger) => matMenuTrigger.menuOpen);
-            openMenus.forEach((matMenuTrigger) => {
-                matMenuTrigger.closeMenu();
-            });
-        }
     }
     isSortable(header) {
         let isSortableTable = this.smartTable.sortable;
@@ -11573,26 +11660,6 @@ class Table {
             this.smartTable.onSelection(element);
         }
     }
-    showMenuButton(element, button) {
-        let headers = this.smartTable.tableHeaders.map((header) => this.originalProperty(header));
-        let showMenu = SmartGridToolbarActionsUtil.showMenu(element, headers);
-        if (!showMenu) {
-            return false;
-        }
-        if (button.menuItemButtons) {
-            return true;
-        }
-        else if (button.menuItemButtonsPropertyName) {
-            try {
-                let length = this.getValue(element, button.menuItemButtonsPropertyName).length;
-                return length > 0;
-            }
-            catch (error) {
-                return false;
-            }
-        }
-        return false;
-    }
     getValue(element, header) {
         return SmartObjectUtility.getValueByPath(element, header);
     }
@@ -11674,51 +11741,65 @@ class Table {
         }
         return undefined;
     }
-    // ---- Toolbar ----
     getRowColumnAction(row, header) {
         return SmartGridToolbarActionsUtil.getActionModelsFromMap(this.cellToActionMap, row, this.originalProperty(header));
     }
     showCellToolbar(row, columnName) {
         return SmartGridToolbarActionsUtil.showToolbar(row, this.originalProperty(columnName));
     }
-    getMenuButtons(row, button) {
-        let columnActions = row.columnActions ?? {};
-        // Filter for columnActions that are in a columnAction, but the column is not in the headers
-        let filteredActionColumns = Object.keys(columnActions)
-            .filter((key) => this.smartTable.tableHeaders.includes('data.' + key))
-            .reduce((acc, key) => {
-            acc[key] = columnActions[key];
-            return acc;
-        }, {});
-        let columnCodes = Object.values(filteredActionColumns).flat();
-        return (button.menuItemButtons || []).filter((btn) => !columnCodes.includes(btn.code));
-    }
-    getMenuItemButtonsPropertyName(element, button) {
-        let buttons = this.getValue(element, button.menuItemButtonsPropertyName);
-        let gridRow = element;
-        let columnActions = gridRow.columnActions ?? {};
-        // Filter for columnActions that are in a columnAction, but the column is not in the headers
-        let filteredActionColumns = Object.keys(columnActions)
-            .filter((key) => this.smartTable.tableHeaders.includes('data.' + key))
-            .reduce((acc, key) => {
-            acc[key] = columnActions[key];
-            return acc;
-        }, {});
-        let columnCodes = Object.values(filteredActionColumns || {}).flat();
-        return buttons?.filter((button) => !columnCodes.includes(button.code));
+    getRowMenuActionModel(element) {
+        var cacheKey = element.id;
+        if (this.rowMenuActionModelCache.has(cacheKey)) {
+            return this.rowMenuActionModelCache.get(cacheKey);
+        }
+        var service = this.smartTable.getServiceToUse();
+        var gridId = this.smartTable.getGridId();
+        if (!service || !gridId) {
+            return undefined;
+        }
+        var leftoverActions = SmartGridToolbarActionsUtil.calculateMenuActions(element, this.smartTable.tableHeaders) ?? [];
+        var menuUiAction = {
+            code: 'rowMenu',
+            descriptor: {
+                icon: 'more_vert',
+                iconColor: 'primary',
+                title: '',
+                type: UiActionButtonType.ICON,
+                color: 'primary',
+            },
+            subActions: leftoverActions,
+        };
+        var model = {
+            serviceToUse: service,
+            uiAction: menuUiAction,
+            nodeId: element.id,
+            widgetId: gridId,
+        };
+        this.rowMenuActionModelCache.set(cacheKey, model);
+        return model;
+    }
+    getRowMenuActionModelArray(element) {
+        var cacheKey = element.id;
+        if (this.rowMenuActionModelArrayCache.has(cacheKey)) {
+            return this.rowMenuActionModelArrayCache.get(cacheKey);
+        }
+        var model = this.getRowMenuActionModel(element);
+        var arr = model ? [model] : [];
+        this.rowMenuActionModelArrayCache.set(cacheKey, arr);
+        return arr;
+    }
+    shouldShowMenuButton(row) {
+        return SmartGridToolbarActionsUtil.showMenu(row, this.smartTable.tableHeaders);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Table, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: Table, selector: "ng-component", inputs: { smartTable: "smartTable" }, viewQueries: [{ propertyName: "myTableChild", first: true, predicate: ["myTable"], descendants: true }, { propertyName: "headerToolbar", first: true, predicate: ["headerToolbar"], descendants: true }, { propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }, { propertyName: "vcRef", predicate: ["expandedArea"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultActionMenuComponents", predicate: DefaultActionsPopupComponent, descendants: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: Table, selector: "ng-component", inputs: { smartTable: "smartTable" }, viewQueries: [{ propertyName: "myTableChild", first: true, predicate: ["myTable"], descendants: true }, { propertyName: "headerToolbar", first: true, predicate: ["headerToolbar"], descendants: true }, { propertyName: "vcRef", predicate: ["expandedArea"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultActionMenuComponents", predicate: DefaultActionsPopupComponent, descendants: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Table, decorators: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }], ctorParameters: () => [{ type: ComponentFactoryService }], propDecorators: { triggers: [{
-                type: ViewChildren,
-                args: [MatMenuTrigger]
-            }], vcRef: [{
+        }], ctorParameters: () => [{ type: ComponentFactoryService }], propDecorators: { vcRef: [{
                 type: ViewChildren,
                 args: ['expandedArea', { read: ViewContainerRef }]
             }], defaultActionMenuComponents: [{
@@ -11777,10 +11858,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 class MaterialTableComponent extends Table {
     constructor(cfService) {
         super(cfService);
-        this.defaultActionToolbarId = SmartGridToolbarActionsUtil.defaultActionToolbarId;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MaterialTableComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", 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  @if(smartTable.title){\r\n  <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\r\n    {{ smartTable.title }}\r\n  </caption>\r\n\r\n  }\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <!-- my_menu is the implicit action column present on all tables: -->\r\n    @if ('my_menu' === header) {\r\n    <th\r\n      mat-header-cell\r\n      *matHeaderCellDef\r\n      [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n    >\r\n      <smart-ui-action-toolbar\r\n        #headerToolbar\r\n        [id]=\"\r\n          smartTable.getGridId()\r\n            ? smartTable.getGridId() + '_headerToolbar'\r\n            : 'grid_not_initialized'\r\n        \"\r\n      >\r\n      </smart-ui-action-toolbar>\r\n    </th>\r\n    } @else {\r\n    <th\r\n      mat-header-cell\r\n      *matHeaderCellDef\r\n      [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n    >\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    }\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 *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\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          <smart-icon [imageResource]=\"ir\"> </smart-icon>\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\" class=\"menu-button\">\r\n              <!------ TOOLBAR ------>\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n              ></smart-ui-action-toolbar>\r\n              <!------ TOOLBAR ------>\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 getMenuButtons(element, button)\"\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 getMenuItemButtonsPropertyName(element, button)\">\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                      [disabled]=\"btn.disabled\"\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        <!------ TOOLBAR ------>\r\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\r\n          <smart-ui-action-toolbar\r\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\r\n          ></smart-ui-action-toolbar>\r\n        </ng-container>\r\n        <!------ TOOLBAR ------>\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    </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  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\r\n    <tr\r\n      mat-row\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($event, element)\"\r\n      [attr.data-testid]=\"element?.id ?? null\"\r\n    ></tr>\r\n    <lib-default-actions-popup\r\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\r\n      #defaultActionMenu\r\n      [buttons]=\"getDefaultActionsForRow(element)!\"\r\n      [row]=\"element\"\r\n    ></lib-default-actions-popup>\r\n  </ng-container>\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:#f5f5f5}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-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", 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  @if (smartTable.title) {\r\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\r\n      {{ smartTable.title }}\r\n    </caption>\r\n  }\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <!-- my_menu is the implicit action column present on all tables: -->\r\n    @if ('my_menu' === header) {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <smart-ui-action-toolbar\r\n          #headerToolbar\r\n          [id]=\"\r\n            smartTable.getGridId()\r\n              ? smartTable.getGridId() + '_headerToolbar'\r\n              : 'grid_not_initialized'\r\n          \"\r\n        >\r\n        </smart-ui-action-toolbar>\r\n      </th>\r\n    } @else {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <div\r\n          *ngIf=\"\r\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\r\n          \"\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    }\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 *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\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          <smart-icon [imageResource]=\"ir\"> </smart-icon>\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            <!------ MENU ------>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\r\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n              ></smart-ui-action-toolbar>\r\n\r\n              <!------ GENERIC HAMBURGER ------>\r\n              @if (shouldShowMenuButton(element)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(element)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n            </div>\r\n\r\n            <!------ MENU ------>\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        <!------ TOOLBAR ------>\r\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\r\n          <smart-ui-action-toolbar\r\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\r\n          ></smart-ui-action-toolbar>\r\n        </ng-container>\r\n        <!------ TOOLBAR ------>\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    </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  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\r\n    <tr\r\n      mat-row\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($event, element)\"\r\n      [attr.data-testid]=\"element?.id ?? null\"\r\n    ></tr>\r\n    <lib-default-actions-popup\r\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\r\n      #defaultActionMenu\r\n      [buttons]=\"getDefaultActionsForRow(element)!\"\r\n      [row]=\"element\"\r\n    ></lib-default-actions-popup>\r\n  </ng-container>\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:#f5f5f5}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-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -11796,7 +11876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], 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  @if(smartTable.title){\r\n  <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\r\n    {{ smartTable.title }}\r\n  </caption>\r\n\r\n  }\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <!-- my_menu is the implicit action column present on all tables: -->\r\n    @if ('my_menu' === header) {\r\n    <th\r\n      mat-header-cell\r\n      *matHeaderCellDef\r\n      [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n    >\r\n      <smart-ui-action-toolbar\r\n        #headerToolbar\r\n        [id]=\"\r\n          smartTable.getGridId()\r\n            ? smartTable.getGridId() + '_headerToolbar'\r\n            : 'grid_not_initialized'\r\n        \"\r\n      >\r\n      </smart-ui-action-toolbar>\r\n    </th>\r\n    } @else {\r\n    <th\r\n      mat-header-cell\r\n      *matHeaderCellDef\r\n      [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n    >\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    }\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 *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\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          <smart-icon [imageResource]=\"ir\"> </smart-icon>\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\" class=\"menu-button\">\r\n              <!------ TOOLBAR ------>\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n              ></smart-ui-action-toolbar>\r\n              <!------ TOOLBAR ------>\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 getMenuButtons(element, button)\"\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 getMenuItemButtonsPropertyName(element, button)\">\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                      [disabled]=\"btn.disabled\"\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        <!------ TOOLBAR ------>\r\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\r\n          <smart-ui-action-toolbar\r\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\r\n          ></smart-ui-action-toolbar>\r\n        </ng-container>\r\n        <!------ TOOLBAR ------>\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    </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  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\r\n    <tr\r\n      mat-row\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($event, element)\"\r\n      [attr.data-testid]=\"element?.id ?? null\"\r\n    ></tr>\r\n    <lib-default-actions-popup\r\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\r\n      #defaultActionMenu\r\n      [buttons]=\"getDefaultActionsForRow(element)!\"\r\n      [row]=\"element\"\r\n    ></lib-default-actions-popup>\r\n  </ng-container>\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:#f5f5f5}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-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
+                    ], 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  @if (smartTable.title) {\r\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\r\n      {{ smartTable.title }}\r\n    </caption>\r\n  }\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <!-- my_menu is the implicit action column present on all tables: -->\r\n    @if ('my_menu' === header) {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <smart-ui-action-toolbar\r\n          #headerToolbar\r\n          [id]=\"\r\n            smartTable.getGridId()\r\n              ? smartTable.getGridId() + '_headerToolbar'\r\n              : 'grid_not_initialized'\r\n          \"\r\n        >\r\n        </smart-ui-action-toolbar>\r\n      </th>\r\n    } @else {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <div\r\n          *ngIf=\"\r\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\r\n          \"\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    }\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 *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\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          <smart-icon [imageResource]=\"ir\"> </smart-icon>\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            <!------ MENU ------>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\r\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n              ></smart-ui-action-toolbar>\r\n\r\n              <!------ GENERIC HAMBURGER ------>\r\n              @if (shouldShowMenuButton(element)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(element)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n            </div>\r\n\r\n            <!------ MENU ------>\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        <!------ TOOLBAR ------>\r\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\r\n          <smart-ui-action-toolbar\r\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\r\n          ></smart-ui-action-toolbar>\r\n        </ng-container>\r\n        <!------ TOOLBAR ------>\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    </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  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\r\n    <tr\r\n      mat-row\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($event, element)\"\r\n      [attr.data-testid]=\"element?.id ?? null\"\r\n    ></tr>\r\n    <lib-default-actions-popup\r\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\r\n      #defaultActionMenu\r\n      [buttons]=\"getDefaultActionsForRow(element)!\"\r\n      [row]=\"element\"\r\n    ></lib-default-actions-popup>\r\n  </ng-container>\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:#f5f5f5}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-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
         }], ctorParameters: () => [{ type: ComponentFactoryService }] });
 
 class MobileTableComponent extends Table {
@@ -11804,11 +11884,11 @@ class MobileTableComponent extends Table {
         super(cfService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MobileTableComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: MobileTableComponent, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\r\n  <div\r\n    class=\"mobileTableRow\"\r\n    *ngFor=\"let row of smartTable.tableRows\"\r\n    [ngClass]=\"getRowClasses(row)\"\r\n    [ngStyle]=\"getRowStyles(row)\"\r\n    [attr.data-testid]=\"row?.id ?? null\"\r\n  >\r\n    <div\r\n      class=\"mobileTableCell\"\r\n      *ngFor=\"let header of smartTable.customSmartTableHeaders; let i = index\"\r\n      (click)=\"handleOnRowClick(row)\"\r\n      (dblclick)=\"handleOnRowDoubleClick($event, row)\"\r\n    >\r\n      <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\r\n        {{ header.label }}\r\n      </div>\r\n\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select'\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n                  : row\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(row)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n              : row\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n              : row\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(row, header.propertyName)\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(row, header.propertyName)\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(row, header.propertyName)\r\n              | smartTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox\r\n            [disabled]=\"true\"\r\n            [checked]=\"getValue(row, header.propertyName)\"\r\n          ></mat-checkbox>\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(row, i)\"\r\n            [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\r\n            [color]=\"getColor(getValue(row, header.propertyName), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"isImageResource(row, header.propertyName)\">\r\n        <smart-icon\r\n          [icon]=\"getImageResourceIcon(row, header.propertyName)\"\r\n          [color]=\"getImageResourceColor(row, header.propertyName)\"\r\n        >\r\n        </smart-icon>\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, row)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, row)\"\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, row)\"\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 }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, row)\"\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 }}\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\">\r\n              <button\r\n                *ngIf=\"showMenuButton(row, button)\"\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, button, row, 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 }}\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, row, undefined, true)\"\r\n                    mat-menu-item\r\n                  >\r\n                    <smart-icon *ngIf=\"btn.icon\" [icon]=\"btn.icon\"></smart-icon>\r\n                    {{ btn.label }}\r\n                  </button>\r\n                </div>\r\n                <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n                  <button\r\n                    *ngFor=\"let btn of getValue(row, button.menuItemButtonsPropertyName)\"\r\n                    (click)=\"customButtonClicked($event, button, row, btn, true)\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    mat-menu-item\r\n                  >\r\n                    {{ button.translator!(btn) }}\r\n                  </button>\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(row, header.propertyName)) }}\r\n      </div>\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\r\n          *ngIf=\"header.propertyName === 'icon'\"\r\n          [icon]=\"getValue(row, header.propertyName)!\"\r\n        >\r\n        </smart-icon>\r\n        <img\r\n          *ngIf=\"header.propertyName === 'img'\"\r\n          [src]=\"getValue(row, header.propertyName)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <div\r\n          *ngIf=\"\r\n            header.propertyName !== 'icon' &&\r\n            header.propertyName !== 'img' &&\r\n            header.propertyName !== 'option' &&\r\n            header.propertyName !== 'button'\r\n          \"\r\n          [innerHtml]=\"getValue(row, header.propertyName)\"\r\n        ></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: MobileTableComponent, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\r\n  <div\r\n    class=\"mobileTableRow\"\r\n    *ngFor=\"let row of smartTable.tableRows\"\r\n    [ngClass]=\"getRowClasses(row)\"\r\n    [ngStyle]=\"getRowStyles(row)\"\r\n    [attr.data-testid]=\"row?.id ?? null\"\r\n  >\r\n    <div\r\n      class=\"mobileTableCell\"\r\n      *ngFor=\"let header of smartTable.customSmartTableHeaders; let i = index\"\r\n      (click)=\"handleOnRowClick(row)\"\r\n      (dblclick)=\"handleOnRowDoubleClick($event, row)\"\r\n    >\r\n      <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\r\n        {{ header.label }}\r\n      </div>\r\n\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select'\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n                  : row\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(row)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n              : row\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n              : row\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(row, header.propertyName)\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(row, header.propertyName)\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(row, header.propertyName)\r\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox\r\n            [disabled]=\"true\"\r\n            [checked]=\"getValue(row, header.propertyName)\"\r\n          ></mat-checkbox>\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(row, i)\"\r\n            [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\r\n            [color]=\"getColor(getValue(row, header.propertyName), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"isImageResource(row, header.propertyName)\">\r\n        <smart-icon\r\n          [icon]=\"getImageResourceIcon(row, header.propertyName)\"\r\n          [color]=\"getImageResourceColor(row, header.propertyName)\"\r\n        >\r\n        </smart-icon>\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, row)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, row)\"\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, row)\"\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 }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, row)\"\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 }}\r\n            </button>\r\n            <!------ MENU ------>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\r\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n              ></smart-ui-action-toolbar>\r\n\r\n              <!------ GENERIC HAMBURGER ------>\r\n              @if (shouldShowMenuButton(element)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(element)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n              <!------ 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(row, header.propertyName)) }}\r\n      </div>\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\r\n          *ngIf=\"header.propertyName === 'icon'\"\r\n          [icon]=\"getValue(row, header.propertyName)!\"\r\n        >\r\n        </smart-icon>\r\n        <img\r\n          *ngIf=\"header.propertyName === 'img'\"\r\n          [src]=\"getValue(row, header.propertyName)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <div\r\n          *ngIf=\"\r\n            header.propertyName !== 'icon' &&\r\n            header.propertyName !== 'img' &&\r\n            header.propertyName !== 'option' &&\r\n            header.propertyName !== 'button'\r\n          \"\r\n          [innerHtml]=\"getValue(row, header.propertyName)\"\r\n        ></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MobileTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-mobile-table', template: "<div class=\"mobileTable\">\r\n  <div\r\n    class=\"mobileTableRow\"\r\n    *ngFor=\"let row of smartTable.tableRows\"\r\n    [ngClass]=\"getRowClasses(row)\"\r\n    [ngStyle]=\"getRowStyles(row)\"\r\n    [attr.data-testid]=\"row?.id ?? null\"\r\n  >\r\n    <div\r\n      class=\"mobileTableCell\"\r\n      *ngFor=\"let header of smartTable.customSmartTableHeaders; let i = index\"\r\n      (click)=\"handleOnRowClick(row)\"\r\n      (dblclick)=\"handleOnRowDoubleClick($event, row)\"\r\n    >\r\n      <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\r\n        {{ header.label }}\r\n      </div>\r\n\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select'\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n                  : row\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(row)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n              : row\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n              : row\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(row, header.propertyName)\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(row, header.propertyName)\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(row, header.propertyName)\r\n              | smartTime : smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox\r\n            [disabled]=\"true\"\r\n            [checked]=\"getValue(row, header.propertyName)\"\r\n          ></mat-checkbox>\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(row, i)\"\r\n            [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\r\n            [color]=\"getColor(getValue(row, header.propertyName), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"isImageResource(row, header.propertyName)\">\r\n        <smart-icon\r\n          [icon]=\"getImageResourceIcon(row, header.propertyName)\"\r\n          [color]=\"getImageResourceColor(row, header.propertyName)\"\r\n        >\r\n        </smart-icon>\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, row)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, row)\"\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, row)\"\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 }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, row)\"\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 }}\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\">\r\n              <button\r\n                *ngIf=\"showMenuButton(row, button)\"\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, button, row, 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 }}\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, row, undefined, true)\"\r\n                    mat-menu-item\r\n                  >\r\n                    <smart-icon *ngIf=\"btn.icon\" [icon]=\"btn.icon\"></smart-icon>\r\n                    {{ btn.label }}\r\n                  </button>\r\n                </div>\r\n                <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n                  <button\r\n                    *ngFor=\"let btn of getValue(row, button.menuItemButtonsPropertyName)\"\r\n                    (click)=\"customButtonClicked($event, button, row, btn, true)\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    mat-menu-item\r\n                  >\r\n                    {{ button.translator!(btn) }}\r\n                  </button>\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(row, header.propertyName)) }}\r\n      </div>\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\r\n          *ngIf=\"header.propertyName === 'icon'\"\r\n          [icon]=\"getValue(row, header.propertyName)!\"\r\n        >\r\n        </smart-icon>\r\n        <img\r\n          *ngIf=\"header.propertyName === 'img'\"\r\n          [src]=\"getValue(row, header.propertyName)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <div\r\n          *ngIf=\"\r\n            header.propertyName !== 'icon' &&\r\n            header.propertyName !== 'img' &&\r\n            header.propertyName !== 'option' &&\r\n            header.propertyName !== 'button'\r\n          \"\r\n          [innerHtml]=\"getValue(row, header.propertyName)\"\r\n        ></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
+            args: [{ selector: 'lib-mobile-table', template: "<div class=\"mobileTable\">\r\n  <div\r\n    class=\"mobileTableRow\"\r\n    *ngFor=\"let row of smartTable.tableRows\"\r\n    [ngClass]=\"getRowClasses(row)\"\r\n    [ngStyle]=\"getRowStyles(row)\"\r\n    [attr.data-testid]=\"row?.id ?? null\"\r\n  >\r\n    <div\r\n      class=\"mobileTableCell\"\r\n      *ngFor=\"let header of smartTable.customSmartTableHeaders; let i = index\"\r\n      (click)=\"handleOnRowClick(row)\"\r\n      (dblclick)=\"handleOnRowDoubleClick($event, row)\"\r\n    >\r\n      <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\r\n        {{ header.label }}\r\n      </div>\r\n\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select'\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n                  : row\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(row)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n              : row\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n              : row\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(row, header.propertyName)\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(row, header.propertyName)\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(row, header.propertyName)\r\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox\r\n            [disabled]=\"true\"\r\n            [checked]=\"getValue(row, header.propertyName)\"\r\n          ></mat-checkbox>\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(row, i)\"\r\n            [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\r\n            [color]=\"getColor(getValue(row, header.propertyName), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"isImageResource(row, header.propertyName)\">\r\n        <smart-icon\r\n          [icon]=\"getImageResourceIcon(row, header.propertyName)\"\r\n          [color]=\"getImageResourceColor(row, header.propertyName)\"\r\n        >\r\n        </smart-icon>\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, row)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, row)\"\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, row)\"\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 }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, row)\"\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 }}\r\n            </button>\r\n            <!------ MENU ------>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\r\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n              ></smart-ui-action-toolbar>\r\n\r\n              <!------ GENERIC HAMBURGER ------>\r\n              @if (shouldShowMenuButton(element)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(element)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n              <!------ 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(row, header.propertyName)) }}\r\n      </div>\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\r\n          *ngIf=\"header.propertyName === 'icon'\"\r\n          [icon]=\"getValue(row, header.propertyName)!\"\r\n        >\r\n        </smart-icon>\r\n        <img\r\n          *ngIf=\"header.propertyName === 'img'\"\r\n          [src]=\"getValue(row, header.propertyName)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <div\r\n          *ngIf=\"\r\n            header.propertyName !== 'icon' &&\r\n            header.propertyName !== 'img' &&\r\n            header.propertyName !== 'option' &&\r\n            header.propertyName !== 'button'\r\n          \"\r\n          [innerHtml]=\"getValue(row, header.propertyName)\"\r\n        ></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
         }], ctorParameters: () => [{ type: ComponentFactoryService }] });
 
 class SmarttableComponent {
@@ -16333,6 +16413,8 @@ class SmartGridComponent {
         };
         //PRIMENG
         this.columns = [];
+        this.rowMenuActionModelCache = new Map();
+        this.rowMenuActionModelArrayCache = new Map();
         this.service.gridModelChanged.subscribe(() => {
             // called after every service call (load, save, refresh, etc.)
             this.smartGrid.gridModel = this.service.gridModel;
@@ -17234,18 +17316,49 @@ class SmartGridComponent {
     }
     createCellToActionMap() {
         if (this.compLib === this.componentLibrary.PRIMENG && this.smartGrid?.gridModel.page.rows) {
+            this.rowMenuActionModelCache.clear();
+            this.rowMenuActionModelArrayCache.clear();
             this.cellToActionMap = SmartGridToolbarActionsUtil.calculateCellToActionMap(this.smartGrid?.gridModel.page.rows, this.smartGrid.serviceToUse, this.smartGrid.gridIdentifier);
         }
     }
     rowTrackByFn(index, row) {
         return row.id;
     }
+    getRowMenuActionModelArray(row) {
+        var cacheKey = row.id;
+        if (this.rowMenuActionModelArrayCache.has(cacheKey)) {
+            return this.rowMenuActionModelArrayCache.get(cacheKey);
+        }
+        if (!this.rowMenuActionModelCache.has(cacheKey)) {
+            var leftoverActions = this.calculateMenuActions(row) ?? [];
+            var menuUiAction = {
+                code: 'rowMenu',
+                descriptor: {
+                    icon: 'ellipsis-v',
+                    title: '',
+                    type: UiActionButtonType.ICON,
+                    color: 'primary',
+                },
+                subActions: leftoverActions,
+            };
+            var model = {
+                serviceToUse: this.smartGrid.serviceToUse,
+                uiAction: menuUiAction,
+                nodeId: row.id,
+                widgetId: this.smartGrid.gridIdentifier,
+            };
+            this.rowMenuActionModelCache.set(cacheKey, model);
+        }
+        var arr = [this.rowMenuActionModelCache.get(cacheKey)];
+        this.rowMenuActionModelArrayCache.set(cacheKey, arr);
+        return arr;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridComponent, deps: [{ token: SmartGridService }, { token: ComponentFactoryService }, { token: i1$3.MatDialog }, { token: i0.Injector }, { token: UiActionDescriptorService }, { token: SmartDatePipe }, { token: SmartDateTimePipe }, { token: SmartTimePipe }, { token: COMPONENT_LIBRARY }, { token: 'gridMenuIcon' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService, SmartDatePipe, SmartDateTimePipe, SmartTimePipe], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "_headerToolbar", first: true, predicate: ["headerToolbar"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(compLib === componentLibrary.PRIMENG) {\r\n\r\n<div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n  <div class=\"smart-grid-toolbar\">\r\n    <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n  </div>\r\n  <p-table\r\n    *ngIf=\"!smartGrid.layoutDef || smartGrid.layoutDef === layoutDef().TABLE\"\r\n    #pTable\r\n    [value]=\"smartGrid.gridModel.page.rows!\"\r\n    (onSort)=\"gridSort($event)\"\r\n    [customSort]=\"true\"\r\n    [sortMode]=\"'multiple'\"\r\n    [lazy]=\"true\"\r\n    (onLazyLoad)=\"lazyLoad($event)\"\r\n    [reorderableColumns]=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n    [columns]=\"columns\"\r\n    (onColReorder)=\"onColOrder($event)\"\r\n    (onRowSelect)=\"onRowSelect($event)\"\r\n    (onRowUnselect)=\"onRowUnselect($event)\"\r\n    [selection]=\"selectedRows\"\r\n    (onHeaderCheckboxToggle)=\"onSelectAllRow($event)\"\r\n    dataKey=\"id\"\r\n    [expandedRowKeys]=\"expandedRows\"\r\n    [rowExpandMode]=\"'multiple'\"\r\n    [rowTrackBy]=\"rowTrackByFn\"\r\n  >\r\n    <ng-template pTemplate=\"caption\">\r\n      <div class=\"tableCaption\">\r\n        <div *ngIf=\"smartGrid.gridModel.title\" class=\"captionTitle\">\r\n          {{ smartGrid.gridModel.title }}\r\n        </div>\r\n        <div *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n          <p-multiSelect\r\n            display=\"chip\"\r\n            [options]=\"smartGrid.gridModel.view?.descriptor?.columns\"\r\n            optionLabel=\"label\"\r\n            [(ngModel)]=\"columns\"\r\n            selectedItemsLabel=\"{0} columns selected\"\r\n            [style]=\"{ 'min-width': '200px' }\"\r\n            placeholder=\"Choose Columns\"\r\n            (onChange)=\"headerChange($event)\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        @if (smartGrid.gridModel.view?.descriptor?.showEditColumns) {\r\n        <th\r\n          *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n          style=\"width: 4rem\"\r\n        >\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        <th\r\n          *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n          style=\"width: 4rem\"\r\n        ></th>\r\n        <th\r\n          [pSortableColumn]=\"col.propertyName\"\r\n          *ngFor=\"let col of columns\"\r\n          pReorderableColumn\r\n          [attr.data-testid]=\"col.propertyName\"\r\n        >\r\n          <p-sortIcon [field]=\"col.propertyName\" />\r\n          {{ col.label }}\r\n        </th>\r\n        } @else {\r\n        <th\r\n          *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n          style=\"width: 4rem\"\r\n        >\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        <th\r\n          *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n          style=\"width: 4rem\"\r\n        ></th>\r\n        <th\r\n          [pSortableColumn]=\"col.propertyName\"\r\n          *ngFor=\"let col of columns\"\r\n          [attr.data-testid]=\"col.propertyName\"\r\n        >\r\n          <p-sortIcon [field]=\"col.propertyName\" />\r\n          {{ col.label }}\r\n        </th>\r\n        }\r\n\r\n        <th>\r\n          <smart-ui-action-toolbar\r\n            class=\"headerToolbar\"\r\n            #headerToolbar\r\n            [id]=\"'header_not_initialized'\"\r\n          ></smart-ui-action-toolbar>\r\n        </th>\r\n        <th *ngIf=\"smartGrid.expandable\"> </th>\r\n      </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-row let-expanded=\"expanded\">\r\n      <tr\r\n        [ngClass]=\"getStyle(row)\"\r\n        [class.rowExpanded]=\"expanded\"\r\n        (dblclick)=\"onDoubleClick(row)\"\r\n        *ngIf=\"row && row.data\"\r\n        [attr.data-testid]=\"row.id ?? null\"\r\n      >\r\n        <td *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n          <p-tableCheckbox *ngIf=\"row.selectable != false\" [value]=\"row\" />\r\n        </td>\r\n        <td *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n          <p-tableRadioButton [value]=\"row\" />\r\n        </td>\r\n        <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          <div *ngIf=\"row.icons[col]\">\r\n            <div class=\"smart-table-icon-container\">\r\n              <div *ngFor=\"let ir of getImageResourceIcons(row, col)\">\r\n                <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"showCellToolbar(row, col)\">\r\n            <smart-ui-action-toolbar\r\n              [uiActionModels]=\"getRowColumnAction(row, col)\"\r\n            ></smart-ui-action-toolbar>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"!row.icons[col]\" [innerHtml]=\"getColValue(col, row)\"> </div>\r\n        </td>\r\n        <td>\r\n          <div class=\"menu-button\">\r\n            @if(showCellToolbar(row, defaultActionToolbarId)){\r\n            <smart-ui-action-toolbar\r\n              [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\r\n            ></smart-ui-action-toolbar>\r\n            }\r\n            <p-button\r\n              [rounded]=\"true\"\r\n              [text]=\"true\"\r\n              *ngIf=\"shouldShowOptionsButton(row)\"\r\n              (onClick)=\"onOptionsClick($event, row)\"\r\n            >\r\n              <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n            </p-button>\r\n          </div>\r\n        </td>\r\n        <td *ngIf=\"smartGrid.expandable\">\r\n          <p-button\r\n            type=\"button\"\r\n            pRipple\r\n            [pRowToggler]=\"row\"\r\n            [text]=\"true\"\r\n            severity=\"secondary\"\r\n            [rounded]=\"true\"\r\n            [icon]=\"expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'\"\r\n          />\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    @if(smartGrid.expandable){\r\n    <ng-template pTemplate=\"rowexpansion\" let-row>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <lib-expanded-row-renderer-component\r\n            [rowId]=\"row.id\"\r\n            [rowExpander]=\"this\"\r\n            [expandedComponent]=\"smartGrid.expandedComponent\"\r\n            [smartGrid]=\"this.smartGrid\"\r\n          ></lib-expanded-row-renderer-component>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n  </p-table>\r\n  <div\r\n    *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n    class=\"cards-container\"\r\n    [ngStyle]=\"{\r\n      'grid-template-columns':\r\n        smartGrid.numberOfColumn !== undefined\r\n          ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n          : ''\r\n    }\"\r\n  >\r\n    <app-smart-grid-card\r\n      class=\"smartGrid-card-container\"\r\n      *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n      [item]=\"task\"\r\n      [smartGrid]=\"smartGrid\"\r\n      [onSelect]=\"onSelect.bind(this)\"\r\n    ></app-smart-grid-card>\r\n  </div>\r\n<div *ngIf=\"smartGrid.paginator\" class=\"paginator-row\">\r\n  <div class=\"paginator-wrap\">\r\n    <p-paginator\r\n      [first]=\"pageIndex!\"\r\n      [totalRecords]=\"length!\"\r\n      [rows]=\"pageSize\"\r\n      [rowsPerPageOptions]=\"pageSizeOptions\"\r\n      currentPageReportTemplate=\"{first} - {last} / {totalRecords}\"\r\n      (onPageChange)=\"onPrimeChangePage($event)\"\r\n      [showCurrentPageReport]=\"true\"\r\n      dropdownAppendTo=\"body\"\r\n    ></p-paginator>\r\n  </div>\r\n\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-refresh\"\r\n    class=\"p-button-text\"\r\n    pTooltip=\"Friss\u00EDt\u00E9s\"\r\n    (click)=\"refreshPartialResults()\"\r\n    *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n  ></button>\r\n</div>\r\n  <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\" appendTo=\"body\"> </p-menu>\r\n</div>\r\n}@else {\r\n<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-toolbar\">\r\n    <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    <button\r\n      (click)=\"editColumns()\"\r\n      mat-mini-fab\r\n      color=\"text-primary\"\r\n      *ngIf=\"smartGrid.showEditColumns\"\r\n    >\r\n      <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n        >view_columns</mat-icon\r\n      >\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n<div *ngIf=\"smartGrid.paginator\" class=\"paginator-row-material\">\r\n  <button\r\n   pButton\r\n   type=\"button\"\r\n   icon=\"pi pi-refresh\"\r\n   class=\"p-button-text\"\r\n   pTooltip=\"Friss\u00EDt\u00E9s\"\r\n   (click)=\"refreshPartialResults()\"\r\n   *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n ></button>\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator && !treeControl\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageIndex]=\"pageIndex\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.headerToolbar ::ng-deep .uiActionButtonsContainer{justify-content:flex-end}.tableCaption{display:flex;flex-direction:row;justify-content:space-between}.tableCaption:has(*){padding:.5rem;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable .p-datatable-header{padding:.5rem}.captionTitle{font-size:1.5rem;align-content:center}:host ::ng-deep .p-datatable-header:has(.tableCaption){padding:0;border:unset}.paginator-row{display:flex;align-items:center;align-self:center;gap:.25rem}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.paginator-wrap{flex:0 0 auto;min-width:0}:host ::ng-deep .paginator-wrap .p-paginator{width:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i11$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i11$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i11$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i11$1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "directive", type: ComparableMultiselectDirective, selector: "p-multiSelect", inputs: ["compareWith"] }, { kind: "component", type: i16$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i16$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i16$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i16$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i16$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i16$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i16$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i16$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i19$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i20$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i21$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "onSelect"] }, { kind: "component", type: ExpandedRowRendererComponent, selector: "lib-expanded-row-renderer-component", inputs: ["rowId", "rowExpander", "expandedComponent", "smartGrid"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService, SmartDatePipe, SmartDateTimePipe, SmartTimePipe], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "_headerToolbar", first: true, predicate: ["headerToolbar"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (compLib === componentLibrary.PRIMENG) {\r\n  <div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    </div>\r\n    <p-table\r\n      *ngIf=\"!smartGrid.layoutDef || smartGrid.layoutDef === layoutDef().TABLE\"\r\n      #pTable\r\n      [value]=\"smartGrid.gridModel.page.rows!\"\r\n      (onSort)=\"gridSort($event)\"\r\n      [customSort]=\"true\"\r\n      [sortMode]=\"'multiple'\"\r\n      [lazy]=\"true\"\r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      [reorderableColumns]=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n      [columns]=\"columns\"\r\n      (onColReorder)=\"onColOrder($event)\"\r\n      (onRowSelect)=\"onRowSelect($event)\"\r\n      (onRowUnselect)=\"onRowUnselect($event)\"\r\n      [selection]=\"selectedRows\"\r\n      (onHeaderCheckboxToggle)=\"onSelectAllRow($event)\"\r\n      dataKey=\"id\"\r\n      [expandedRowKeys]=\"expandedRows\"\r\n      [rowExpandMode]=\"'multiple'\"\r\n      [rowTrackBy]=\"rowTrackByFn\"\r\n    >\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"tableCaption\">\r\n          <div *ngIf=\"smartGrid.gridModel.title\" class=\"captionTitle\">\r\n            {{ smartGrid.gridModel.title }}\r\n          </div>\r\n          <div *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n            <p-multiSelect\r\n              display=\"chip\"\r\n              [options]=\"smartGrid.gridModel.view?.descriptor?.columns\"\r\n              optionLabel=\"label\"\r\n              [(ngModel)]=\"columns\"\r\n              selectedItemsLabel=\"{0} columns selected\"\r\n              [style]=\"{ 'min-width': '200px' }\"\r\n              placeholder=\"Choose Columns\"\r\n              (onChange)=\"headerChange($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          @if (smartGrid.gridModel.view?.descriptor?.showEditColumns) {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              pReorderableColumn\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          } @else {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          }\r\n\r\n          <th>\r\n            <smart-ui-action-toolbar\r\n              class=\"headerToolbar\"\r\n              #headerToolbar\r\n              [id]=\"'header_not_initialized'\"\r\n            ></smart-ui-action-toolbar>\r\n          </th>\r\n          <th *ngIf=\"smartGrid.expandable\"> </th>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-row let-expanded=\"expanded\">\r\n        <tr\r\n          [ngClass]=\"getStyle(row)\"\r\n          [class.rowExpanded]=\"expanded\"\r\n          (dblclick)=\"onDoubleClick(row)\"\r\n          *ngIf=\"row && row.data\"\r\n          [attr.data-testid]=\"row.id ?? null\"\r\n        >\r\n          <td *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableCheckbox *ngIf=\"row.selectable != false\" [value]=\"row\" />\r\n          </td>\r\n          <td *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableRadioButton [value]=\"row\" />\r\n          </td>\r\n          <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n            <div *ngIf=\"row.icons[col]\">\r\n              <div class=\"smart-table-icon-container\">\r\n                <div *ngFor=\"let ir of getImageResourceIcons(row, col)\">\r\n                  <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"showCellToolbar(row, col)\">\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(row, col)\"\r\n              ></smart-ui-action-toolbar>\r\n            </ng-container>\r\n\r\n            <div *ngIf=\"!row.icons[col]\" [innerHtml]=\"getColValue(col, row)\"> </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"menu-button\">\r\n              @if (showCellToolbar(row, defaultActionToolbarId)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n              @if (shouldShowOptionsButton(row)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(row)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n            </div>\r\n          </td>\r\n          <td *ngIf=\"smartGrid.expandable\">\r\n            <p-button\r\n              type=\"button\"\r\n              pRipple\r\n              [pRowToggler]=\"row\"\r\n              [text]=\"true\"\r\n              severity=\"secondary\"\r\n              [rounded]=\"true\"\r\n              [icon]=\"expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'\"\r\n            />\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n      @if (smartGrid.expandable) {\r\n        <ng-template pTemplate=\"rowexpansion\" let-row>\r\n          <tr>\r\n            <td colspan=\"100%\">\r\n              <lib-expanded-row-renderer-component\r\n                [rowId]=\"row.id\"\r\n                [rowExpander]=\"this\"\r\n                [expandedComponent]=\"smartGrid.expandedComponent\"\r\n                [smartGrid]=\"this.smartGrid\"\r\n              ></lib-expanded-row-renderer-component>\r\n            </td>\r\n          </tr>\r\n        </ng-template>\r\n      }\r\n    </p-table>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : '',\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row\">\r\n      <div class=\"paginator-wrap\">\r\n        <p-paginator\r\n          [first]=\"pageIndex!\"\r\n          [totalRecords]=\"length!\"\r\n          [rows]=\"pageSize\"\r\n          [rowsPerPageOptions]=\"pageSizeOptions\"\r\n          currentPageReportTemplate=\"{first} - {last} / {totalRecords}\"\r\n          (onPageChange)=\"onPrimeChangePage($event)\"\r\n          [showCurrentPageReport]=\"true\"\r\n          dropdownAppendTo=\"body\"\r\n        ></p-paginator>\r\n      </div>\r\n\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n    </div>\r\n    <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\" appendTo=\"body\"> </p-menu>\r\n  </div>\r\n} @else {\r\n  <div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n      <button\r\n        (click)=\"editColumns()\"\r\n        mat-mini-fab\r\n        color=\"text-primary\"\r\n        *ngIf=\"smartGrid.showEditColumns\"\r\n      >\r\n        <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n          >view_columns</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n    <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n    <div class=\"smartGridContent\">\r\n      <div>\r\n        <div *ngIf=\"smartGrid.showResultCount\">\r\n          <div class=\"smartGrid-data-number\">\r\n            {{ smartGrid.gridModel.totalRowCount }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"smart-grid-table-container\">\r\n        <ng-template #table></ng-template>\r\n      </div>\r\n\r\n      <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n        <smart-expandable-section\r\n          #gridExpandableSection\r\n          *ngFor=\"let expandableSection of expandableSections\"\r\n          [data]=\"expandableSection\"\r\n        ></smart-expandable-section>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n        class=\"cards-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <app-smart-grid-card\r\n          class=\"smartGrid-card-container\"\r\n          *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n          [item]=\"task\"\r\n          [smartGrid]=\"smartGrid\"\r\n          [onSelect]=\"onSelect.bind(this)\"\r\n        ></app-smart-grid-card>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n        class=\"tree-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node\"\r\n            matTreeNodeToggle\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button mat-icon-button disabled class=\"tree-button\"></button>\r\n            <mat-checkbox\r\n              class=\"checklist-leaf-node\"\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node; when: hasChild\"\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button\r\n              mat-icon-button\r\n              matTreeNodeToggle\r\n              class=\"tree-button\"\r\n              [attr.aria-label]=\"'Toggle ' + node.item\"\r\n            >\r\n              <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n              </mat-icon>\r\n            </button>\r\n            <mat-checkbox\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n        </mat-tree>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row-material\">\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n      <mat-paginator\r\n        *ngIf=\"smartGrid.paginator && !treeControl\"\r\n        #paginator\r\n        [length]=\"length\"\r\n        [pageIndex]=\"pageIndex\"\r\n        [pageSize]=\"pageSize\"\r\n        [pageSizeOptions]=\"pageSizeOptions\"\r\n        (page)=\"onChangePage($event)\"\r\n      ></mat-paginator>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.headerToolbar ::ng-deep .uiActionButtonsContainer{justify-content:flex-end}.tableCaption{display:flex;flex-direction:row;justify-content:space-between}.tableCaption:has(*){padding:.5rem;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable .p-datatable-header{padding:.5rem}.captionTitle{font-size:1.5rem;align-content:center}:host ::ng-deep .p-datatable-header:has(.tableCaption){padding:0;border:unset}.paginator-row{display:flex;align-items:center;align-self:center;gap:.25rem}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.paginator-wrap{flex:0 0 auto;min-width:0}:host ::ng-deep .paginator-wrap .p-paginator{width:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i11$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i11$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i11$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i11$1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "directive", type: ComparableMultiselectDirective, selector: "p-multiSelect", inputs: ["compareWith"] }, { kind: "component", type: i16$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i16$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i16$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i16$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i16$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i16$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i16$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i16$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i19$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i20$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i21$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "onSelect"] }, { kind: "component", type: ExpandedRowRendererComponent, selector: "lib-expanded-row-renderer-component", inputs: ["rowId", "rowExpander", "expandedComponent", "smartGrid"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-grid', providers: [SmartGridService, SmartDatePipe, SmartDateTimePipe, SmartTimePipe], template: "@if(compLib === componentLibrary.PRIMENG) {\r\n\r\n<div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n  <div class=\"smart-grid-toolbar\">\r\n    <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n  </div>\r\n  <p-table\r\n    *ngIf=\"!smartGrid.layoutDef || smartGrid.layoutDef === layoutDef().TABLE\"\r\n    #pTable\r\n    [value]=\"smartGrid.gridModel.page.rows!\"\r\n    (onSort)=\"gridSort($event)\"\r\n    [customSort]=\"true\"\r\n    [sortMode]=\"'multiple'\"\r\n    [lazy]=\"true\"\r\n    (onLazyLoad)=\"lazyLoad($event)\"\r\n    [reorderableColumns]=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n    [columns]=\"columns\"\r\n    (onColReorder)=\"onColOrder($event)\"\r\n    (onRowSelect)=\"onRowSelect($event)\"\r\n    (onRowUnselect)=\"onRowUnselect($event)\"\r\n    [selection]=\"selectedRows\"\r\n    (onHeaderCheckboxToggle)=\"onSelectAllRow($event)\"\r\n    dataKey=\"id\"\r\n    [expandedRowKeys]=\"expandedRows\"\r\n    [rowExpandMode]=\"'multiple'\"\r\n    [rowTrackBy]=\"rowTrackByFn\"\r\n  >\r\n    <ng-template pTemplate=\"caption\">\r\n      <div class=\"tableCaption\">\r\n        <div *ngIf=\"smartGrid.gridModel.title\" class=\"captionTitle\">\r\n          {{ smartGrid.gridModel.title }}\r\n        </div>\r\n        <div *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n          <p-multiSelect\r\n            display=\"chip\"\r\n            [options]=\"smartGrid.gridModel.view?.descriptor?.columns\"\r\n            optionLabel=\"label\"\r\n            [(ngModel)]=\"columns\"\r\n            selectedItemsLabel=\"{0} columns selected\"\r\n            [style]=\"{ 'min-width': '200px' }\"\r\n            placeholder=\"Choose Columns\"\r\n            (onChange)=\"headerChange($event)\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        @if (smartGrid.gridModel.view?.descriptor?.showEditColumns) {\r\n        <th\r\n          *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n          style=\"width: 4rem\"\r\n        >\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        <th\r\n          *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n          style=\"width: 4rem\"\r\n        ></th>\r\n        <th\r\n          [pSortableColumn]=\"col.propertyName\"\r\n          *ngFor=\"let col of columns\"\r\n          pReorderableColumn\r\n          [attr.data-testid]=\"col.propertyName\"\r\n        >\r\n          <p-sortIcon [field]=\"col.propertyName\" />\r\n          {{ col.label }}\r\n        </th>\r\n        } @else {\r\n        <th\r\n          *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n          style=\"width: 4rem\"\r\n        >\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        <th\r\n          *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n          style=\"width: 4rem\"\r\n        ></th>\r\n        <th\r\n          [pSortableColumn]=\"col.propertyName\"\r\n          *ngFor=\"let col of columns\"\r\n          [attr.data-testid]=\"col.propertyName\"\r\n        >\r\n          <p-sortIcon [field]=\"col.propertyName\" />\r\n          {{ col.label }}\r\n        </th>\r\n        }\r\n\r\n        <th>\r\n          <smart-ui-action-toolbar\r\n            class=\"headerToolbar\"\r\n            #headerToolbar\r\n            [id]=\"'header_not_initialized'\"\r\n          ></smart-ui-action-toolbar>\r\n        </th>\r\n        <th *ngIf=\"smartGrid.expandable\"> </th>\r\n      </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-row let-expanded=\"expanded\">\r\n      <tr\r\n        [ngClass]=\"getStyle(row)\"\r\n        [class.rowExpanded]=\"expanded\"\r\n        (dblclick)=\"onDoubleClick(row)\"\r\n        *ngIf=\"row && row.data\"\r\n        [attr.data-testid]=\"row.id ?? null\"\r\n      >\r\n        <td *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n          <p-tableCheckbox *ngIf=\"row.selectable != false\" [value]=\"row\" />\r\n        </td>\r\n        <td *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n          <p-tableRadioButton [value]=\"row\" />\r\n        </td>\r\n        <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          <div *ngIf=\"row.icons[col]\">\r\n            <div class=\"smart-table-icon-container\">\r\n              <div *ngFor=\"let ir of getImageResourceIcons(row, col)\">\r\n                <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"showCellToolbar(row, col)\">\r\n            <smart-ui-action-toolbar\r\n              [uiActionModels]=\"getRowColumnAction(row, col)\"\r\n            ></smart-ui-action-toolbar>\r\n          </ng-container>\r\n\r\n          <div *ngIf=\"!row.icons[col]\" [innerHtml]=\"getColValue(col, row)\"> </div>\r\n        </td>\r\n        <td>\r\n          <div class=\"menu-button\">\r\n            @if(showCellToolbar(row, defaultActionToolbarId)){\r\n            <smart-ui-action-toolbar\r\n              [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\r\n            ></smart-ui-action-toolbar>\r\n            }\r\n            <p-button\r\n              [rounded]=\"true\"\r\n              [text]=\"true\"\r\n              *ngIf=\"shouldShowOptionsButton(row)\"\r\n              (onClick)=\"onOptionsClick($event, row)\"\r\n            >\r\n              <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n            </p-button>\r\n          </div>\r\n        </td>\r\n        <td *ngIf=\"smartGrid.expandable\">\r\n          <p-button\r\n            type=\"button\"\r\n            pRipple\r\n            [pRowToggler]=\"row\"\r\n            [text]=\"true\"\r\n            severity=\"secondary\"\r\n            [rounded]=\"true\"\r\n            [icon]=\"expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'\"\r\n          />\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    @if(smartGrid.expandable){\r\n    <ng-template pTemplate=\"rowexpansion\" let-row>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <lib-expanded-row-renderer-component\r\n            [rowId]=\"row.id\"\r\n            [rowExpander]=\"this\"\r\n            [expandedComponent]=\"smartGrid.expandedComponent\"\r\n            [smartGrid]=\"this.smartGrid\"\r\n          ></lib-expanded-row-renderer-component>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n  </p-table>\r\n  <div\r\n    *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n    class=\"cards-container\"\r\n    [ngStyle]=\"{\r\n      'grid-template-columns':\r\n        smartGrid.numberOfColumn !== undefined\r\n          ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n          : ''\r\n    }\"\r\n  >\r\n    <app-smart-grid-card\r\n      class=\"smartGrid-card-container\"\r\n      *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n      [item]=\"task\"\r\n      [smartGrid]=\"smartGrid\"\r\n      [onSelect]=\"onSelect.bind(this)\"\r\n    ></app-smart-grid-card>\r\n  </div>\r\n<div *ngIf=\"smartGrid.paginator\" class=\"paginator-row\">\r\n  <div class=\"paginator-wrap\">\r\n    <p-paginator\r\n      [first]=\"pageIndex!\"\r\n      [totalRecords]=\"length!\"\r\n      [rows]=\"pageSize\"\r\n      [rowsPerPageOptions]=\"pageSizeOptions\"\r\n      currentPageReportTemplate=\"{first} - {last} / {totalRecords}\"\r\n      (onPageChange)=\"onPrimeChangePage($event)\"\r\n      [showCurrentPageReport]=\"true\"\r\n      dropdownAppendTo=\"body\"\r\n    ></p-paginator>\r\n  </div>\r\n\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-refresh\"\r\n    class=\"p-button-text\"\r\n    pTooltip=\"Friss\u00EDt\u00E9s\"\r\n    (click)=\"refreshPartialResults()\"\r\n    *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n  ></button>\r\n</div>\r\n  <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\" appendTo=\"body\"> </p-menu>\r\n</div>\r\n}@else {\r\n<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-toolbar\">\r\n    <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    <button\r\n      (click)=\"editColumns()\"\r\n      mat-mini-fab\r\n      color=\"text-primary\"\r\n      *ngIf=\"smartGrid.showEditColumns\"\r\n    >\r\n      <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n        >view_columns</mat-icon\r\n      >\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n<div *ngIf=\"smartGrid.paginator\" class=\"paginator-row-material\">\r\n  <button\r\n   pButton\r\n   type=\"button\"\r\n   icon=\"pi pi-refresh\"\r\n   class=\"p-button-text\"\r\n   pTooltip=\"Friss\u00EDt\u00E9s\"\r\n   (click)=\"refreshPartialResults()\"\r\n   *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n ></button>\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator && !treeControl\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageIndex]=\"pageIndex\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.headerToolbar ::ng-deep .uiActionButtonsContainer{justify-content:flex-end}.tableCaption{display:flex;flex-direction:row;justify-content:space-between}.tableCaption:has(*){padding:.5rem;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable .p-datatable-header{padding:.5rem}.captionTitle{font-size:1.5rem;align-content:center}:host ::ng-deep .p-datatable-header:has(.tableCaption){padding:0;border:unset}.paginator-row{display:flex;align-items:center;align-self:center;gap:.25rem}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.paginator-wrap{flex:0 0 auto;min-width:0}:host ::ng-deep .paginator-wrap .p-paginator{width:auto}\n"] }]
+            args: [{ selector: 'smart-grid', providers: [SmartGridService, SmartDatePipe, SmartDateTimePipe, SmartTimePipe], template: "@if (compLib === componentLibrary.PRIMENG) {\r\n  <div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    </div>\r\n    <p-table\r\n      *ngIf=\"!smartGrid.layoutDef || smartGrid.layoutDef === layoutDef().TABLE\"\r\n      #pTable\r\n      [value]=\"smartGrid.gridModel.page.rows!\"\r\n      (onSort)=\"gridSort($event)\"\r\n      [customSort]=\"true\"\r\n      [sortMode]=\"'multiple'\"\r\n      [lazy]=\"true\"\r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      [reorderableColumns]=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n      [columns]=\"columns\"\r\n      (onColReorder)=\"onColOrder($event)\"\r\n      (onRowSelect)=\"onRowSelect($event)\"\r\n      (onRowUnselect)=\"onRowUnselect($event)\"\r\n      [selection]=\"selectedRows\"\r\n      (onHeaderCheckboxToggle)=\"onSelectAllRow($event)\"\r\n      dataKey=\"id\"\r\n      [expandedRowKeys]=\"expandedRows\"\r\n      [rowExpandMode]=\"'multiple'\"\r\n      [rowTrackBy]=\"rowTrackByFn\"\r\n    >\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"tableCaption\">\r\n          <div *ngIf=\"smartGrid.gridModel.title\" class=\"captionTitle\">\r\n            {{ smartGrid.gridModel.title }}\r\n          </div>\r\n          <div *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n            <p-multiSelect\r\n              display=\"chip\"\r\n              [options]=\"smartGrid.gridModel.view?.descriptor?.columns\"\r\n              optionLabel=\"label\"\r\n              [(ngModel)]=\"columns\"\r\n              selectedItemsLabel=\"{0} columns selected\"\r\n              [style]=\"{ 'min-width': '200px' }\"\r\n              placeholder=\"Choose Columns\"\r\n              (onChange)=\"headerChange($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          @if (smartGrid.gridModel.view?.descriptor?.showEditColumns) {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              pReorderableColumn\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          } @else {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          }\r\n\r\n          <th>\r\n            <smart-ui-action-toolbar\r\n              class=\"headerToolbar\"\r\n              #headerToolbar\r\n              [id]=\"'header_not_initialized'\"\r\n            ></smart-ui-action-toolbar>\r\n          </th>\r\n          <th *ngIf=\"smartGrid.expandable\"> </th>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-row let-expanded=\"expanded\">\r\n        <tr\r\n          [ngClass]=\"getStyle(row)\"\r\n          [class.rowExpanded]=\"expanded\"\r\n          (dblclick)=\"onDoubleClick(row)\"\r\n          *ngIf=\"row && row.data\"\r\n          [attr.data-testid]=\"row.id ?? null\"\r\n        >\r\n          <td *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableCheckbox *ngIf=\"row.selectable != false\" [value]=\"row\" />\r\n          </td>\r\n          <td *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableRadioButton [value]=\"row\" />\r\n          </td>\r\n          <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n            <div *ngIf=\"row.icons[col]\">\r\n              <div class=\"smart-table-icon-container\">\r\n                <div *ngFor=\"let ir of getImageResourceIcons(row, col)\">\r\n                  <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"showCellToolbar(row, col)\">\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(row, col)\"\r\n              ></smart-ui-action-toolbar>\r\n            </ng-container>\r\n\r\n            <div *ngIf=\"!row.icons[col]\" [innerHtml]=\"getColValue(col, row)\"> </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"menu-button\">\r\n              @if (showCellToolbar(row, defaultActionToolbarId)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n              @if (shouldShowOptionsButton(row)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(row)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n            </div>\r\n          </td>\r\n          <td *ngIf=\"smartGrid.expandable\">\r\n            <p-button\r\n              type=\"button\"\r\n              pRipple\r\n              [pRowToggler]=\"row\"\r\n              [text]=\"true\"\r\n              severity=\"secondary\"\r\n              [rounded]=\"true\"\r\n              [icon]=\"expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'\"\r\n            />\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n      @if (smartGrid.expandable) {\r\n        <ng-template pTemplate=\"rowexpansion\" let-row>\r\n          <tr>\r\n            <td colspan=\"100%\">\r\n              <lib-expanded-row-renderer-component\r\n                [rowId]=\"row.id\"\r\n                [rowExpander]=\"this\"\r\n                [expandedComponent]=\"smartGrid.expandedComponent\"\r\n                [smartGrid]=\"this.smartGrid\"\r\n              ></lib-expanded-row-renderer-component>\r\n            </td>\r\n          </tr>\r\n        </ng-template>\r\n      }\r\n    </p-table>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : '',\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row\">\r\n      <div class=\"paginator-wrap\">\r\n        <p-paginator\r\n          [first]=\"pageIndex!\"\r\n          [totalRecords]=\"length!\"\r\n          [rows]=\"pageSize\"\r\n          [rowsPerPageOptions]=\"pageSizeOptions\"\r\n          currentPageReportTemplate=\"{first} - {last} / {totalRecords}\"\r\n          (onPageChange)=\"onPrimeChangePage($event)\"\r\n          [showCurrentPageReport]=\"true\"\r\n          dropdownAppendTo=\"body\"\r\n        ></p-paginator>\r\n      </div>\r\n\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n    </div>\r\n    <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\" appendTo=\"body\"> </p-menu>\r\n  </div>\r\n} @else {\r\n  <div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n      <button\r\n        (click)=\"editColumns()\"\r\n        mat-mini-fab\r\n        color=\"text-primary\"\r\n        *ngIf=\"smartGrid.showEditColumns\"\r\n      >\r\n        <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n          >view_columns</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n    <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n    <div class=\"smartGridContent\">\r\n      <div>\r\n        <div *ngIf=\"smartGrid.showResultCount\">\r\n          <div class=\"smartGrid-data-number\">\r\n            {{ smartGrid.gridModel.totalRowCount }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"smart-grid-table-container\">\r\n        <ng-template #table></ng-template>\r\n      </div>\r\n\r\n      <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n        <smart-expandable-section\r\n          #gridExpandableSection\r\n          *ngFor=\"let expandableSection of expandableSections\"\r\n          [data]=\"expandableSection\"\r\n        ></smart-expandable-section>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n        class=\"cards-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <app-smart-grid-card\r\n          class=\"smartGrid-card-container\"\r\n          *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n          [item]=\"task\"\r\n          [smartGrid]=\"smartGrid\"\r\n          [onSelect]=\"onSelect.bind(this)\"\r\n        ></app-smart-grid-card>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n        class=\"tree-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node\"\r\n            matTreeNodeToggle\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button mat-icon-button disabled class=\"tree-button\"></button>\r\n            <mat-checkbox\r\n              class=\"checklist-leaf-node\"\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node; when: hasChild\"\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button\r\n              mat-icon-button\r\n              matTreeNodeToggle\r\n              class=\"tree-button\"\r\n              [attr.aria-label]=\"'Toggle ' + node.item\"\r\n            >\r\n              <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n              </mat-icon>\r\n            </button>\r\n            <mat-checkbox\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n        </mat-tree>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row-material\">\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n      <mat-paginator\r\n        *ngIf=\"smartGrid.paginator && !treeControl\"\r\n        #paginator\r\n        [length]=\"length\"\r\n        [pageIndex]=\"pageIndex\"\r\n        [pageSize]=\"pageSize\"\r\n        [pageSizeOptions]=\"pageSizeOptions\"\r\n        (page)=\"onChangePage($event)\"\r\n      ></mat-paginator>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.headerToolbar ::ng-deep .uiActionButtonsContainer{justify-content:flex-end}.tableCaption{display:flex;flex-direction:row;justify-content:space-between}.tableCaption:has(*){padding:.5rem;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable .p-datatable-header{padding:.5rem}.captionTitle{font-size:1.5rem;align-content:center}:host ::ng-deep .p-datatable-header:has(.tableCaption){padding:0;border:unset}.paginator-row{display:flex;align-items:center;align-self:center;gap:.25rem}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.paginator-wrap{flex:0 0 auto;min-width:0}:host ::ng-deep .paginator-wrap .p-paginator{width:auto}\n"] }]
         }], ctorParameters: () => [{ type: SmartGridService }, { type: ComponentFactoryService }, { type: i1$3.MatDialog }, { type: i0.Injector }, { type: UiActionDescriptorService }, { type: SmartDatePipe }, { type: SmartDateTimePipe }, { type: SmartTimePipe }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -19203,11 +19316,11 @@ class SmartTreeComponent {
         return `${cssClass}-${plusProperty}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartTreeComponent, selector: "smart-tree", inputs: { treeStyle: "treeStyle", treeService: "treeService" }, host: { properties: { "attr.data-testid": "this.testId" } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button\r\n          mat-icon-button\r\n          matTreeNodeToggle\r\n          (click)=\"onOpenNode($event, node)\"\r\n          [attr.aria-label]=\"'Toggle ' + node.name\"\r\n        >\r\n          <mat-icon class=\"mat-icon-rtl-mirror\">\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                  [attr.data-testid]=\"button.code ?? null\"\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <div *ngIf=\"!treeData\" class=\"tree-skeleton\" aria-hidden=\"true\">\r\n      <div class=\"skeleton-row\" style=\"--depth: 0; --w: 58%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 72%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 45%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 60%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 50%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 65%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 0; --w: 40%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 55%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.tree-skeleton{--skeleton-bg-color: #c7cbd1;display:flex;flex-direction:column;gap:.5rem;padding:.5rem 0}.skeleton-row{display:flex;align-items:center;gap:.5rem;padding-left:calc(var(--depth, 0) * 1.25rem)}.skeleton-caret{width:.9rem;height:.9rem;border-radius:2px;background:var(--skeleton-bg-color);flex-shrink:0;animation:skeleton-pulse 2s ease-in-out infinite}.skeleton-label{height:1.2rem;width:var(--w);border-radius:4px;background:var(--skeleton-bg-color);animation:skeleton-pulse 2s ease-in-out infinite}.skeleton-label.leaf{margin-left:1.1rem}@keyframes skeleton-pulse{0%,to{opacity:.35}50%{opacity:1}}@media (prefers-reduced-motion: reduce){.skeleton-caret,.skeleton-label{animation:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i11$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i11$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartTreeComponent, selector: "smart-tree", inputs: { treeStyle: "treeStyle", treeService: "treeService" }, host: { properties: { "attr.data-testid": "this.testId" } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button\r\n          mat-icon-button\r\n          matTreeNodeToggle\r\n          (click)=\"onOpenNode($event, node)\"\r\n          [attr.aria-label]=\"'Toggle ' + node.name\"\r\n        >\r\n          <mat-icon class=\"mat-icon-rtl-mirror\">\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                  [attr.data-testid]=\"button.code ?? null\"\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <div *ngIf=\"!treeData\" class=\"tree-skeleton\" aria-hidden=\"true\">\r\n      <div class=\"skeleton-row\" style=\"--depth: 0; --w: 58%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 72%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 45%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 60%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 50%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 65%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 0; --w: 40%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 55%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.tree-skeleton{--skeleton-bg-color: #c7cbd1;display:flex;flex-direction:column;gap:.5rem;padding:1rem}.skeleton-row{display:flex;align-items:center;gap:.5rem;padding-left:calc(var(--depth, 0) * 1.25rem)}.skeleton-caret{width:.9rem;height:.9rem;border-radius:2px;background:var(--skeleton-bg-color);flex-shrink:0;animation:skeleton-pulse 2s ease-in-out infinite}.skeleton-label{height:1.2rem;width:var(--w);border-radius:4px;background:var(--skeleton-bg-color);animation:skeleton-pulse 2s ease-in-out infinite}.skeleton-label.leaf{margin-left:1.1rem}@keyframes skeleton-pulse{0%,to{opacity:.35}50%{opacity:1}}@media (prefers-reduced-motion: reduce){.skeleton-caret,.skeleton-label{animation:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i11$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i11$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-tree', template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button\r\n          mat-icon-button\r\n          matTreeNodeToggle\r\n          (click)=\"onOpenNode($event, node)\"\r\n          [attr.aria-label]=\"'Toggle ' + node.name\"\r\n        >\r\n          <mat-icon class=\"mat-icon-rtl-mirror\">\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                  [attr.data-testid]=\"button.code ?? null\"\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <div *ngIf=\"!treeData\" class=\"tree-skeleton\" aria-hidden=\"true\">\r\n      <div class=\"skeleton-row\" style=\"--depth: 0; --w: 58%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 72%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 45%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 60%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 50%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 65%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 0; --w: 40%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 55%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.tree-skeleton{--skeleton-bg-color: #c7cbd1;display:flex;flex-direction:column;gap:.5rem;padding:.5rem 0}.skeleton-row{display:flex;align-items:center;gap:.5rem;padding-left:calc(var(--depth, 0) * 1.25rem)}.skeleton-caret{width:.9rem;height:.9rem;border-radius:2px;background:var(--skeleton-bg-color);flex-shrink:0;animation:skeleton-pulse 2s ease-in-out infinite}.skeleton-label{height:1.2rem;width:var(--w);border-radius:4px;background:var(--skeleton-bg-color);animation:skeleton-pulse 2s ease-in-out infinite}.skeleton-label.leaf{margin-left:1.1rem}@keyframes skeleton-pulse{0%,to{opacity:.35}50%{opacity:1}}@media (prefers-reduced-motion: reduce){.skeleton-caret,.skeleton-label{animation:none}}\n"] }]
+            args: [{ selector: 'smart-tree', template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button\r\n          mat-icon-button\r\n          matTreeNodeToggle\r\n          (click)=\"onOpenNode($event, node)\"\r\n          [attr.aria-label]=\"'Toggle ' + node.name\"\r\n        >\r\n          <mat-icon class=\"mat-icon-rtl-mirror\">\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                  [attr.data-testid]=\"button.code ?? null\"\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <div *ngIf=\"!treeData\" class=\"tree-skeleton\" aria-hidden=\"true\">\r\n      <div class=\"skeleton-row\" style=\"--depth: 0; --w: 58%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 72%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 45%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 60%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 50%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 2; --w: 65%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 0; --w: 40%\">\r\n        <span class=\"skeleton-caret\"></span>\r\n        <span class=\"skeleton-label\"></span>\r\n      </div>\r\n      <div class=\"skeleton-row\" style=\"--depth: 1; --w: 55%\">\r\n        <span class=\"skeleton-label leaf\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.tree-skeleton{--skeleton-bg-color: #c7cbd1;display:flex;flex-direction:column;gap:.5rem;padding:1rem}.skeleton-row{display:flex;align-items:center;gap:.5rem;padding-left:calc(var(--depth, 0) * 1.25rem)}.skeleton-caret{width:.9rem;height:.9rem;border-radius:2px;background:var(--skeleton-bg-color);flex-shrink:0;animation:skeleton-pulse 2s ease-in-out infinite}.skeleton-label{height:1.2rem;width:var(--w);border-radius:4px;background:var(--skeleton-bg-color);animation:skeleton-pulse 2s ease-in-out infinite}.skeleton-label.leaf{margin-left:1.1rem}@keyframes skeleton-pulse{0%,to{opacity:.35}50%{opacity:1}}@media (prefers-reduced-motion: reduce){.skeleton-caret,.skeleton-label{animation:none}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
                 type: ViewChildren,
                 args: [MatMenuTrigger]
@@ -25410,5 +25523,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APIS$5 as APIS, AbstractMap, AclEditingViewComponent, ApiModule$5 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, COMPONENT_LIBRARY, CUSTOM_DIAGRAM_OPTIONS, ClickMenuComponent, CloseResult, ComparableDropdownDirective, ComparableMultiselectDirective, ComponentFactoryService, ComponentFactoryServiceModule, ComponentLibrary, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GoogleMap, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, HoverMenuComponent, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LeafletMap, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PhotoCaptureWidgetComponent, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DEFAULT_VIEW_COMPONENTS, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SharedModule, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartComponentLayoutModule, SmartComponentLayoutUtility, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDiagramModule, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionModule, SmartExpandableSectionService, SmartFileEditorComponent, SmartFileUploaderComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorModule, SmartFilterEditorService, SmartFilterExpressionItemComponent, SmartFilterExpressionItemsComponent, SmartFilterModule, SmartFilterParamComponent, SmartFilterParamsComponent, SmartFilterPosition, SmartFilterType, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGenericPagesModule, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridModule, SmartGridService, SmartGridType, SmartIconComponent, SmartIconModule, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMapModule, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarModule, SmartNavbarService, SmartNavigationModule, SmartNavigationService, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSessionTimerService, SmartSubject, SmartTabGroupModule, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidationModule, SmartValidatorName, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartWidgetSettings, SmartdialogModule, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmartformwidgetComponent, SmarttableComponent, SmarttableModule, SmarttableService, SmarttreeGenericService, SmarttreeModule, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarDirection, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetComponent, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, VoiceRecordWidgetComponent, barChart, bubbleChart, createBasicOptions, doughnutChart, horizontalBarChart, horizontalStackedBarChart, multiAxisLineChart, pieChart, polarAreaChart, radarChart, resolveSlot, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter };
+export { APIS$5 as APIS, AbstractMap, AclEditingViewComponent, ApiModule$5 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, COMPONENT_LIBRARY, CUSTOM_DIAGRAM_OPTIONS, ClickMenuComponent, CloseResult, ComparableDropdownDirective, ComparableMultiselectDirective, ComponentFactoryService, ComponentFactoryServiceModule, ComponentLibrary, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GoogleMap, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, HoverMenuComponent, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LeafletMap, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PhotoCaptureWidgetComponent, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DEFAULT_VIEW_COMPONENTS, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SharedModule, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartComponentLayoutModule, SmartComponentLayoutUtility, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDiagramModule, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionModule, SmartExpandableSectionService, SmartFileEditorComponent, SmartFileUploaderComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorModule, SmartFilterEditorService, SmartFilterExpressionItemComponent, SmartFilterExpressionItemsComponent, SmartFilterModule, SmartFilterParamComponent, SmartFilterParamsComponent, SmartFilterPosition, SmartFilterType, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGenericPagesModule, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridModule, SmartGridService, SmartGridType, SmartIconComponent, SmartIconModule, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMapModule, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarModule, SmartNavbarService, SmartNavigationModule, SmartNavigationService, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSessionTimerService, SmartSubject, SmartTabGroupModule, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidationModule, SmartValidatorName, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartWidgetSettings, SmartdialogModule, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmartformwidgetComponent, SmarttableComponent, SmarttableModule, SmarttableService, SmarttreeGenericService, SmarttreeModule, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarDirection, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetComponent, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, VoiceRecordWidgetComponent, barChart, bubbleChart, createBasicOptions, doughnutChart, horizontalBarChart, horizontalStackedBarChart, multiAxisLineChart, pieChart, polarAreaChart, radarChart, resolveSlot, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map