@smartbit4all/ng-client 6.0.8 → 6.0.10

package/fesm2022/smartbit4all-ng-client.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, RendererStyleFlags2, Directive, Input, HostBinding, HostListener, Component, EventEmitter, Output, ViewChildren, ViewChild, ElementRef, forwardRef, Pipe, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, inject, input, computed, effect, signal, ApplicationRef, viewChild, ChangeDetectorRef } 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, 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, takeUntil, interval, startWith, map, distinctUntilChanged, catchError, throwError, from } from 'rxjs';
+import { Subject, lastValueFrom, take, tap, takeUntil, interval, startWith, map, distinctUntilChanged, catchError, throwError, from } from 'rxjs';
 import * as i1$2 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, DatePipe, CommonModule } from '@angular/common';
 import * as i5 from '@angular/material/button';
@@ -139,6 +139,13 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatTabsModule } from '@angular/material/tabs';
 
+var SessionErrorBehaviour;
+(function (SessionErrorBehaviour) {
+    SessionErrorBehaviour[SessionErrorBehaviour["REFRESH"] = 0] = "REFRESH";
+    SessionErrorBehaviour[SessionErrorBehaviour["RESTART"] = 1] = "RESTART";
+    SessionErrorBehaviour[SessionErrorBehaviour["RESTART_VIEWCONTEXT"] = 2] = "RESTART_VIEWCONTEXT";
+})(SessionErrorBehaviour || (SessionErrorBehaviour = {}));
+
 class SmartSubject extends Subject {
     constructor(unsubscribe$) {
         super();
@@ -1040,31 +1047,60 @@ class SmartSessionService {
     }
     async doRefreshSession() {
         try {
-            let refreshToken = localStorage.getItem('refreshToken');
+            const refreshToken = localStorage.getItem('refreshToken');
             if (!refreshToken) {
-                return await this.startSession();
+                // No refresh token at all: there is no HTTP refresh round-trip that the
+                // interceptor could classify as an error, so run the session-restart
+                // handling here instead of silently starting a new session.
+                return await this.failRefresh();
             }
-            try {
-                const sessionInfo = await lastValueFrom(this.apiService.refreshSession({ refreshToken }));
-                if (sessionInfo) {
-                    this.updateSessionInfo(sessionInfo);
-                    return sessionInfo;
-                }
+            const sessionInfo = await lastValueFrom(this.apiService.refreshSession({ refreshToken }));
+            if (!sessionInfo) {
+                // The refresh round-trip completed (HTTP 200) but yielded no session, so
+                // the interceptor never saw an error response — handle it here as well.
+                return await this.failRefresh();
             }
-            catch (error) {
-                if (this.isInvalidRefreshTokenError(error)) {
-                    await this.clearAndStartNewSession();
-                    // still throw the error, so the error can be handled in the caller
-                }
-                throw error;
-            }
-            // no sessionInfo returned
-            throw new Error('Unable to refresh session');
+            this.updateSessionInfo(sessionInfo);
+            return sessionInfo;
+            // If the refresh call itself FAILS with a session error, the
+            // SmartErrorCatchingInterceptor already runs handleSessionError for that
+            // (nested) HTTP error response. We let that error propagate unchanged and
+            // must NOT handle it again here — that would invoke handleSessionError twice.
         }
         finally {
             this.runningRefresh = undefined;
         }
     }
+    /**
+     * Runs the standard session-restart handling for a refresh that finished
+     * without an error HTTP response (no refresh token, or an empty refresh
+     * result), then throws a failure shaped like the backend's rejected refresh.
+     *
+     * Only the paths that do NOT produce an error HTTP response come here: a
+     * refresh call that fails with a session error is already handled by the
+     * SmartErrorCatchingInterceptor, so routing it through here too would invoke
+     * handleSessionError a second time.
+     */
+    async failRefresh() {
+        await this.handleSessionError({
+            code: 'session.refreshtoken.invalid',
+            behaviour: SessionErrorBehaviour.RESTART,
+        });
+        throw this.createRefreshFailedError();
+    }
+    /**
+     * Builds a failure shaped exactly like the backend's rejected-refresh
+     * response (HTTP 400 + ApiError.code === 'session.refreshtoken.invalid'), so a
+     * failed/impossible refresh surfaces like any other invalid refresh token
+     * instead of producing a fresh session as a refresh side effect.
+     */
+    createRefreshFailedError() {
+        const error = {
+            code: 'session.refreshtoken.invalid',
+            message: 'Unable to refresh session',
+        };
+        return new HttpErrorResponse({ status: 400, error });
+    }
     updateSessionInfo(sessionInfo) {
         this.sessionInfoData = sessionInfo;
         this.token = sessionInfo.sid;
@@ -1078,11 +1114,6 @@ class SmartSessionService {
         this.setUpTokenForSessionService();
         this.setAuthenticationStatus();
     }
-    isInvalidRefreshTokenError(error) {
-        return (error instanceof HttpErrorResponse &&
-            error.error &&
-            error.error.code === 'session.refreshtoken.invalid');
-    }
     async getAuthenticationProviders() {
         let providers = await this.apiService
             .getAuthenticationProviders()
@@ -1499,6 +1530,48 @@ class ViewService {
             reportProgress: reportProgress
         });
     }
+    getAndroidTheme(name, observe = 'body', reportProgress = false, options) {
+        if (name === null || name === undefined) {
+            throw new Error('Required parameter name was null or undefined when calling getAndroidTheme.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/context/themes/android/${this.configuration.encodeParam({ name: "name", value: name, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
+    }
     getComponentModel(uuid, observe = 'body', reportProgress = false, options) {
         if (uuid === null || uuid === undefined) {
             throw new Error('Required parameter uuid was null or undefined when calling getComponentModel.');
@@ -1583,6 +1656,174 @@ class ViewService {
             reportProgress: reportProgress
         });
     }
+    getIosTheme(name, observe = 'body', reportProgress = false, options) {
+        if (name === null || name === undefined) {
+            throw new Error('Required parameter name was null or undefined when calling getIosTheme.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/context/themes/ios/${this.configuration.encodeParam({ name: "name", value: name, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
+    }
+    getPublishedViewData(channel, uuid, observe = 'body', reportProgress = false, options) {
+        if (channel === null || channel === undefined) {
+            throw new Error('Required parameter channel was null or undefined when calling getPublishedViewData.');
+        }
+        if (uuid === null || uuid === undefined) {
+            throw new Error('Required parameter uuid was null or undefined when calling getPublishedViewData.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/smartlink/${this.configuration.encodeParam({ name: "channel", value: channel, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
+    }
+    getTheme(name, observe = 'body', reportProgress = false, options) {
+        if (name === null || name === undefined) {
+            throw new Error('Required parameter name was null or undefined when calling getTheme.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/context/themes/${this.configuration.encodeParam({ name: "name", value: name, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
+    }
+    getThemes(observe = 'body', reportProgress = false, options) {
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/context/themes`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
+    }
     getViewConstraint(uuid, observe = 'body', reportProgress = false, options) {
         if (uuid === null || uuid === undefined) {
             throw new Error('Required parameter uuid was null or undefined when calling getViewConstraint.');
@@ -2301,6 +2542,23 @@ 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 MenuTriggerType;
+(function (MenuTriggerType) {
+    MenuTriggerType["CLICK"] = "CLICK";
+    MenuTriggerType["HOVER"] = "HOVER";
+})(MenuTriggerType || (MenuTriggerType = {}));
+
 /**
  * View API
  * View API
@@ -2386,6 +2644,18 @@ var NamedValidatorOperationEnum;
 })(NamedValidatorOperationEnum || (NamedValidatorOperationEnum = {}));
 ;
 
+/**
+ * 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.
+ */
+
 /**
  * View API
  * View API
@@ -2410,6 +2680,18 @@ var ServerRequestType;
     ServerRequestType["GET_COMPONENT_MODEL"] = "GET_COMPONENT_MODEL";
 })(ServerRequestType || (ServerRequestType = {}));
 
+/**
+ * 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 SmartLinkMigrationStatusStatusEnum;
 (function (SmartLinkMigrationStatusStatusEnum) {
     SmartLinkMigrationStatusStatusEnum["RUNNING"] = "RUNNING";
@@ -3080,21 +3362,29 @@ class UiActionButtonComponent {
     }
     ngOnInit() {
         if (!this.descriptor) {
-            throw new Error('UiActionButtonComponent: "descriptor" input is required but was not provided.');
+            this.descriptor = {
+                title: this.code ?? 'UNDEFINED_BUTTON',
+                color: 'primary',
+                type: UiActionButtonType.FLAT,
+            };
         }
+        this.buildMainActionModel();
     }
     ngOnChanges(changes) {
         if (changes['descriptor'] && this.descriptor) {
-            this.mainActionModel = {
-                descriptor: this.descriptor,
-                uiAction: {
-                    descriptor: this.descriptor,
-                    code: this.code,
-                    disabled: this.disabled ?? false,
-                },
-            };
+            this.buildMainActionModel();
         }
     }
+    buildMainActionModel() {
+        this.mainActionModel = {
+            descriptor: this.descriptor,
+            uiAction: {
+                descriptor: this.descriptor,
+                code: this.code,
+                disabled: this.disabled ?? false,
+            },
+        };
+    }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
@@ -3517,6 +3807,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                     args: [COMPONENT_LIBRARY]
                 }] }] });
 
+const THEME_CACHE_KEY = 'themeCache';
+class ThemeService {
+    constructor(viewService) {
+        this.viewService = viewService;
+        this._currentTheme = signal(localStorage.getItem(THEME_CACHE_KEY) ??
+            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
+        this.currentTheme = computed(() => this._currentTheme());
+        this.themes = [];
+    }
+    setTheme(themeDescriptor) {
+        if (!themeDescriptor.name) {
+            throw new Error('No theme name given.');
+        }
+        document.documentElement.className = 'theme-' + themeDescriptor.name;
+        localStorage.setItem(THEME_CACHE_KEY, themeDescriptor.name);
+        this._currentTheme.set(themeDescriptor.name);
+    }
+    getThemes() {
+        return this.viewService.getThemes().pipe(tap((themes) => (this.themes = themes)));
+    }
+    async getSelectedTheme() {
+        if (this.themes.length === 0) {
+            this.themes = await lastValueFrom(this.getThemes());
+        }
+        var themeName = localStorage.getItem(THEME_CACHE_KEY) ?? this.getSystemTheme();
+        var theme = this.themes.find((t) => t.name === themeName) ?? this.themes.find((t) => t.name === 'light');
+        if (!theme) {
+            throw new Error('No theme found.');
+        }
+        return theme;
+    }
+    getSystemTheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ThemeService, deps: [{ token: ViewService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: ViewService }] });
+
 const SmartViewContextErrorDialogButtonLabel = 'SmartViewContextErrorDialogButtonLabel';
 const SmartViewContextErrorDialogTitle = 'SmartViewContextErrorDialogTitle';
 const SmartViewContextErrorDialogMessage = 'SmartViewContextErrorDialogMessage';
@@ -3534,11 +3868,12 @@ class SmartViewContextService {
         }
         return undefined;
     }
-    constructor(view, session, dialog, apiQueueService, inject, compLib, defaultViewComponents) {
+    constructor(view, session, dialog, apiQueueService, themeService, inject, compLib, defaultViewComponents) {
         this.view = view;
         this.session = session;
         this.dialog = dialog;
         this.apiQueueService = apiQueueService;
+        this.themeService = themeService;
         this.inject = inject;
         this.viewContextUuidName = 'viewContextUuid';
         this.viewContextUuidHeaderName = 'viewContextUuid';
@@ -3806,6 +4141,13 @@ 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
+        }
         this.viewContext = await this.view.updateViewContext(viewContextUpdate).toPromise();
         return this.viewContext;
     }
@@ -4510,7 +4852,7 @@ class SmartViewContextService {
     getCurrentViewContext() {
         return this.viewContext;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartViewContextService, deps: [{ token: ViewService }, { token: SmartSessionService }, { token: SmartViewContextDialogService }, { token: ApiQueueService }, { token: i0.Injector }, { token: COMPONENT_LIBRARY, optional: true }, { token: SMART_DEFAULT_VIEW_COMPONENTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartViewContextService, deps: [{ token: ViewService }, { token: SmartSessionService }, { token: SmartViewContextDialogService }, { token: ApiQueueService }, { token: ThemeService }, { token: i0.Injector }, { token: COMPONENT_LIBRARY, optional: true }, { token: SMART_DEFAULT_VIEW_COMPONENTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartViewContextService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartViewContextService, decorators: [{
@@ -4518,7 +4860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: ViewService }, { type: SmartSessionService }, { type: SmartViewContextDialogService }, { type: ApiQueueService }, { type: i0.Injector }, { type: ComponentLibrary, decorators: [{
+        }], ctorParameters: () => [{ type: ViewService }, { type: SmartSessionService }, { type: SmartViewContextDialogService }, { type: ApiQueueService }, { type: ThemeService }, { type: i0.Injector }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
                 }, {
@@ -5843,11 +6185,15 @@ class UiActionService {
         this._snackBar = _snackBar;
         this.viewContext = viewContext;
         this._destroy$ = new Subject();
+        this.onActionError = (_, err) => console.log(err);
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
+    setActionErrorHandler(f) {
+        this.onActionError = f;
+    }
     async execute(uiAction, uiActionModel, options) {
         let uiActionRequest;
         uiActionRequest = {
@@ -6015,7 +6361,8 @@ class UiActionService {
         if (uiAction.composite) {
             const containerUuid = uiActionModel.serviceToUse.uuid;
             if (containerUuid) {
-                uiActionRequest.params['compositeModel'] = this.viewContext.getCompositeModel(containerUuid);
+                uiActionRequest.params['compositeModel'] =
+                    this.viewContext.getCompositeModel(containerUuid);
             }
         }
         try {
@@ -6025,7 +6372,12 @@ class UiActionService {
             }
         }
         catch (error) {
-            console.error(error);
+            try {
+                this.onActionError(uiActionRequest, error);
+            }
+            catch (handlerError) {
+                console.log('ActionError Handler crashed: ', handlerError);
+            }
         }
     }
     showSavedSnackbar(uiAction) {
@@ -6151,7 +6503,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-class MenuComponent {
+class ClickMenuComponent {
+    constructor(menuService, overlay, viewContainerRef, overlayPositionBuilder, compLib) {
+        this.menuService = menuService;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.overlayPositionBuilder = overlayPositionBuilder;
+        this.compLib = compLib;
+        this.overlayRef = null;
+        this.isSubmenu = false;
+        this.actionClick = new EventEmitter();
+        this.submenuOpened = new EventEmitter();
+        this.destroy$ = new Subject();
+        this.submenuOpenMap = new Map();
+        this.subActions = [];
+        this.hasCheckedChildren = false;
+        this.compLib = compLib ?? ComponentLibrary.PRIMENG;
+        if (this.compLib === ComponentLibrary.PRIMENG) {
+            this.icon = 'chevron-right';
+        }
+        else if (this.compLib === ComponentLibrary.MATERIAL) {
+            this.icon = 'chevron_right';
+        }
+    }
+    ngOnInit() {
+        this.menuService
+            .getCloseSignal()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.closeMenu();
+        });
+    }
+    ngAfterViewChecked() {
+        if (this.isOpen && !this.hasCheckedChildren && this.submenuComponents.length > 0) {
+            this.hasCheckedChildren = true;
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['triggerAction']) {
+            const trigger = changes['triggerAction'].currentValue;
+            const previousTrigger = changes['triggerAction'].previousValue;
+            this.subActions = trigger?.subActions ?? [];
+            if (this.isOpen && previousTrigger) {
+                const hasSubActionsChanged = this.hasSubActionsChanged(previousTrigger?.subActions, trigger?.subActions);
+                if (hasSubActionsChanged) {
+                    this.refreshOverlay();
+                }
+            }
+        }
+    }
+    hasSubActionsChanged(oldSubActions, newSubActions) {
+        const oldLength = oldSubActions?.length ?? 0;
+        const newLength = newSubActions?.length ?? 0;
+        if (oldLength !== newLength) {
+            return true;
+        }
+        if (oldLength > 0 && newLength > 0) {
+            for (let i = 0; i < newLength; i++) {
+                if (oldSubActions[i].code !== newSubActions[i].code) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onActionClick(action) {
+        if (!action.disabled) {
+            this.actionClick.emit(action);
+            this.menuService.closeAllMenus();
+        }
+    }
+    onMenuClick(event) {
+        event.stopPropagation();
+    }
+    onDocumentClick(event) {
+        this.menuService.closeAllMenus();
+        if (this.overlayRef) {
+            this.closeMenu();
+        }
+    }
+    get isOpen() {
+        return !!this.overlayRef;
+    }
+    closeMenu() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+            this.hasCheckedChildren = false;
+        }
+        if (this.submenuComponents && this.submenuComponents.length > 0) {
+            this.submenuComponents.forEach((submenu) => {
+                submenu.closeMenu();
+            });
+        }
+    }
+    refreshOverlay() {
+        if (!this.overlayRef) {
+            return;
+        }
+        this.overlayRef.detach();
+        let portal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        this.hasCheckedChildren = false;
+    }
+    openMenu(event) {
+        if (this.isOpen) {
+            return;
+        }
+        if (this.isSubmenu) {
+            this.submenuOpened.emit(this.triggerAction);
+        }
+        else {
+            this.menuService.closeAllMenus();
+        }
+        let triggerElement = event.currentTarget;
+        var positions = this.isSubmenu ? SUBMENU_POSITIONS : ROOT_MENU_POSITIONS;
+        let positionStrategy = this.overlayPositionBuilder
+            .flexibleConnectedTo(triggerElement)
+            .withFlexibleDimensions(false)
+            .withPush(true)
+            .withPositions(positions);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+        });
+        let portal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+    }
+    toggleMenu(event) {
+        if (!this.isOpen) {
+            this.openMenu(event);
+        }
+        else {
+            this.closeMenu();
+        }
+    }
+    onSubmenuOpened(openedAction) {
+        if (!this.submenuComponents || this.submenuComponents.length === 0) {
+            setTimeout(() => {
+                this.onSubmenuOpened(openedAction);
+            }, 0);
+            return;
+        }
+        this.submenuComponents.forEach((submenu) => {
+            if (submenu.triggerAction.code !== openedAction.code && submenu.overlayRef) {
+                submenu.closeMenu();
+            }
+        });
+    }
+    closeSiblingSubmenus(exceptAction) {
+        this.submenuComponents?.forEach((submenu) => {
+            if (submenu.triggerAction.code !== exceptAction.code && submenu.isOpen) {
+                submenu.closeMenu();
+            }
+        });
+    }
+    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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: () => [{ type: UiMenuService }, { type: i2$2.Overlay }, { type: i0.ViewContainerRef }, { type: i2$2.OverlayPositionBuilder }, { type: ComponentLibrary, decorators: [{
+                    type: Inject,
+                    args: [COMPONENT_LIBRARY]
+                }, {
+                    type: Optional
+                }] }], propDecorators: { submenuComponents: [{
+                type: ViewChildren,
+                args: ['submenu']
+            }], menuTemplate: [{
+                type: ViewChild,
+                args: ['menuTemplate']
+            }], triggerAction: [{
+                type: Input
+            }], isSubmenu: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }], submenuOpened: [{
+                type: Output
+            }], onMenuClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class HoverMenuComponent {
     constructor(menuService, overlay, viewContainerRef, overlayPositionBuilder, compLib) {
         this.menuService = menuService;
         this.overlay = overlay;
@@ -6269,7 +6814,7 @@ class MenuComponent {
             this.menuService.closeAllMenus();
         }
         let triggerElement = event.currentTarget;
-        const positions = this.isSubmenu ? SUBMENU_POSITIONS : ROOT_MENU_POSITIONS;
+        var positions = this.isSubmenu ? SUBMENU_POSITIONS : ROOT_MENU_POSITIONS;
         let positionStrategy = this.overlayPositionBuilder
             .flexibleConnectedTo(triggerElement)
             .withFlexibleDimensions(false)
@@ -6292,7 +6837,6 @@ class MenuComponent {
         }
     }
     onSubmenuOpened(openedAction) {
-        // Check if submenuComponents is available
         if (!this.submenuComponents || this.submenuComponents.length === 0) {
             setTimeout(() => {
                 this.onSubmenuOpened(openedAction);
@@ -6305,12 +6849,19 @@ class MenuComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MenuComponent, 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: MenuComponent, 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\">\r\n    <li *ngFor=\"let action of subActions\" class=\"hoverEffect\" [class.disabled]=\"action.disabled\">\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: MenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }] }); }
+    closeSiblingSubmenus(exceptAction) {
+        this.submenuComponents?.forEach((submenu) => {
+            if (submenu.triggerAction.code !== exceptAction.code && submenu.isOpen) {
+                submenu.closeMenu();
+            }
+        });
+    }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HoverMenuComponent, 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\">\r\n    <li *ngFor=\"let action of subActions\" class=\"hoverEffect\" [class.disabled]=\"action.disabled\">\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-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"] }]
         }], ctorParameters: () => [{ type: UiMenuService }, { type: i2$2.Overlay }, { type: i0.ViewContainerRef }, { type: i2$2.OverlayPositionBuilder }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -6338,6 +6889,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+class ThemeSelectorComponent {
+    constructor(themeService) {
+        this.themeService = themeService;
+        this.model = input.required();
+        this.action = computed(() => this.model().uiAction);
+        this.themes = [];
+    }
+    ngOnInit() {
+        this.themeService.getThemes().subscribe(async (themes) => {
+            this.themes = themes;
+            if (this.themes.length === 2) {
+                var selectedTheme = await this.themeService.getSelectedTheme();
+                this.themeDescriptor = this.themes.find((t) => t.name !== selectedTheme.name);
+            }
+        });
+    }
+    async onActionClicked(event, themeDescriptor) {
+        this.themeService.setTheme(this.themeDescriptor);
+        // If we have two themes (light / dark), toggle the other
+        if (this.themes.length === 2) {
+            this.themeDescriptor = this.themes.find((t) => t.name !== this.themeDescriptor?.name);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ThemeSelectorComponent, deps: [{ token: ThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: ThemeSelectorComponent, selector: "theme-selector", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (themeDescriptor) {\r\n  <ui-action-button\r\n    [descriptor]=\"themeDescriptor.descriptor!\"\r\n    [code]=\"themeDescriptor.name\"\r\n    (actionClick)=\"onActionClicked($event, themeDescriptor)\"\r\n  >\r\n  </ui-action-button>\r\n} @else if (action()) {\r\n  <!-- <ui-tiered-menu\r\n    #menu\r\n    [triggerAction]=\"action()!\"\r\n    [subActions]=\"action()?.subActions ?? []\"\r\n    (actionClick)=\"onActionClicked($event, model())\"\r\n  ></ui-tiered-menu> -->\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ThemeSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'theme-selector', template: "@if (themeDescriptor) {\r\n  <ui-action-button\r\n    [descriptor]=\"themeDescriptor.descriptor!\"\r\n    [code]=\"themeDescriptor.name\"\r\n    (actionClick)=\"onActionClicked($event, themeDescriptor)\"\r\n  >\r\n  </ui-action-button>\r\n} @else if (action()) {\r\n  <!-- <ui-tiered-menu\r\n    #menu\r\n    [triggerAction]=\"action()!\"\r\n    [subActions]=\"action()?.subActions ?? []\"\r\n    (actionClick)=\"onActionClicked($event, model())\"\r\n  ></ui-tiered-menu> -->\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: ThemeService }] });
+
 class UiActionToolbarComponent {
     constructor(service, inject, changeDetector, compLib) {
         this.service = service;
@@ -6346,6 +6928,7 @@ 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;
@@ -6618,11 +7201,11 @@ class UiActionToolbarComponent {
         return this.toolbarPropertes?.direction === ToolbarDirection.VERTICAL;
     }
     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.subActions && uiActionModel.uiAction.subActions.length > 0) {\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    } @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", 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: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }] }); }
+    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"] }] }); }
 }
 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.subActions && uiActionModel.uiAction.subActions.length > 0) {\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    } @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", 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  @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"] }]
         }], ctorParameters: () => [{ type: UiActionService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -7657,11 +8240,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.subActions && uiActionModel.uiAction.subActions.length > 0) {\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    } @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", 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: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu"], outputs: ["actionClick", "submenuOpened"] }] }); }
+    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"] }] }); }
 }
 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.subActions && uiActionModel.uiAction.subActions.length > 0) {\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    } @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", 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  @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"] }]
         }], propDecorators: { dataUri: [{
                 type: Input
             }], actionEvent: [{
@@ -12970,12 +13553,14 @@ class SmartViewContextModule {
             SmartVoiceRecorderComponent,
             HighlightPipe,
             UiActionButtonComponent,
-            MenuComponent,
+            ClickMenuComponent,
+            HoverMenuComponent,
             UploadWidgetComponent,
             VoiceRecordWidgetComponent,
             PhotoCaptureWidgetComponent,
             PrimeFileUploaderComponent,
-            SmartEmbeddedSlotDirective], imports: [CommonModule,
+            SmartEmbeddedSlotDirective,
+            ThemeSelectorComponent], imports: [CommonModule,
             HttpClientModule,
             MatCommonModule,
             MatButtonModule,
@@ -13033,7 +13618,7 @@ class SmartViewContextModule {
             ComparableDropdownDirective,
             ComparableMultiselectDirective,
             UiActionButtonComponent,
-            MenuComponent,
+            ClickMenuComponent,
             UploadWidgetComponent,
             VoiceRecordWidgetComponent,
             PhotoCaptureWidgetComponent,
@@ -13146,12 +13731,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         SmartVoiceRecorderComponent,
                         HighlightPipe,
                         UiActionButtonComponent,
-                        MenuComponent,
+                        ClickMenuComponent,
+                        HoverMenuComponent,
                         UploadWidgetComponent,
                         VoiceRecordWidgetComponent,
                         PhotoCaptureWidgetComponent,
                         PrimeFileUploaderComponent,
                         SmartEmbeddedSlotDirective,
+                        ThemeSelectorComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -13218,7 +13805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         ComparableDropdownDirective,
                         ComparableMultiselectDirective,
                         UiActionButtonComponent,
-                        MenuComponent,
+                        ClickMenuComponent,
                         UploadWidgetComponent,
                         VoiceRecordWidgetComponent,
                         PhotoCaptureWidgetComponent,
@@ -13400,71 +13987,6 @@ var SmartActionType;
  * Public API Surface of smartdialog
  */
 
-var SessionErrorBehaviour;
-(function (SessionErrorBehaviour) {
-    SessionErrorBehaviour[SessionErrorBehaviour["REFRESH"] = 0] = "REFRESH";
-    SessionErrorBehaviour[SessionErrorBehaviour["RESTART"] = 1] = "RESTART";
-    SessionErrorBehaviour[SessionErrorBehaviour["RESTART_VIEWCONTEXT"] = 2] = "RESTART_VIEWCONTEXT";
-})(SessionErrorBehaviour || (SessionErrorBehaviour = {}));
-
-class SmartSessionTimerService {
-    constructor(session) {
-        this.session = session;
-        this._destroy$ = new Subject();
-        this.totalTimeInMinutes = 30;
-        this.sessionExpiration = 'sessionExpiracy';
-        this.timeChanged = new SmartSubject(this._destroy$);
-        this.onTimerExpired = new SmartSubject(this._destroy$);
-        this.session.sessionExpiracyChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.restart();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    startTimer() {
-        if (this.timer) {
-            clearInterval(this.timer);
-        }
-        const sessionInfoData = this.session.sessionInfoData;
-        const lifetimeSeconds = sessionInfoData?.duration;
-        if (lifetimeSeconds && lifetimeSeconds !== 0) {
-            this.timeLeftInSeconds = lifetimeSeconds;
-        }
-        else {
-            const expiration = new Date(sessionInfoData.expiration);
-            const now = new Date();
-            this.timeLeftInSeconds = Math.floor((expiration.getTime() - now.getTime()) / 1000);
-        }
-        this.timer = setInterval(() => {
-            this.timeLeftInSeconds--;
-            if (this.timeLeftInSeconds === 0) {
-                this.timeout();
-            }
-            this.timeChanged.next();
-        }, 1000);
-    }
-    restart() {
-        clearInterval(this.timer);
-        this.timer = undefined;
-        this.startTimer();
-    }
-    timeout() {
-        clearInterval(this.timer);
-        this.timer = undefined;
-        this.onTimerExpired.next();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionTimerService, deps: [{ token: SmartSessionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionTimerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionTimerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: SmartSessionService }] });
-
 /**
  * Thrown by `whenReady()` when the viewcontext was rebuilt between the
  * caller's entry into `whenReady()` and the gate releasing. Any uuid the
@@ -13480,9 +14002,10 @@ class ViewContextRebuiltError extends Error {
     }
 }
 class SmartBackendBootstrapService {
-    constructor(session, viewContext) {
+    constructor(session, viewContext, uiActionService) {
         this.session = session;
         this.viewContext = viewContext;
+        this.uiActionService = uiActionService;
         this.lastInitFailed = false;
     }
     configure(config) {
@@ -13500,6 +14023,7 @@ class SmartBackendBootstrapService {
         this.viewContext.openSmartLink.subscribe((channel) => {
             this.handleSmartLink(channel);
         });
+        this.uiActionService.setActionErrorHandler(config.onActionError ?? ((_, err) => console.log(err)));
     }
     async handleSmartLink(channel) {
         if (this.config?.onSmartLink) {
@@ -13646,200 +14170,34 @@ class SmartBackendBootstrapService {
     handleSessionError(err) {
         if (!this.config) {
             return Promise.reject(new Error('SmartBackendBootstrapService.configure() must be called before handleSessionError().'));
-        }
-        if (this.runningSessionError) {
-            return this.runningSessionError;
-        }
-        this.runningSessionError = this.runSessionError(err);
-        return this.runningSessionError;
-    }
-    async runSessionError(err) {
-        try {
-            if (this.config?.onSessionError) {
-                await this.config.onSessionError(err);
-                return;
-            }
-            // Default: clear the session and let the backend rebuild via RESTART_VIEWCONTEXT.
-            // No router navigation here — the new viewcontext drives navigation server-side.
-            await this.session.clearAndStartNewSession();
-        }
-        finally {
-            this.runningSessionError = undefined;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartBackendBootstrapService, deps: [{ token: SmartSessionService }, { token: SmartViewContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartBackendBootstrapService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartBackendBootstrapService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: SmartSessionService }, { type: SmartViewContextService }] });
-
-class SmartSessionTimerComponent {
-    constructor(service, bootstrap) {
-        this.service = service;
-        this.bootstrap = bootstrap;
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.bootstrap.whenReady().then(() => {
-            this.service.startTimer();
-            this.timeInSeconds = this.service.timeLeftInSeconds;
-            this.service.timeChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
-                this.timeInSeconds = this.service.timeLeftInSeconds;
-            });
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    formatTime(seconds) {
-        let minutes = Math.floor(seconds / 60);
-        let remainingSeconds = seconds % 60;
-        return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionTimerComponent, deps: [{ token: SmartSessionTimerService }, { token: SmartBackendBootstrapService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartSessionTimerComponent, selector: "smart-session-timer", providers: [SmartSessionTimerService], ngImport: i0, template: "<div class=\"smart-session-timer-container\">\r\n    <span class=\"smart-session-timer\" *ngIf=\"timeInSeconds\">\r\n        {{ formatTime(timeInSeconds!) }}\r\n    </span>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionTimerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smart-session-timer', providers: [SmartSessionTimerService], template: "<div class=\"smart-session-timer-container\">\r\n    <span class=\"smart-session-timer\" *ngIf=\"timeInSeconds\">\r\n        {{ formatTime(timeInSeconds!) }}\r\n    </span>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: SmartSessionTimerService }, { type: SmartBackendBootstrapService }] });
-
-const STRINGS_HU = {
-    startErrorMessage: 'A szerver nem elérhető.',
-    startErrorRetry: 'Újrapróbálás',
-    transportErrorMessage: 'A szerver nem elérhető.',
-    transportErrorReload: 'Újratöltés',
-    sessionErrorMessage: 'A munkamenet lejárt, kérjük jelentkezzen be újra.',
-    sessionErrorAction: 'Bejelentkezés',
-};
-const STRINGS_EN = {
-    startErrorMessage: 'The server is unavailable.',
-    startErrorRetry: 'Retry',
-    transportErrorMessage: 'The server is unavailable.',
-    transportErrorReload: 'Reload',
-    sessionErrorMessage: 'Your session has expired. Please log in again.',
-    sessionErrorAction: 'Log in',
-};
-/**
- * Opt-in default UX for `SmartBackendBootstrapService` error hooks.
- *
- * Spread the result of `hooks(options)` into `bootstrap.configure()` to get a
- * MatSnackBar-based "error + retry" UI without writing the host glue:
- *
- * ```ts
- * bootstrap.configure({
- *   ...minimalConfig,
- *   ...defaultErrorUi.hooks({ language: 'hu' }),
- * });
- * ```
- *
- * Hosts that want custom logic can omit this service and write their own
- * `onStartError` / `onTransportError` callbacks directly.
- */
-class SmartDefaultErrorUiService {
-    constructor() {
-        this.snackBar = inject(MatSnackBar);
-        this.session = inject(SmartSessionService);
-    }
-    /** Returns a hooks bundle ready to spread into `bootstrap.configure()`. */
-    hooks(options = {}) {
-        return {
-            onStartError: (err) => this.showStartError(err, options),
-            onTransportError: (err) => this.showTransportError(err, options),
-            onSessionError: (err) => this.showSessionError(err, options),
-        };
-    }
-    showStartError(_err, options = {}) {
-        const s = this.resolveStrings(options);
-        const ref = this.snackBar.open(s.startErrorMessage, s.startErrorRetry, {
-            duration: 0, // sticky — app is not usable until retry succeeds
-        });
-        // Full reload, not bootstrap.start(). A bootstrap.start() retry only re-runs
-        // the init sequence; any components that already mounted during the failed
-        // attempt have rejected `whenReady()` Promises and won't re-trigger their
-        // run() when bootstrap eventually succeeds. Reload guarantees a clean mount.
-        ref.onAction().subscribe(() => this.verifyServerAndReload());
-    }
-    showTransportError(_err, options = {}) {
-        const s = this.resolveStrings(options);
-        const ref = this.snackBar.open(s.transportErrorMessage, s.transportErrorReload, {
-            duration: options.transportErrorDuration ?? 0,
-        });
-        ref.onAction().subscribe(() => this.verifyServerAndReload());
-    }
-    showSessionError(_err, options = {}) {
-        const s = this.resolveStrings(options);
-        const ref = this.snackBar.open(s.sessionErrorMessage, s.sessionErrorAction, {
-            duration: 0, // sticky — session is invalid until the user takes action
-        });
-        ref.onAction().subscribe(() => this.recoverSession());
-    }
-    /**
-     * Clears the dead session and reloads. Unlike `verifyServerAndReload`, this
-     * does NOT pre-check via `getSession()` — the SID is known to be invalid,
-     * so the check would fail. We best-effort `clearAndStartNewSession()`
-     * (creates a fresh anonymous session); reload happens regardless so the
-     * user is not stuck if the clear fails (e.g., server flapping).
-     *
-     * Overridable in tests.
-     */
-    async recoverSession() {
-        try {
-            await this.session.clearAndStartNewSession();
-        }
-        catch {
-            // Server may also be down; reload anyway and let bootstrap.start() retry.
-        }
-        this.reloadPage();
-    }
-    /**
-     * Pings `getSession()` before reloading: if the server is still down, the
-     * reload would just re-trigger the broken-screen state. The failed check
-     * goes through `SmartErrorCatchingInterceptor` and re-fires `onTransportError`,
-     * so the user sees a fresh snackbar — they get visible feedback that the
-     * server is still unreachable, without paying the cost of a full bundle
-     * reload that lands on the same broken state.
-     *
-     * Overridable in tests.
-     */
-    async verifyServerAndReload() {
-        try {
-            await this.session.getSession();
-        }
-        catch {
-            return; // server still unreachable — interceptor re-opens the snackbar
-        }
-        this.reloadPage();
-    }
-    /** Overridable in tests. */
-    reloadPage() {
-        window.location.reload();
-    }
-    resolveStrings(options) {
-        const lang = this.resolveLanguage(options.language);
-        const base = lang === 'hu' ? STRINGS_HU : STRINGS_EN;
-        return { ...base, ...(options.strings ?? {}) };
+        }
+        if (this.runningSessionError) {
+            return this.runningSessionError;
+        }
+        this.runningSessionError = this.runSessionError(err);
+        return this.runningSessionError;
     }
-    resolveLanguage(lang) {
-        if (lang === 'hu' || lang === 'en') {
-            return lang;
+    async runSessionError(err) {
+        try {
+            if (this.config?.onSessionError) {
+                await this.config.onSessionError(err);
+                return;
+            }
+            // Default: clear the session and let the backend rebuild via RESTART_VIEWCONTEXT.
+            // No router navigation here — the new viewcontext drives navigation server-side.
+            await this.session.clearAndStartNewSession();
+        }
+        finally {
+            this.runningSessionError = undefined;
         }
-        return navigator.language?.toLowerCase().startsWith('hu') ? 'hu' : 'en';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDefaultErrorUiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDefaultErrorUiService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartBackendBootstrapService, deps: [{ token: SmartSessionService }, { token: SmartViewContextService }, { token: UiActionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartBackendBootstrapService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDefaultErrorUiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartBackendBootstrapService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
-
-/*
- * Public API Surface of smart-session
- */
+        }], ctorParameters: () => [{ type: SmartSessionService }, { type: SmartViewContextService }, { type: UiActionService }] });
 
 class SmartErrorCatchingInterceptor {
     constructor(session, bootstrap) {
@@ -13984,6 +14342,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: SmartSessionService }] });
 
+class SmartSessionTimerService {
+    constructor(session) {
+        this.session = session;
+        this._destroy$ = new Subject();
+        this.totalTimeInMinutes = 30;
+        this.sessionExpiration = 'sessionExpiracy';
+        this.timeChanged = new SmartSubject(this._destroy$);
+        this.onTimerExpired = new SmartSubject(this._destroy$);
+        this.session.sessionExpiracyChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.restart();
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    startTimer() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+        const sessionInfoData = this.session.sessionInfoData;
+        const lifetimeSeconds = sessionInfoData?.duration;
+        if (lifetimeSeconds && lifetimeSeconds !== 0) {
+            this.timeLeftInSeconds = lifetimeSeconds;
+        }
+        else {
+            const expiration = new Date(sessionInfoData.expiration);
+            const now = new Date();
+            this.timeLeftInSeconds = Math.floor((expiration.getTime() - now.getTime()) / 1000);
+        }
+        this.timer = setInterval(() => {
+            this.timeLeftInSeconds--;
+            if (this.timeLeftInSeconds === 0) {
+                this.timeout();
+            }
+            this.timeChanged.next();
+        }, 1000);
+    }
+    restart() {
+        clearInterval(this.timer);
+        this.timer = undefined;
+        this.startTimer();
+    }
+    timeout() {
+        clearInterval(this.timer);
+        this.timer = undefined;
+        this.onTimerExpired.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionTimerService, deps: [{ token: SmartSessionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionTimerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionTimerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: SmartSessionService }] });
+
+class SmartSessionTimerComponent {
+    constructor(service, bootstrap) {
+        this.service = service;
+        this.bootstrap = bootstrap;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.bootstrap.whenReady().then(() => {
+            this.service.startTimer();
+            this.timeInSeconds = this.service.timeLeftInSeconds;
+            this.service.timeChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
+                this.timeInSeconds = this.service.timeLeftInSeconds;
+            });
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    formatTime(seconds) {
+        let minutes = Math.floor(seconds / 60);
+        let remainingSeconds = seconds % 60;
+        return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionTimerComponent, deps: [{ token: SmartSessionTimerService }, { token: SmartBackendBootstrapService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartSessionTimerComponent, selector: "smart-session-timer", providers: [SmartSessionTimerService], ngImport: i0, template: "<div class=\"smart-session-timer-container\">\r\n    <span class=\"smart-session-timer\" *ngIf=\"timeInSeconds\">\r\n        {{ formatTime(timeInSeconds!) }}\r\n    </span>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionTimerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-session-timer', providers: [SmartSessionTimerService], template: "<div class=\"smart-session-timer-container\">\r\n    <span class=\"smart-session-timer\" *ngIf=\"timeInSeconds\">\r\n        {{ formatTime(timeInSeconds!) }}\r\n    </span>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: SmartSessionTimerService }, { type: SmartBackendBootstrapService }] });
+
 class SmartSessionModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartSessionModule, declarations: [SmartSessionTimerComponent], imports: [BrowserModule, MatCommonModule, MatExpansionModule, MatButtonModule, SmartIconModule], exports: [SmartSessionTimerComponent] }); }
@@ -18755,11 +19203,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    <h3>\r\n      {{ errorMessage }}\r\n    </h3>\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}\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:.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"] }] }); }
 }
 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    <h3>\r\n      {{ errorMessage }}\r\n    </h3>\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}\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:.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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
                 type: ViewChildren,
                 args: [MatMenuTrigger]
@@ -24237,6 +24685,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 args: [UiActionToolbarComponent]
             }] } });
 
+const STRINGS_HU = {
+    startErrorMessage: 'A szerver nem elérhető.',
+    startErrorRetry: 'Újrapróbálás',
+    transportErrorMessage: 'A szerver nem elérhető.',
+    transportErrorReload: 'Újratöltés',
+    sessionErrorMessage: 'A munkamenet lejárt, kérjük jelentkezzen be újra.',
+    sessionErrorAction: 'Bejelentkezés',
+};
+const STRINGS_EN = {
+    startErrorMessage: 'The server is unavailable.',
+    startErrorRetry: 'Retry',
+    transportErrorMessage: 'The server is unavailable.',
+    transportErrorReload: 'Reload',
+    sessionErrorMessage: 'Your session has expired. Please log in again.',
+    sessionErrorAction: 'Log in',
+};
+/**
+ * Opt-in default UX for `SmartBackendBootstrapService` error hooks.
+ *
+ * Spread the result of `hooks(options)` into `bootstrap.configure()` to get a
+ * MatSnackBar-based "error + retry" UI without writing the host glue:
+ *
+ * ```ts
+ * bootstrap.configure({
+ *   ...minimalConfig,
+ *   ...defaultErrorUi.hooks({ language: 'hu' }),
+ * });
+ * ```
+ *
+ * Hosts that want custom logic can omit this service and write their own
+ * `onStartError` / `onTransportError` callbacks directly.
+ */
+class SmartDefaultErrorUiService {
+    constructor() {
+        this.snackBar = inject(MatSnackBar);
+        this.session = inject(SmartSessionService);
+    }
+    /** Returns a hooks bundle ready to spread into `bootstrap.configure()`. */
+    hooks(options = {}) {
+        return {
+            onStartError: (err) => this.showStartError(err, options),
+            onTransportError: (err) => this.showTransportError(err, options),
+            onSessionError: (err) => this.showSessionError(err, options),
+        };
+    }
+    showStartError(_err, options = {}) {
+        const s = this.resolveStrings(options);
+        const ref = this.snackBar.open(s.startErrorMessage, s.startErrorRetry, {
+            duration: 0, // sticky — app is not usable until retry succeeds
+        });
+        // Full reload, not bootstrap.start(). A bootstrap.start() retry only re-runs
+        // the init sequence; any components that already mounted during the failed
+        // attempt have rejected `whenReady()` Promises and won't re-trigger their
+        // run() when bootstrap eventually succeeds. Reload guarantees a clean mount.
+        ref.onAction().subscribe(() => this.verifyServerAndReload());
+    }
+    showTransportError(_err, options = {}) {
+        const s = this.resolveStrings(options);
+        const ref = this.snackBar.open(s.transportErrorMessage, s.transportErrorReload, {
+            duration: options.transportErrorDuration ?? 0,
+        });
+        ref.onAction().subscribe(() => this.verifyServerAndReload());
+    }
+    showSessionError(_err, options = {}) {
+        const s = this.resolveStrings(options);
+        const ref = this.snackBar.open(s.sessionErrorMessage, s.sessionErrorAction, {
+            duration: 0, // sticky — session is invalid until the user takes action
+        });
+        ref.onAction().subscribe(() => this.recoverSession());
+    }
+    /**
+     * Clears the dead session and reloads. Unlike `verifyServerAndReload`, this
+     * does NOT pre-check via `getSession()` — the SID is known to be invalid,
+     * so the check would fail. We best-effort `clearAndStartNewSession()`
+     * (creates a fresh anonymous session); reload happens regardless so the
+     * user is not stuck if the clear fails (e.g., server flapping).
+     *
+     * Overridable in tests.
+     */
+    async recoverSession() {
+        try {
+            await this.session.clearAndStartNewSession();
+        }
+        catch {
+            // Server may also be down; reload anyway and let bootstrap.start() retry.
+        }
+        this.reloadPage();
+    }
+    /**
+     * Pings `getSession()` before reloading: if the server is still down, the
+     * reload would just re-trigger the broken-screen state. The failed check
+     * goes through `SmartErrorCatchingInterceptor` and re-fires `onTransportError`,
+     * so the user sees a fresh snackbar — they get visible feedback that the
+     * server is still unreachable, without paying the cost of a full bundle
+     * reload that lands on the same broken state.
+     *
+     * Overridable in tests.
+     */
+    async verifyServerAndReload() {
+        try {
+            await this.session.getSession();
+        }
+        catch {
+            return; // server still unreachable — interceptor re-opens the snackbar
+        }
+        this.reloadPage();
+    }
+    /** Overridable in tests. */
+    reloadPage() {
+        window.location.reload();
+    }
+    resolveStrings(options) {
+        const lang = this.resolveLanguage(options.language);
+        const base = lang === 'hu' ? STRINGS_HU : STRINGS_EN;
+        return { ...base, ...(options.strings ?? {}) };
+    }
+    resolveLanguage(lang) {
+        if (lang === 'hu' || lang === 'en') {
+            return lang;
+        }
+        return navigator.language?.toLowerCase().startsWith('hu') ? 'hu' : 'en';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDefaultErrorUiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDefaultErrorUiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartDefaultErrorUiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/*
+ * Public API Surface of smart-session
+ */
+
 class SmartNavbarService {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartNavbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -24331,11 +24913,11 @@ class SearchPageComponent extends SmartComponent {
         return this.data?.noResultText !== undefined && this.data?.noResultText !== null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SearchPageComponent, deps: [{ token: i0.Injector }, { token: SmartFilterEditorService }, { token: 'searchPageName' }, { token: 'searchComponentName' }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SearchPageComponent, selector: "search-page", providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"searchPageContainer\" [ngClass]=\"data?.cssClassOfPage\">\r\n  <h1 class=\"search-page-title\"> {{ data?.pageTitle }} </h1>\r\n  <!-- <div class=\"filterContainer\">\r\n    <smart-filter [filter]=\"filter\"></smart-filter>\r\n  </div> -->\r\n  <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n  <div class=\"filter-editor-container\">\r\n    <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\r\n    <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\r\n  </div>\r\n  <smart-component-layout\r\n    *ngIf=\"layout\"\r\n    [smartComponentLayout]=\"layout\"\r\n    [parentSmartComponent]=\"this\"\r\n  ></smart-component-layout>\r\n  <div class=\"gridContainer\">\r\n    <h2 *ngIf=\"isShowNoResultText()\" class=\"noResultText\">\r\n      {{ data?.noResultText }}\r\n    </h2>\r\n    <smart-grid\r\n      *ngIf=\"!isShowNoResultText()\"\r\n      #grid\r\n      [smartGrid]=\"smartGrid\"\r\n      [uuid]=\"uuid!\"\r\n    ></smart-grid>\r\n  </div>\r\n</div>\r\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}\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: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SearchPageComponent, selector: "search-page", providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"searchPageContainer\" [ngClass]=\"data?.cssClassOfPage\">\r\n  <h1 class=\"search-page-title\"> {{ data?.pageTitle }} </h1>\r\n  <!-- <div class=\"filterContainer\">\r\n    <smart-filter [filter]=\"filter\"></smart-filter>\r\n  </div> -->\r\n  <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n  @if (filterService.model) {\r\n    <div class=\"filter-editor-container\">\r\n      <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\r\n      <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\r\n    </div>\r\n  }\r\n  <smart-component-layout\r\n    *ngIf=\"layout\"\r\n    [smartComponentLayout]=\"layout\"\r\n    [parentSmartComponent]=\"this\"\r\n  ></smart-component-layout>\r\n  <div class=\"gridContainer\">\r\n    <h2 *ngIf=\"isShowNoResultText()\" class=\"noResultText\">\r\n      {{ data?.noResultText }}\r\n    </h2>\r\n    <smart-grid\r\n      *ngIf=\"!isShowNoResultText()\"\r\n      #grid\r\n      [smartGrid]=\"smartGrid\"\r\n      [uuid]=\"uuid!\"\r\n    ></smart-grid>\r\n  </div>\r\n</div>\r\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}\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: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SearchPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'search-page', providers: [SmartFilterEditorService], template: "<div class=\"searchPageContainer\" [ngClass]=\"data?.cssClassOfPage\">\r\n  <h1 class=\"search-page-title\"> {{ data?.pageTitle }} </h1>\r\n  <!-- <div class=\"filterContainer\">\r\n    <smart-filter [filter]=\"filter\"></smart-filter>\r\n  </div> -->\r\n  <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n  <div class=\"filter-editor-container\">\r\n    <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\r\n    <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\r\n  </div>\r\n  <smart-component-layout\r\n    *ngIf=\"layout\"\r\n    [smartComponentLayout]=\"layout\"\r\n    [parentSmartComponent]=\"this\"\r\n  ></smart-component-layout>\r\n  <div class=\"gridContainer\">\r\n    <h2 *ngIf=\"isShowNoResultText()\" class=\"noResultText\">\r\n      {{ data?.noResultText }}\r\n    </h2>\r\n    <smart-grid\r\n      *ngIf=\"!isShowNoResultText()\"\r\n      #grid\r\n      [smartGrid]=\"smartGrid\"\r\n      [uuid]=\"uuid!\"\r\n    ></smart-grid>\r\n  </div>\r\n</div>\r\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}\n"] }]
+            args: [{ selector: 'search-page', providers: [SmartFilterEditorService], template: "<div class=\"searchPageContainer\" [ngClass]=\"data?.cssClassOfPage\">\r\n  <h1 class=\"search-page-title\"> {{ data?.pageTitle }} </h1>\r\n  <!-- <div class=\"filterContainer\">\r\n    <smart-filter [filter]=\"filter\"></smart-filter>\r\n  </div> -->\r\n  <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n  @if (filterService.model) {\r\n    <div class=\"filter-editor-container\">\r\n      <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\r\n      <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\r\n    </div>\r\n  }\r\n  <smart-component-layout\r\n    *ngIf=\"layout\"\r\n    [smartComponentLayout]=\"layout\"\r\n    [parentSmartComponent]=\"this\"\r\n  ></smart-component-layout>\r\n  <div class=\"gridContainer\">\r\n    <h2 *ngIf=\"isShowNoResultText()\" class=\"noResultText\">\r\n      {{ data?.noResultText }}\r\n    </h2>\r\n    <smart-grid\r\n      *ngIf=\"!isShowNoResultText()\"\r\n      #grid\r\n      [smartGrid]=\"smartGrid\"\r\n      [uuid]=\"uuid!\"\r\n    ></smart-grid>\r\n  </div>\r\n</div>\r\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: SmartFilterEditorService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['searchPageName']
@@ -24828,5 +25410,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, 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, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LeafletMap, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuComponent, 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, 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, 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