@smartbit4all/ng-client 6.0.19 → 6.0.21

package/fesm2022/smartbit4all-ng-client.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, RendererStyleFlags2, Directive, Input, HostBinding, HostListener, Component, EventEmitter, Output, signal, computed, ViewChildren, ViewChild, input, ElementRef, forwardRef, Pipe, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, output, effect, inject, ApplicationRef, viewChild, ChangeDetectorRef } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, RendererStyleFlags2, Directive, Input, HostBinding, HostListener, input, computed, Component, EventEmitter, Output, signal, ViewChildren, ViewChild, ElementRef, forwardRef, Pipe, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, output, effect, inject, ApplicationRef, viewChild, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpErrorResponse, HttpParams, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { Subject, lastValueFrom, take, tap, takeUntil, interval, startWith, map, distinctUntilChanged, catchError, throwError, from } from 'rxjs';
@@ -3225,16 +3225,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }] } });
 
 class UiBadgeComponent {
-    ngOnInit() {
-        if (this.descriptor?.value) {
-            this.effectiveValue = this.descriptor.value;
-        }
-        else if (this.inputValue) {
-            this.effectiveValue = this.inputValue;
-        }
+    constructor() {
+        this.descriptor = input();
+        this.inputValue = input();
+        this.effectiveValue = computed(() => this.descriptor()?.value || this.inputValue());
     }
     getBadgeClass() {
-        switch (this.descriptor?.color?.toLowerCase()) {
+        switch (this.descriptor()?.color?.toLowerCase()) {
             case 'primary':
                 return 'badge-primary';
             case 'secondary':
@@ -3250,16 +3247,12 @@ class UiBadgeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiBadgeComponent, selector: "ui-badge", inputs: { descriptor: "descriptor", inputValue: "inputValue" }, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n@if (effectiveValue) {\r\n<div class=\"ui-action-badge\" [ngClass]=\"getBadgeClass()\">\r\n  {{ effectiveValue }}\r\n</div>\r\n}\r\n", styles: [".ui-action-badge{position:absolute;top:.1rem;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0;padding:0 .5rem;border-radius:1rem;color:#fff;font-size:.75rem;font-weight:700;line-height:1rem;display:inline-block;text-align:center;white-space:nowrap;z-index:100}:host{display:flex;width:fit-content;height:fit-content;position:relative}.badge-primary{background-color:var(--primary-color)}.badge-secondary{background-color:var(--secondary-color)}.badge-accent{background-color:var(--accent-color)}.badge-error{background-color:var(--error-color)}.badge-warn{background-color:var(--warn-color)}.badge-default{background-color:#ef4444}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiBadgeComponent, selector: "ui-badge", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n@if (effectiveValue()) {\r\n  <div class=\"ui-action-badge\" [ngClass]=\"getBadgeClass()\">\r\n    {{ effectiveValue() }}\r\n  </div>\r\n}\r\n", styles: [".ui-action-badge{position:absolute;top:.1rem;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0;padding:0 .5rem;border-radius:1rem;color:#fff;font-size:.75rem;font-weight:700;line-height:1rem;display:inline-block;text-align:center;white-space:nowrap;z-index:100}:host{display:flex;width:fit-content;height:fit-content;position:relative}.badge-primary{background-color:var(--primary-color)}.badge-secondary{background-color:var(--secondary-color)}.badge-accent{background-color:var(--accent-color)}.badge-error{background-color:var(--error-color)}.badge-warn{background-color:var(--warn-color)}.badge-default{background-color:#ef4444}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-badge', template: "<ng-content></ng-content>\r\n\r\n@if (effectiveValue) {\r\n<div class=\"ui-action-badge\" [ngClass]=\"getBadgeClass()\">\r\n  {{ effectiveValue }}\r\n</div>\r\n}\r\n", styles: [".ui-action-badge{position:absolute;top:.1rem;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0;padding:0 .5rem;border-radius:1rem;color:#fff;font-size:.75rem;font-weight:700;line-height:1rem;display:inline-block;text-align:center;white-space:nowrap;z-index:100}:host{display:flex;width:fit-content;height:fit-content;position:relative}.badge-primary{background-color:var(--primary-color)}.badge-secondary{background-color:var(--secondary-color)}.badge-accent{background-color:var(--accent-color)}.badge-error{background-color:var(--error-color)}.badge-warn{background-color:var(--warn-color)}.badge-default{background-color:#ef4444}\n"] }]
-        }], propDecorators: { descriptor: [{
-                type: Input
-            }], inputValue: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ui-badge', template: "<ng-content></ng-content>\r\n\r\n@if (effectiveValue()) {\r\n  <div class=\"ui-action-badge\" [ngClass]=\"getBadgeClass()\">\r\n    {{ effectiveValue() }}\r\n  </div>\r\n}\r\n", styles: [".ui-action-badge{position:absolute;top:.1rem;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0;padding:0 .5rem;border-radius:1rem;color:#fff;font-size:.75rem;font-weight:700;line-height:1rem;display:inline-block;text-align:center;white-space:nowrap;z-index:100}:host{display:flex;width:fit-content;height:fit-content;position:relative}.badge-primary{background-color:var(--primary-color)}.badge-secondary{background-color:var(--secondary-color)}.badge-accent{background-color:var(--accent-color)}.badge-error{background-color:var(--error-color)}.badge-warn{background-color:var(--warn-color)}.badge-default{background-color:#ef4444}\n"] }]
+        }] });
 
 class UiBadgeDirective {
     constructor(vcr, el, renderer) {
@@ -3273,8 +3266,8 @@ class UiBadgeDirective {
         const host = this.el.nativeElement;
         const parent = host.parentNode;
         const badgeComponent = this.vcr.createComponent(UiBadgeComponent);
-        badgeComponent.instance.descriptor = this.descriptor;
-        badgeComponent.instance.inputValue = this.inputValue;
+        badgeComponent.setInput('descriptor', this.descriptor);
+        badgeComponent.setInput('inputValue', this.inputValue);
         this.renderer.insertBefore(parent, badgeComponent.location.nativeElement, host);
         this.renderer.removeChild(parent, host);
         this.renderer.appendChild(badgeComponent.location.nativeElement, host);
@@ -3425,7 +3418,6 @@ class UiActionButtonComponent {
         this._destroy$.complete();
     }
     async onActionClicked(event, model) {
-        event.stopPropagation();
         this.actionClick.emit({
             event,
             code: model.uiAction.code,
@@ -3433,7 +3425,6 @@ class UiActionButtonComponent {
         });
     }
     onActionDoubleClicked(event) {
-        event.stopPropagation();
         this.actionDoubleClick.emit({
             event,
             code: this.code,
@@ -4213,13 +4204,7 @@ class SmartViewContextService {
             parameters: new Map(),
         };
         viewContextUpdate.deviceInfo.componentLibrary = this.componentLibrary;
-        try {
-            var selectedTheme = await this.themeService.getSelectedTheme();
-            viewContextUpdate.deviceInfo.themeName = selectedTheme.name;
-        }
-        catch (e) {
-            // No themes are avalible
-        }
+        viewContextUpdate.deviceInfo.themeName = this.themeService.currentTheme();
         this.viewContext = await this.view.updateViewContext(viewContextUpdate).toPromise();
         return this.viewContext;
     }
@@ -6428,7 +6413,12 @@ class UiActionService {
             };
         }
         else if (uiAction.submit || uiAction.model) {
-            uiActionRequest.params['model'] = uiActionModel.serviceToUse.getModel();
+            if (options?.widgetId && options?.nodeId) {
+                uiActionRequest.params['clientPageModel'] = uiActionModel.serviceToUse.getModel();
+            }
+            else {
+                uiActionRequest.params['model'] = uiActionModel.serviceToUse.getModel();
+            }
         }
         if (uiAction.composite) {
             const containerUuid = uiActionModel.serviceToUse.uuid;
@@ -11293,35 +11283,23 @@ class SmartGridToolbarActionsUtil {
     static showToolbar(row, columnName) {
         return !!row.actions && row.actions.length > 0 && !!row.columnActions?.[columnName];
     }
+    // ##### IN ROW ACTIONS
     static calculateCellToActionMap(rows, serviceToUse, gridId) {
-        let cellToActionMap = {};
+        const cellToActionMap = {};
         rows.forEach((row) => {
             if (row?.columnActions && row?.actions) {
                 Object.keys(row.columnActions).forEach((columnName) => {
-                    let key = row.id + columnName;
+                    const key = row.id + columnName;
                     const actionCodes = row.columnActions[columnName];
-                    const actions = row.actions.filter((action) => action.code && actionCodes.includes(action.code));
-                    const actionModels = actions.map((uiAction) => {
-                        //Add row to uiAction
-                        let _uiAction = { ...uiAction };
-                        _uiAction.params = {
-                            ...uiAction.params,
-                            model: row,
-                        };
-                        // Add gridId and widgetId to uiActionMod
-                        return {
-                            serviceToUse: serviceToUse,
-                            uiAction: _uiAction,
-                            nodeId: row.id,
-                            widgetId: gridId,
-                        };
-                    });
-                    cellToActionMap[key] = actionModels;
+                    cellToActionMap[key] = row.actions
+                        .filter((action) => action.code && actionCodes.includes(action.code))
+                        .map((uiAction) => this.toActionModel(uiAction, row, serviceToUse, gridId));
                 });
             }
         });
         return cellToActionMap;
     }
+    // ##### MENU ACTIONS
     static calculateMenuActions(row, orderedColumns) {
         var _columnsToFilter = [
             ...orderedColumns.map((col) => col.startsWith('data.') ? col.substring('data.'.length) : col),
@@ -11333,10 +11311,29 @@ class SmartGridToolbarActionsUtil {
             .flat();
         return row.actions?.filter((action) => !columnCodes.includes(action.code)) ?? [];
     }
+    static calculateMenuActionModels(row, orderedColumns, serviceToUse, gridId) {
+        return this.calculateMenuActions(row, orderedColumns).map((uiAction) => this.toActionModel(uiAction, row, serviceToUse, gridId));
+    }
     static getActionModelsFromMap(cellToActionMap, row, header) {
         let key = row.id + header;
         return cellToActionMap[key];
     }
+    // ##### HELPERS
+    static toActionModel(uiAction, row, serviceToUse, gridId) {
+        const _uiAction = {
+            ...uiAction,
+            params: {
+                ...uiAction.params,
+                model: row,
+            },
+        };
+        return {
+            serviceToUse,
+            uiAction: _uiAction,
+            nodeId: row.id,
+            widgetId: gridId,
+        };
+    }
 }
 
 class Table {
@@ -11828,35 +11825,27 @@ class Table {
         return SmartGridToolbarActionsUtil.showToolbar(row, this.originalProperty(columnName));
     }
     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) {
+        const service = this.smartTable.getServiceToUse();
+        const gridId = this.smartTable.getGridId();
+        if (!service || !gridId)
             return undefined;
-        }
-        var leftoverActions = SmartGridToolbarActionsUtil.calculateMenuActions(element, this.smartTable.tableHeaders) ?? [];
-        var menuUiAction = {
+        const leftoverActions = SmartGridToolbarActionsUtil.calculateMenuActionModels(element, this.smartTable.tableHeaders, service, gridId);
+        const menuUiAction = {
             code: 'rowMenu',
             descriptor: {
                 icon: 'more_vert',
-                iconColor: 'primary',
                 title: '',
                 type: UiActionButtonType.ICON,
                 color: 'primary',
             },
-            subActions: leftoverActions,
+            subActions: leftoverActions.map((m) => m.uiAction),
         };
-        var model = {
+        return {
             serviceToUse: service,
             uiAction: menuUiAction,
             nodeId: element.id,
             widgetId: gridId,
         };
-        this.rowMenuActionModelCache.set(cacheKey, model);
-        return model;
     }
     getRowMenuActionModelArray(element) {
         var cacheKey = element.id;
@@ -17371,13 +17360,13 @@ class SmartGridComponent {
         return row.id;
     }
     getRowMenuActionModelArray(row) {
-        var cacheKey = row.id;
+        const 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 = {
+            const leftoverActionModels = SmartGridToolbarActionsUtil.calculateMenuActionModels(row, this.smartGrid.gridModel.view?.orderedColumnNames, this.smartGrid.serviceToUse, this.smartGrid.gridIdentifier);
+            const menuUiAction = {
                 code: 'rowMenu',
                 descriptor: {
                     icon: 'ellipsis-v',
@@ -17385,9 +17374,9 @@ class SmartGridComponent {
                     type: UiActionButtonType.ICON,
                     color: 'primary',
                 },
-                subActions: leftoverActions,
+                subActions: leftoverActionModels.map((m) => m.uiAction),
             };
-            var model = {
+            const model = {
                 serviceToUse: this.smartGrid.serviceToUse,
                 uiAction: menuUiAction,
                 nodeId: row.id,
@@ -17395,7 +17384,7 @@ class SmartGridComponent {
             };
             this.rowMenuActionModelCache.set(cacheKey, model);
         }
-        var arr = [this.rowMenuActionModelCache.get(cacheKey)];
+        const arr = [this.rowMenuActionModelCache.get(cacheKey)];
         this.rowMenuActionModelArrayCache.set(cacheKey, arr);
         return arr;
     }
@@ -18978,9 +18967,9 @@ class SmarttreeGenericService extends SmarttreeService {
             this.constructUiActionModels(uiActions);
         }
         if (!rootNodes) {
-            throw new Error('RootNodes are undefined!');
+            console.error('RootNodes are undefined!');
         }
-        return rootNodes;
+        return rootNodes ?? [];
     }
     async downloadChildren(parentNode) {
         let uuid = this.viewContext.getUuidOfPage(this.pageName);
@@ -19362,11 +19351,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 mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onOpenNode($event, node)\">\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"] }] }); }
+    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 mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onOpenNode($event, node)\">\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\" class=\"tree-loading\">\r\n    <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\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-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\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"] }, { kind: "component", type: i1$7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 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 mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onOpenNode($event, node)\">\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"] }]
+            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 mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onOpenNode($event, node)\">\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\" class=\"tree-loading\">\r\n    <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\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-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
                 type: ViewChildren,
                 args: [MatMenuTrigger]
@@ -19391,7 +19380,8 @@ class SmarttreeModule {
             MatTreeModule,
             MatMenuModule,
             SmartIconModule,
-            SmartViewContextModule], exports: [SmartTreeComponent] }); }
+            SmartViewContextModule,
+            MatProgressSpinnerModule], exports: [SmartTreeComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, providers: [
             SmarttreeService,
             SmarttreeGenericService,
@@ -19403,7 +19393,8 @@ class SmarttreeModule {
             MatTreeModule,
             MatMenuModule,
             SmartIconModule,
-            SmartViewContextModule] }); }
+            SmartViewContextModule,
+            MatProgressSpinnerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, decorators: [{
             type: NgModule,
@@ -19418,6 +19409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         MatMenuModule,
                         SmartIconModule,
                         SmartViewContextModule,
+                        MatProgressSpinnerModule,
                     ],
                     exports: [SmartTreeComponent],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -25239,6 +25231,7 @@ class SubjectSelectorComponent extends SmartComponent {
     onUuidResolved(uuid) {
         if (this.filterService.config) {
             this.filterService.config.uuid = uuid;
+            this.filterService.load();
         }
     }
     setup() {