@smartbit4all/ng-client 4.5.39 → 4.5.40

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, signal, computed, output, input, effect, inject, 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, output, effect, inject, ApplicationRef, viewChild, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpErrorResponse, HttpParams, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { Subject, lastValueFrom, take, 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';
@@ -1660,6 +1660,87 @@ class ViewService {
             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.');
@@ -2499,6 +2580,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";
@@ -3588,6 +3681,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';
@@ -3605,12 +3742,13 @@ class SmartViewContextService {
         }
         return undefined;
     }
-    constructor(view, session, navigation, dialog, apiQueueService, inject, compLib) {
+    constructor(view, session, navigation, dialog, apiQueueService, themeService, inject, compLib) {
         this.view = view;
         this.session = session;
         this.navigation = navigation;
         this.dialog = dialog;
         this.apiQueueService = apiQueueService;
+        this.themeService = themeService;
         this.inject = inject;
         this.viewContextUuidName = 'viewContextUuid';
         this.viewContextUuidHeaderName = 'viewContextUuid';
@@ -3820,6 +3958,8 @@ class SmartViewContextService {
             parameters: new Map(),
         };
         viewContextUpdate.deviceInfo.componentLibrary = this.componentLibrary;
+        var selectedTheme = await this.themeService.getSelectedTheme();
+        viewContextUpdate.deviceInfo.themeName = selectedTheme.name;
         this.viewContext = await this.view.updateViewContext(viewContextUpdate).toPromise();
         return this.viewContext;
     }
@@ -4450,7 +4590,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: SmartNavigationService }, { token: SmartViewContextDialogService }, { token: ApiQueueService }, { token: i0.Injector }, { token: COMPONENT_LIBRARY, 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: SmartNavigationService }, { token: SmartViewContextDialogService }, { token: ApiQueueService }, { token: ThemeService }, { token: i0.Injector }, { token: COMPONENT_LIBRARY, 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: [{
@@ -4458,7 +4598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: ViewService }, { type: SmartSessionService }, { type: SmartNavigationService }, { type: SmartViewContextDialogService }, { type: ApiQueueService }, { type: i0.Injector }, { type: ComponentLibrary, decorators: [{
+        }], ctorParameters: () => [{ type: ViewService }, { type: SmartSessionService }, { type: SmartNavigationService }, { type: SmartViewContextDialogService }, { type: ApiQueueService }, { type: ThemeService }, { type: i0.Injector }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
                 }, {
@@ -6281,6 +6421,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;
@@ -6561,11 +6732,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      <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"] }, { 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      <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"] }]
         }], ctorParameters: () => [{ type: UiActionService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -7600,11 +7771,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      <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"] }, { 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      <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"] }]
         }], propDecorators: { dataUri: [{
                 type: Input
             }], actionEvent: [{
@@ -12865,7 +13036,8 @@ class SmartViewContextModule {
             VoiceRecordWidgetComponent,
             PhotoCaptureWidgetComponent,
             PrimeFileUploaderComponent,
-            SmartEmbeddedSlotDirective], imports: [CommonModule,
+            SmartEmbeddedSlotDirective,
+            ThemeSelectorComponent], imports: [CommonModule,
             HttpClientModule,
             MatCommonModule,
             MatButtonModule,
@@ -13042,6 +13214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         PhotoCaptureWidgetComponent,
                         PrimeFileUploaderComponent,
                         SmartEmbeddedSlotDirective,
+                        ThemeSelectorComponent,
                     ],
                     imports: [
                         CommonModule,