@c8y/ngx-components 1022.10.1 → 1022.13.0

package/fesm2022/c8y-ngx-components-context-dashboard.mjs

@@ -1,27 +1,27 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, inject, InjectionToken, EventEmitter, Output, Input, TemplateRef, ViewChild, Optional, Inject, HostListener, HostBinding, NgModule } from '@angular/core';
 import * as i2 from '@c8y/ngx-components';
-import { gettext, Permissions, ContextRouteService, Status, NavigatorNode, NEW_DASHBOARD_ROUTER_STATE_PROP, getActivatedRoute, ViewContext, memoize, hookGeneric, ExtensionPointForPlugins, fromTriggerOnce, getInjectedHooks, stateToFactory, ListGroupModule, C8yComponentOutlet, IconDirective, AlertService, C8yTranslatePipe, DynamicComponentModule, DynamicComponentComponent, sortByPriority, isPromise, CoreModule, DashboardChildChange, CopyDashboardDisabledReason, WidgetsDashboardComponent, DatePipe, hookRoute, hookTab, hookNavigator } from '@c8y/ngx-components';
+import { gettext, IconDirective, C8yTranslatePipe, Permissions, ContextRouteService, Status, NavigatorNode, NEW_DASHBOARD_ROUTER_STATE_PROP, getActivatedRoute, ViewContext, TabsOutletComponent, memoize, hookGeneric, ExtensionPointForPlugins, fromTriggerOnce, getInjectedHooks, stateToFactory, ListGroupModule, C8yComponentOutlet, AlertService, DynamicComponentModule, DynamicComponentComponent, sortByPriority, isPromise, CoreModule, C8yTranslateDirective, HighlightComponent, EmptyStateComponent, FormGroupComponent, RequiredInputPlaceholderDirective, ProductExperienceDirective, DashboardChildChange, CopyDashboardDisabledReason, TitleComponent, ActionBarItemComponent, HelpComponent, WidgetsDashboardComponent, DatePipe, hookRoute, hookTab, hookNavigator } from '@c8y/ngx-components';
 import * as i1 from '@angular/router';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterOutlet, ActivatedRoute, RouterModule } from '@angular/router';
 import { of, Subject, from, combineLatest, map as map$1, timer, BehaviorSubject, tap as tap$1, withLatestFrom, mergeMap as mergeMap$1, shareReplay as shareReplay$1, merge, scan, debounceTime, isObservable, iif } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import * as i2$1 from '@ngx-translate/core';
-import { assign, pick, cloneDeep, some, keys, keyBy, has, set, reduce, forEach, get, isEqual, clone, omit, sortBy, escapeRegExp, findIndex, kebabCase, every } from 'lodash-es';
+import { assign, pick, isEmpty, cloneDeep, some, keys, keyBy, has, set, reduce, forEach, get, isEqual, clone, omit, sortBy, escapeRegExp, findIndex, kebabCase, every } from 'lodash-es';
 import * as i1$1 from '@c8y/client';
 import { QueriesUtil, InventoryService } from '@c8y/client';
 import { tap, map, catchError, throwIfEmpty, filter, mergeMap, toArray, first, take, distinctUntilChanged, takeUntil, shareReplay, switchMap } from 'rxjs/operators';
-import * as i6 from '@angular/forms';
+import * as i5 from '@angular/forms';
 import { Validators, NgForm, ControlContainer, FormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i5 from '@angular/common';
-import { NgTemplateOutlet, CommonModule, AsyncPipe, NgIf, NgClass, NgFor, NgForOf } from '@angular/common';
-import * as i8 from 'ngx-bootstrap/collapse';
-import { CollapseModule } from 'ngx-bootstrap/collapse';
+import * as i2$3 from 'ngx-bootstrap/collapse';
+import { CollapseDirective, CollapseModule } from 'ngx-bootstrap/collapse';
+import * as i3 from '@angular/common';
+import { NgIf, NgTemplateOutlet, CommonModule, AsyncPipe, NgClass, NgFor, NgForOf } from '@angular/common';
 import * as i1$2 from '@c8y/ngx-components/assets-navigator';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import * as i2$2 from 'ngx-bootstrap/popover';
-import { PopoverModule } from 'ngx-bootstrap/popover';
+import { PopoverModule, PopoverDirective } from 'ngx-bootstrap/popover';
 import { IconSelectorModule } from '@c8y/ngx-components/icon-selector';
 import * as i1$3 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@@ -80,11 +80,11 @@ class AddDashboardComponent {
         this.tabsService.refresh();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AddDashboardComponent, deps: [{ token: i2.TabsService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AddDashboardComponent, isStandalone: false, selector: "[c8y-add-dashboard]", host: { classAttribute: "d-flex a-i-stretch sticky-right" }, ngImport: i0, template: "<div class=\"d-flex a-i-stretch m-b-8 m-t-8 p-l-8 hidden-xs\">\n  <button\n    class=\"btn btn-default btn-sm p-l-8 p-r-8 fit-h p-b-0 p-t-0 d-flex a-i-center\"\n    title=\"{{ 'Add dashboard' | translate }}\"\n    type=\"button\"\n    (click)=\"addDashboard()\"\n  >\n    <i\n      class=\"icon-20 m-r-4\"\n      c8yIcon=\"add-circle-outline\"\n    ></i>\n    <span>{{ 'Add dashboard' | translate }}</span>\n  </button>\n  <div class=\"p-r-sm-40\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AddDashboardComponent, isStandalone: true, selector: "[c8y-add-dashboard]", host: { classAttribute: "d-flex a-i-stretch sticky-right" }, ngImport: i0, template: "<div class=\"d-flex a-i-stretch m-b-8 m-t-8 p-l-8 hidden-xs\">\n  <button\n    class=\"btn btn-default btn-sm p-l-8 p-r-8 fit-h p-b-0 p-t-0 d-flex a-i-center\"\n    title=\"{{ 'Add dashboard' | translate }}\"\n    type=\"button\"\n    (click)=\"addDashboard()\"\n  >\n    <i\n      class=\"icon-20 m-r-4\"\n      c8yIcon=\"add-circle-outline\"\n    ></i>\n    <span>{{ 'Add dashboard' | translate }}</span>\n  </button>\n  <div class=\"p-r-sm-40\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AddDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[c8y-add-dashboard]', host: { class: 'd-flex a-i-stretch sticky-right' }, standalone: false, template: "<div class=\"d-flex a-i-stretch m-b-8 m-t-8 p-l-8 hidden-xs\">\n  <button\n    class=\"btn btn-default btn-sm p-l-8 p-r-8 fit-h p-b-0 p-t-0 d-flex a-i-center\"\n    title=\"{{ 'Add dashboard' | translate }}\"\n    type=\"button\"\n    (click)=\"addDashboard()\"\n  >\n    <i\n      class=\"icon-20 m-r-4\"\n      c8yIcon=\"add-circle-outline\"\n    ></i>\n    <span>{{ 'Add dashboard' | translate }}</span>\n  </button>\n  <div class=\"p-r-sm-40\"></div>\n</div>\n" }]
+            args: [{ selector: '[c8y-add-dashboard]', host: { class: 'd-flex a-i-stretch sticky-right' }, imports: [IconDirective, C8yTranslatePipe], template: "<div class=\"d-flex a-i-stretch m-b-8 m-t-8 p-l-8 hidden-xs\">\n  <button\n    class=\"btn btn-default btn-sm p-l-8 p-r-8 fit-h p-b-0 p-t-0 d-flex a-i-center\"\n    title=\"{{ 'Add dashboard' | translate }}\"\n    type=\"button\"\n    (click)=\"addDashboard()\"\n  >\n    <i\n      class=\"icon-20 m-r-4\"\n      c8yIcon=\"add-circle-outline\"\n    ></i>\n    <span>{{ 'Add dashboard' | translate }}</span>\n  </button>\n  <div class=\"p-r-sm-40\"></div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2.TabsService }, { type: i1.Router }] });
 
 class AddDashboardFactory {
@@ -320,7 +320,7 @@ class ContextDashboardService {
         dashboard.name = dashboard.c8y_Dashboard.name;
         const { data } = dashboardType === ContextDashboardType.Group ||
             dashboardType === ContextDashboardType.Device ||
-            (context && dashboardType === ContextDashboardType.Named)
+            (context?.contextData?.id && dashboardType === ContextDashboardType.Named)
             ? await this.inventory.childAdditionsCreate(dashboard, context?.contextData.id || '')
             : await this.inventory.create(dashboard);
         return data;
@@ -376,7 +376,7 @@ class ContextDashboardService {
         if (!dashboard.c8y_DashboardHistory) {
             dashboard.c8y_DashboardHistory = [];
         }
-        if (!dashboardCfg.historyDescription) {
+        if (isEmpty(dashboardCfg?.historyDescription)) {
             dashboardCfg.historyDescription = { changeType: 'create' };
         }
         dashboardCfg.created = new Date().toISOString();
@@ -400,12 +400,29 @@ class ContextDashboardService {
         this.dashboardTabs$ = this.getTabs$(route.data.contextData, types, route?.parent?.data);
         return this.dashboardTabs$;
     }
+    getDashboard(name, defaultWidgets) {
+        const children = this.mapWidgets(defaultWidgets);
+        return this.getDashboard$(name, [ContextDashboardType.Named]).pipe(throwIfEmpty(), catchError(() => {
+            if (!this.hasPermissionsToCopyDashboard()) {
+                this.alert.warning(gettext('You are viewing a read-only dashboard because you don’t have the necessary permissions to modify it.'));
+            }
+            return of(this.getDefaultDashboard({
+                name,
+                children,
+                widgetClasses: { 'dashboard-theme-light': true, 'panel-title-regular': true }
+            }));
+        }));
+    }
+    /**
+     * @deprecated Use `getDashboard()` instead.
+     * This function will be removed in the future.
+     */
     getNamedDashboardOrCreate(name, defaultWidgets, context) {
         const children = this.mapWidgets(defaultWidgets);
         return this.getDashboard$(name, [ContextDashboardType.Named]).pipe(throwIfEmpty(), catchError(() => {
             if (!this.hasPermissionsToCopyDashboard()) {
                 this.alert.warning(gettext('You are viewing a read-only dashboard because you don’t have the necessary permissions to modify it.'));
-                return of(this.getTemporaryDashboard({
+                return of(this.getDefaultDashboard({
                     name,
                     children,
                     widgetClasses: { 'dashboard-theme-light': true, 'panel-title-regular': true }
@@ -452,6 +469,14 @@ class ContextDashboardService {
                 })
             });
         }
+        else if (/^\/(device|group)\/[0-9]+\/device-info$/.test(this.router.url)) {
+            this.router.navigate(['.'], {
+                relativeTo: getActivatedRoute(this.router),
+                ...(isNewDashboard && {
+                    state: { [NEW_DASHBOARD_ROUTER_STATE_PROP]: true }
+                })
+            });
+        }
         else {
             this.router.navigate(['..', this.DASHBOARD_ROUTE_PATH, dashboardMO.id], {
                 relativeTo: getActivatedRoute(this.router),
@@ -940,13 +965,12 @@ class ContextDashboardService {
         }
         return null;
     }
-    getTemporaryDashboard(dashboardCfg) {
+    getDefaultDashboard(dashboardCfg) {
         return {
             c8y_Dashboard: {
                 ...dashboardCfg,
-                name: dashboardCfg.name || 'Temporary Dashboard',
-                isTransient: true,
-                description: gettext('This is a temporary, non-editable dashboard displayed due to insufficient permissions.')
+                name: dashboardCfg.name || 'Default Dashboard',
+                description: gettext('This is a default dashboard.')
             },
             [`c8y_Dashboard!name!${dashboardCfg.name}`]: {}
         };
@@ -1101,12 +1125,12 @@ class DashboardDetailService {
             children: dashboard?.children || {}
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardDetailService, deps: [{ token: i6.FormBuilder }, { token: i2$1.TranslateService }, { token: i2.TabsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardDetailService, deps: [{ token: i5.FormBuilder }, { token: i2$1.TranslateService }, { token: i2.TabsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardDetailService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardDetailService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i6.FormBuilder }, { type: i2$1.TranslateService }, { type: i2.TabsService }] });
+        }], ctorParameters: () => [{ type: i5.FormBuilder }, { type: i2$1.TranslateService }, { type: i2.TabsService }] });
 
 class DashboardDetailComponent {
     constructor(contextDashboardService, translateService, contextRoute, activatedRoute, tabsService, router, inventory, route, dashboardDetailService, appState, groupService, modal, gainsightService) {
@@ -1297,7 +1321,7 @@ class DashboardDetailComponent {
         }
     }
     async createNewDashboard() {
-        const mo = await this.contextDashboardService.create(this.dashboard, this.currentContext);
+        const mo = await this.contextDashboardService.create(this.dashboard, this.currentContext, this.isNamedDashboard ? this.dashboard.name : undefined);
         await this.onCreateGSEvent(mo);
         await this.clearNamedOutletPath();
         this.cleanupAfterDetailsClose();
@@ -1326,7 +1350,7 @@ class DashboardDetailComponent {
                 ? `${parentName}_${this.context.id}_${dashboardName}_${this.mo.id}`
                 : 'noContext',
             dashboardType: mo.c8y_Dashboard.deviceType ? mo.c8y_Dashboard.deviceTypeValue : null,
-            context: this.contextDashboardService.getContextForGS(this.currentContext.contextData)
+            context: this.contextDashboardService.getContextForGS(this.currentContext?.contextData)
         });
     }
     async convertStringToHash(str) {
@@ -1475,7 +1499,7 @@ class DashboardDetailComponent {
         this.tabs = this.dashboardDetailService.getTabs();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardDetailComponent, deps: [{ token: ContextDashboardService }, { token: i2$1.TranslateService }, { token: i2.ContextRouteService }, { token: i1.ActivatedRoute }, { token: i2.TabsService }, { token: i1.Router }, { token: i1$1.InventoryService }, { token: i1.ActivatedRoute }, { token: DashboardDetailService }, { token: i2.AppStateService }, { token: i2.GroupService }, { token: i2.ModalService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DashboardDetailComponent, isStandalone: false, selector: "c8y-dashboard-detail", inputs: { isReport: "isReport", deviceType: "deviceType", context: "context", mo: "mo", dashboard: "dashboard", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability" }, outputs: { dashboardSaved: "dashboardSaved", previewChanged: "previewChanged" }, providers: [DashboardDetailService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"d-flex\"\n    *ngIf=\"!isCollapsed\"\n  >\n    <c8y-tabs-outlet\n      class=\"c8y-top-drawer--tabs\"\n      [tabs]=\"tabs\"\n      [outletName]=\"TABS_OUTLET_NAME\"\n      [orientation]=\"'vertical'\"\n      [openFirstTab]=\"true\"\n    ></c8y-tabs-outlet>\n\n    <div\n      class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n    >\n      <router-outlet name=\"dashboard-details\"></router-outlet>\n    </div>\n  </div>\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) || dashboardDetailService.saveButtonDisabled\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "directive", type: i8.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DashboardDetailComponent, isStandalone: true, selector: "c8y-dashboard-detail", inputs: { isReport: "isReport", deviceType: "deviceType", context: "context", mo: "mo", dashboard: "dashboard", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability" }, outputs: { dashboardSaved: "dashboardSaved", previewChanged: "previewChanged" }, providers: [DashboardDetailService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"d-flex\"\n    *ngIf=\"!isCollapsed\"\n  >\n    <c8y-tabs-outlet\n      class=\"c8y-top-drawer--tabs\"\n      [tabs]=\"tabs\"\n      [outletName]=\"TABS_OUTLET_NAME\"\n      [orientation]=\"'vertical'\"\n      [openFirstTab]=\"true\"\n    ></c8y-tabs-outlet>\n\n    <div\n      class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n    >\n      <router-outlet name=\"dashboard-details\"></router-outlet>\n    </div>\n  </div>\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) || dashboardDetailService.saveButtonDisabled\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     memoize(),
@@ -1485,7 +1509,7 @@ __decorate([
 ], DashboardDetailComponent.prototype, "convertStringToHash", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-dashboard-detail', standalone: false, providers: [DashboardDetailService], template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"d-flex\"\n    *ngIf=\"!isCollapsed\"\n  >\n    <c8y-tabs-outlet\n      class=\"c8y-top-drawer--tabs\"\n      [tabs]=\"tabs\"\n      [outletName]=\"TABS_OUTLET_NAME\"\n      [orientation]=\"'vertical'\"\n      [openFirstTab]=\"true\"\n    ></c8y-tabs-outlet>\n\n    <div\n      class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n    >\n      <router-outlet name=\"dashboard-details\"></router-outlet>\n    </div>\n  </div>\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) || dashboardDetailService.saveButtonDisabled\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-dashboard-detail', providers: [DashboardDetailService], imports: [CollapseDirective, NgIf, TabsOutletComponent, RouterOutlet, C8yTranslatePipe], template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"d-flex\"\n    *ngIf=\"!isCollapsed\"\n  >\n    <c8y-tabs-outlet\n      class=\"c8y-top-drawer--tabs\"\n      [tabs]=\"tabs\"\n      [outletName]=\"TABS_OUTLET_NAME\"\n      [orientation]=\"'vertical'\"\n      [openFirstTab]=\"true\"\n    ></c8y-tabs-outlet>\n\n    <div\n      class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n    >\n      <router-outlet name=\"dashboard-details\"></router-outlet>\n    </div>\n  </div>\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) || dashboardDetailService.saveButtonDisabled\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ContextDashboardService }, { type: i2$1.TranslateService }, { type: i2.ContextRouteService }, { type: i1.ActivatedRoute }, { type: i2.TabsService }, { type: i1.Router }, { type: i1$1.InventoryService }, { type: i1.ActivatedRoute }, { type: DashboardDetailService }, { type: i2.AppStateService }, { type: i2.GroupService }, { type: i2.ModalService }, { type: i2.GainsightService }], propDecorators: { isReport: [{
                 type: Input
             }], deviceType: [{
@@ -1878,7 +1902,7 @@ class WidgetAssetSelectorComponent {
         this.widgetConfigService.updateConfig({ device });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetAssetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WidgetAssetSelectorComponent, isStandalone: true, selector: "c8y-widget-asset-selector", inputs: { isRequired: "isRequired", showUnassigned: "showUnassigned", groupsSelectable: "groupsSelectable", assetSelectorConfig: "assetSelectorConfig", selectedDevice: "selectedDevice" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<div class=\"card borderless\">\n  <div\n    class=\"card-block p-0 bg-inherit\"\n    style=\"height: 315px\"\n  >\n    <!-- \n      ngIf is needed to avoid a race condition as \n      asset-selector seems not to support dynamic config changes\n    -->\n    <c8y-asset-selector-miller\n      class=\"d-block bg-inherit p-relative\"\n      *ngIf=\"assetSelectorConfig\"\n      (onSelected)=\"selectionChanged($event)\"\n      [config]=\"assetSelectorConfig\"\n      [asset]=\"(widgetConfigService.currentConfig$ | async).settings?.context\"\n      [(ngModel)]=\"selectedDevice\"\n      [required]=\"isRequired\"\n      name=\"configAsset\"\n    ></c8y-asset-selector-miller>\n  </div>\n\n  <c8y-widget-config-feedback>\n    <span\n      class=\"tag chip text-12 m-4\"\n      [ngClass]=\"{\n        'tag--info': selectedDevice || !isRequired,\n        'tag--danger': !selectedDevice && isRequired\n      }\"\n    >\n      <button\n        class=\"btn-clean text-12 m-r-4\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"selectedDevice\"\n        (click)=\"selectedDevice = null; updateConfig(null)\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ selectedDevice.name || 'Device ' + selectedDevice.id }}\"\n        *ngIf=\"selectedDevice\"\n      >\n        {{ selectedDevice.name || 'Device ' + selectedDevice.id }}\n      </span>\n      <span\n        *ngIf=\"!selectedDevice\"\n        translate\n      >\n        No asset selected\n      </span>\n    </span>\n  </c8y-widget-config-feedback>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AssetSelectorModule }, { kind: "component", type: i1$2.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WidgetAssetSelectorComponent, isStandalone: true, selector: "c8y-widget-asset-selector", inputs: { isRequired: "isRequired", showUnassigned: "showUnassigned", groupsSelectable: "groupsSelectable", assetSelectorConfig: "assetSelectorConfig", selectedDevice: "selectedDevice" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<div class=\"card borderless\">\n  <div\n    class=\"card-block p-0 bg-inherit\"\n    style=\"height: 315px\"\n  >\n    <!-- \n      ngIf is needed to avoid a race condition as \n      asset-selector seems not to support dynamic config changes\n    -->\n    <c8y-asset-selector-miller\n      class=\"d-block bg-inherit p-relative\"\n      *ngIf=\"assetSelectorConfig\"\n      (onSelected)=\"selectionChanged($event)\"\n      [config]=\"assetSelectorConfig\"\n      [asset]=\"(widgetConfigService.currentConfig$ | async).settings?.context\"\n      [(ngModel)]=\"selectedDevice\"\n      [required]=\"isRequired\"\n      name=\"configAsset\"\n    ></c8y-asset-selector-miller>\n  </div>\n\n  <c8y-widget-config-feedback>\n    <span\n      class=\"tag chip text-12 m-4\"\n      [ngClass]=\"{\n        'tag--info': selectedDevice || !isRequired,\n        'tag--danger': !selectedDevice && isRequired\n      }\"\n    >\n      <button\n        class=\"btn-clean text-12 m-r-4\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"selectedDevice\"\n        (click)=\"selectedDevice = null; updateConfig(null)\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ selectedDevice.name || 'Device ' + selectedDevice.id }}\"\n        *ngIf=\"selectedDevice\"\n      >\n        {{ selectedDevice.name || 'Device ' + selectedDevice.id }}\n      </span>\n      <span\n        *ngIf=\"!selectedDevice\"\n        translate\n      >\n        No asset selected\n      </span>\n    </span>\n  </c8y-widget-config-feedback>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AssetSelectorModule }, { kind: "component", type: i1$2.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetAssetSelectorComponent, decorators: [{
             type: Component,
@@ -1963,7 +1987,7 @@ class WidgetConfigService {
          * Returns all the current sections.
          *
          * A configuration section is a component that can be used to configure a widget.
-         * Sections should be added via the hookWidgetConfig.
+         * Sections should be added via the `hookWidgetConfig`.
          */
         this.currentSections$ = this.selected$.pipe(tap$1(() => (this.beforeSaveCallbacks = [])), withLatestFrom(this._currentConfig$), mergeMap$1(([selectedWidget, config]) => selectedWidget === null
             ? of([])
@@ -2259,6 +2283,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     args: [CONTEXT_DASHBOARD_CONFIG]
                 }] }] });
 
+class WidgetPreviewComponent {
+    constructor() {
+        this.widgetConfigService = inject(WidgetConfigService);
+        this.previewClasses = {
+            'dashboard-theme-light': true,
+            'panel-title-regular': true
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WidgetPreviewComponent, isStandalone: true, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [title]=\"(widgetConfigService.selected$ | async)?.data?.title\"\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span translate>{{ (widgetConfigService.selected$ | async)?.data?.title }}</span>\n      </c8y-dashboard-child-title>\n\n      <div\n        class=\"fit-h d-flex d-col j-c-center a-i-center\"\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'noPreview'\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'visibility-off'\"\n          [title]=\"'No preview available.' | translate\"\n          [subtitle]=\"'This widget does not provide any preview.' | translate\"\n          [horizontal]=\"false\"\n        ></c8y-ui-empty-state>\n      </div>\n\n      <c8y-dynamic-component\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'configPreview'\"\n        [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n        [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n      ></c8y-dynamic-component>\n\n      <ng-template\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'templatePreview'\"\n        [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"\n      ></ng-template>\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "component", type: i2.DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: i2.DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: i2.DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-widget-preview', standalone: true, imports: [NgIf, NgClass, C8yTranslatePipe, CommonModule, CoreModule], template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [title]=\"(widgetConfigService.selected$ | async)?.data?.title\"\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span translate>{{ (widgetConfigService.selected$ | async)?.data?.title }}</span>\n      </c8y-dashboard-child-title>\n\n      <div\n        class=\"fit-h d-flex d-col j-c-center a-i-center\"\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'noPreview'\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'visibility-off'\"\n          [title]=\"'No preview available.' | translate\"\n          [subtitle]=\"'This widget does not provide any preview.' | translate\"\n          [horizontal]=\"false\"\n        ></c8y-ui-empty-state>\n      </div>\n\n      <c8y-dynamic-component\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'configPreview'\"\n        [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n        [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n      ></c8y-dynamic-component>\n\n      <ng-template\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'templatePreview'\"\n        [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"\n      ></ng-template>\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n" }]
+        }], propDecorators: { previewClasses: [{
+                type: Input
+            }] } });
+
 class AppearanceSettingsComponent {
     constructor() {
         this.themeClass = 'dashboard-theme-light';
@@ -2290,7 +2332,7 @@ class AppearanceSettingsComponent {
         return value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AppearanceSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AppearanceSettingsComponent, isStandalone: true, selector: "c8y-appearance-settings", inputs: { themeClass: "themeClass", headerClass: "headerClass", defaultThemeClass: "defaultThemeClass", defaultHeaderClass: "defaultHeaderClass", dashboardSettings: "dashboardSettings", possibleStylingTheme: "possibleStylingTheme", possibleStylingHeader: "possibleStylingHeader", columns: "columns" }, outputs: { themeClassChange: "themeClassChange", headerClassChange: "headerClassChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">{{ 'Default theme' | translate }}</legend>\n      <legend *ngIf=\"!dashboardSettings\">{{ 'Theme' | translate }}</legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0 fit-w\"\n          *ngFor=\"let themeClassItem of possibleStylingTheme; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"content\"\n                type=\"radio\"\n                [id]=\"'groupradiocontentclass' + i\"\n                [value]=\"themeClassItem.class\"\n                [ngModel]=\"themeClass\"\n                (click)=\"themeClassClick(themeClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ themeClassItem.label | translate }}{{\n                  themeClassItem.class === defaultThemeClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ themeClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"themeClassItem.class === defaultThemeClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ themeClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">\n        {{ 'Default widget header style' | translate }}\n      </legend>\n      <legend *ngIf=\"!dashboardSettings\">\n        {{ 'Widget header style' | translate }}\n      </legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0\"\n          *ngFor=\"let headerClassItem of possibleStylingHeader; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"header\"\n                type=\"radio\"\n                [id]=\"'groupradioheaderclass' + i\"\n                [value]=\"headerClassItem.class\"\n                [ngModel]=\"headerClass\"\n                (click)=\"headerClassClick(headerClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ headerClassItem.label | translate }}{{\n                  headerClassItem.class === defaultHeaderClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ headerClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"headerClassItem.class === defaultHeaderClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ headerClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AppearanceSettingsComponent, isStandalone: true, selector: "c8y-appearance-settings", inputs: { themeClass: "themeClass", headerClass: "headerClass", defaultThemeClass: "defaultThemeClass", defaultHeaderClass: "defaultHeaderClass", dashboardSettings: "dashboardSettings", possibleStylingTheme: "possibleStylingTheme", possibleStylingHeader: "possibleStylingHeader", columns: "columns" }, outputs: { themeClassChange: "themeClassChange", headerClassChange: "headerClassChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">{{ 'Default theme' | translate }}</legend>\n      <legend *ngIf=\"!dashboardSettings\">{{ 'Theme' | translate }}</legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0 fit-w\"\n          *ngFor=\"let themeClassItem of possibleStylingTheme; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"content\"\n                type=\"radio\"\n                [id]=\"'groupradiocontentclass' + i\"\n                [value]=\"themeClassItem.class\"\n                [ngModel]=\"themeClass\"\n                (click)=\"themeClassClick(themeClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ themeClassItem.label | translate }}{{\n                  themeClassItem.class === defaultThemeClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ themeClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"themeClassItem.class === defaultThemeClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ themeClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">\n        {{ 'Default widget header style' | translate }}\n      </legend>\n      <legend *ngIf=\"!dashboardSettings\">\n        {{ 'Widget header style' | translate }}\n      </legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0\"\n          *ngFor=\"let headerClassItem of possibleStylingHeader; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"header\"\n                type=\"radio\"\n                [id]=\"'groupradioheaderclass' + i\"\n                [value]=\"headerClassItem.class\"\n                [ngModel]=\"headerClass\"\n                (click)=\"headerClassClick(headerClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ headerClassItem.label | translate }}{{\n                  headerClassItem.class === defaultHeaderClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ headerClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"headerClassItem.class === defaultHeaderClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ headerClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AppearanceSettingsComponent, decorators: [{
             type: Component,
@@ -2319,24 +2361,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
-class WidgetPreviewComponent {
-    constructor() {
-        this.widgetConfigService = inject(WidgetConfigService);
-        this.previewClasses = {
-            'dashboard-theme-light': true,
-            'panel-title-regular': true
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WidgetPreviewComponent, isStandalone: true, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [title]=\"(widgetConfigService.selected$ | async)?.data?.title\"\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span translate>{{ (widgetConfigService.selected$ | async)?.data?.title }}</span>\n      </c8y-dashboard-child-title>\n\n      <div\n        class=\"fit-h d-flex d-col j-c-center a-i-center\"\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'noPreview'\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'visibility-off'\"\n          [title]=\"'No preview available.' | translate\"\n          [subtitle]=\"'This widget does not provide any preview.' | translate\"\n          [horizontal]=\"false\"\n        ></c8y-ui-empty-state>\n      </div>\n\n      <c8y-dynamic-component\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'configPreview'\"\n        [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n        [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n      ></c8y-dynamic-component>\n\n      <ng-template\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'templatePreview'\"\n        [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"\n      ></ng-template>\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "component", type: i2.DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: i2.DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: i2.DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetPreviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-widget-preview', standalone: true, imports: [NgIf, NgClass, C8yTranslatePipe, CommonModule, CoreModule], template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [title]=\"(widgetConfigService.selected$ | async)?.data?.title\"\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span translate>{{ (widgetConfigService.selected$ | async)?.data?.title }}</span>\n      </c8y-dashboard-child-title>\n\n      <div\n        class=\"fit-h d-flex d-col j-c-center a-i-center\"\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'noPreview'\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'visibility-off'\"\n          [title]=\"'No preview available.' | translate\"\n          [subtitle]=\"'This widget does not provide any preview.' | translate\"\n          [horizontal]=\"false\"\n        ></c8y-ui-empty-state>\n      </div>\n\n      <c8y-dynamic-component\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'configPreview'\"\n        [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n        [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n      ></c8y-dynamic-component>\n\n      <ng-template\n        *ngIf=\"(widgetConfigService.previewViewState$ | async) === 'templatePreview'\"\n        [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"\n      ></ng-template>\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n" }]
-        }], propDecorators: { previewClasses: [{
-                type: Input
-            }] } });
-
 class WidgetConfigComponent {
     get isEdit() {
         return !!this.current;
@@ -2561,11 +2585,27 @@ class WidgetConfigComponent {
         return widgetConfig;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i2.BottomDrawerRef }, { token: ContextDashboardService }, { token: WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WidgetConfigComponent, isStandalone: false, selector: "c8y-widget-config", host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header j-c-center separator\">\n    <div class=\"h4 text-center\">\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              data-cy=\"widget-config--Search\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        <button\n          class=\"btn-clean d-col card m-b-0\"\n          [title]=\"cmp.description || cmp.label | translate\"\n          type=\"button\"\n          data-cy=\"widget-config--widget-list\"\n          *ngFor=\"let cmp of searchResult || components\"\n          (click)=\"select(cmp)\"\n        >\n          <div\n            class=\"border-bottom\"\n            role=\"presentation\"\n          >\n            <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n              <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n              <small translate>Preview not available</small>\n            </ng-container>\n            <ng-template #previewImage>\n              <img\n                class=\"widget-thumbnail\"\n                alt=\"{{ cmp.label | translate }}\"\n                [src]=\"cmp.previewImage\"\n              />\n            </ng-template>\n          </div>\n          <div class=\"card-block\">\n            <p class=\"card-title text-truncate text-medium\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n            <p\n              class=\"small text-default\"\n              style=\"white-space: wrap\"\n            >\n              {{ cmp.description | translate }}\n            </p>\n          </div>\n        </button>\n        <c8y-ui-empty-state\n          class=\"p-24 grid__col--fullspan\"\n          [icon]=\"'search'\"\n          [title]=\"'No widgets found.' | translate\"\n          [subtitle]=\"' Rephrase your search term.' | translate\"\n          *ngIf=\"searchResult && searchResult.length === 0\"\n        >\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Reset search' | translate }}\"\n            type=\"button\"\n            (click)=\"resetSearch()\"\n          >\n            {{ 'Reset search' | translate }}\n          </button>\n        </c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"p-t-8\"\n      *ngIf=\"selected\"\n    >\n      <p>\n        {{ selected.description | translate }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"d-grid grid__col--560-auto min-height-0 flex-grow\">\n    <div class=\"bg-level-1 inner-scroll\">\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"title\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"selected?.data.title\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-ui-empty-state\n        class=\"p-24\"\n        [icon]=\"'settings'\"\n        [title]=\"'No configuration needed.' | translate\"\n        [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n        [horizontal]=\"true\"\n        *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n      ></c8y-ui-empty-state>\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n            <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            </ng-container>\n          </ng-container>\n        </form>\n      </div>\n    </div>\n    <div class=\"inner-scroll p-32 p-t-0\">\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n      <c8y-appearance-settings\n        [(themeClass)]=\"styling.contentClass\"\n        [(headerClass)]=\"styling.headerClass\"\n        [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n        [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n        [defaultThemeClass]=\"defaultStyling.contentClass\"\n        [defaultHeaderClass]=\"defaultStyling.headerClass\"\n        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </div>\n\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WidgetConfigComponent, isStandalone: true, selector: "c8y-widget-config", host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header j-c-center separator\">\n    <div class=\"h4 text-center\">\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              data-cy=\"widget-config--Search\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        <button\n          class=\"btn-clean d-col card m-b-0\"\n          [title]=\"cmp.description || cmp.label | translate\"\n          type=\"button\"\n          data-cy=\"widget-config--widget-list\"\n          *ngFor=\"let cmp of searchResult || components\"\n          (click)=\"select(cmp)\"\n        >\n          <div\n            class=\"border-bottom\"\n            role=\"presentation\"\n          >\n            <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n              <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n              <small translate>Preview not available</small>\n            </ng-container>\n            <ng-template #previewImage>\n              <img\n                class=\"widget-thumbnail\"\n                alt=\"{{ cmp.label | translate }}\"\n                [src]=\"cmp.previewImage\"\n              />\n            </ng-template>\n          </div>\n          <div class=\"card-block\">\n            <p class=\"card-title text-truncate text-medium\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n            <p\n              class=\"small text-default\"\n              style=\"white-space: wrap\"\n            >\n              {{ cmp.description | translate }}\n            </p>\n          </div>\n        </button>\n        <c8y-ui-empty-state\n          class=\"p-24 grid__col--fullspan\"\n          [icon]=\"'search'\"\n          [title]=\"'No widgets found.' | translate\"\n          [subtitle]=\"' Rephrase your search term.' | translate\"\n          *ngIf=\"searchResult && searchResult.length === 0\"\n        >\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Reset search' | translate }}\"\n            type=\"button\"\n            (click)=\"resetSearch()\"\n          >\n            {{ 'Reset search' | translate }}\n          </button>\n        </c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"p-t-8\"\n      *ngIf=\"selected\"\n    >\n      <p>\n        {{ selected.description | translate }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"d-grid grid__col--560-auto min-height-0 flex-grow\">\n    <div class=\"bg-level-1 inner-scroll\">\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"title\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"selected?.data.title\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-ui-empty-state\n        class=\"p-24\"\n        [icon]=\"'settings'\"\n        [title]=\"'No configuration needed.' | translate\"\n        [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n        [horizontal]=\"true\"\n        *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n      ></c8y-ui-empty-state>\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n            <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            </ng-container>\n          </ng-container>\n        </form>\n      </div>\n    </div>\n    <div class=\"inner-scroll p-32 p-t-0\">\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n      <c8y-appearance-settings\n        [(themeClass)]=\"styling.contentClass\"\n        [(headerClass)]=\"styling.headerClass\"\n        [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n        [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n        [defaultThemeClass]=\"defaultStyling.contentClass\"\n        [defaultHeaderClass]=\"defaultStyling.headerClass\"\n        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </div>\n\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-widget-config', host: { class: 'd-contents' }, standalone: false, template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header j-c-center separator\">\n    <div class=\"h4 text-center\">\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              data-cy=\"widget-config--Search\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        <button\n          class=\"btn-clean d-col card m-b-0\"\n          [title]=\"cmp.description || cmp.label | translate\"\n          type=\"button\"\n          data-cy=\"widget-config--widget-list\"\n          *ngFor=\"let cmp of searchResult || components\"\n          (click)=\"select(cmp)\"\n        >\n          <div\n            class=\"border-bottom\"\n            role=\"presentation\"\n          >\n            <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n              <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n              <small translate>Preview not available</small>\n            </ng-container>\n            <ng-template #previewImage>\n              <img\n                class=\"widget-thumbnail\"\n                alt=\"{{ cmp.label | translate }}\"\n                [src]=\"cmp.previewImage\"\n              />\n            </ng-template>\n          </div>\n          <div class=\"card-block\">\n            <p class=\"card-title text-truncate text-medium\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n            <p\n              class=\"small text-default\"\n              style=\"white-space: wrap\"\n            >\n              {{ cmp.description | translate }}\n            </p>\n          </div>\n        </button>\n        <c8y-ui-empty-state\n          class=\"p-24 grid__col--fullspan\"\n          [icon]=\"'search'\"\n          [title]=\"'No widgets found.' | translate\"\n          [subtitle]=\"' Rephrase your search term.' | translate\"\n          *ngIf=\"searchResult && searchResult.length === 0\"\n        >\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Reset search' | translate }}\"\n            type=\"button\"\n            (click)=\"resetSearch()\"\n          >\n            {{ 'Reset search' | translate }}\n          </button>\n        </c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"p-t-8\"\n      *ngIf=\"selected\"\n    >\n      <p>\n        {{ selected.description | translate }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"d-grid grid__col--560-auto min-height-0 flex-grow\">\n    <div class=\"bg-level-1 inner-scroll\">\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"title\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"selected?.data.title\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-ui-empty-state\n        class=\"p-24\"\n        [icon]=\"'settings'\"\n        [title]=\"'No configuration needed.' | translate\"\n        [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n        [horizontal]=\"true\"\n        *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n      ></c8y-ui-empty-state>\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n            <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            </ng-container>\n          </ng-container>\n        </form>\n      </div>\n    </div>\n    <div class=\"inner-scroll p-32 p-t-0\">\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n      <c8y-appearance-settings\n        [(themeClass)]=\"styling.contentClass\"\n        [(headerClass)]=\"styling.headerClass\"\n        [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n        [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n        [defaultThemeClass]=\"defaultStyling.contentClass\"\n        [defaultHeaderClass]=\"defaultStyling.headerClass\"\n        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </div>\n\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'c8y-widget-config', host: { class: 'd-contents' }, imports: [
+                        NgIf,
+                        FormsModule,
+                        IconDirective,
+                        NgFor,
+                        C8yTranslateDirective,
+                        HighlightComponent,
+                        EmptyStateComponent,
+                        FormGroupComponent,
+                        RequiredInputPlaceholderDirective,
+                        C8yComponentOutlet,
+                        WidgetPreviewComponent,
+                        AppearanceSettingsComponent,
+                        ProductExperienceDirective,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header j-c-center separator\">\n    <div class=\"h4 text-center\">\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              data-cy=\"widget-config--Search\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        <button\n          class=\"btn-clean d-col card m-b-0\"\n          [title]=\"cmp.description || cmp.label | translate\"\n          type=\"button\"\n          data-cy=\"widget-config--widget-list\"\n          *ngFor=\"let cmp of searchResult || components\"\n          (click)=\"select(cmp)\"\n        >\n          <div\n            class=\"border-bottom\"\n            role=\"presentation\"\n          >\n            <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n              <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n              <small translate>Preview not available</small>\n            </ng-container>\n            <ng-template #previewImage>\n              <img\n                class=\"widget-thumbnail\"\n                alt=\"{{ cmp.label | translate }}\"\n                [src]=\"cmp.previewImage\"\n              />\n            </ng-template>\n          </div>\n          <div class=\"card-block\">\n            <p class=\"card-title text-truncate text-medium\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n            <p\n              class=\"small text-default\"\n              style=\"white-space: wrap\"\n            >\n              {{ cmp.description | translate }}\n            </p>\n          </div>\n        </button>\n        <c8y-ui-empty-state\n          class=\"p-24 grid__col--fullspan\"\n          [icon]=\"'search'\"\n          [title]=\"'No widgets found.' | translate\"\n          [subtitle]=\"' Rephrase your search term.' | translate\"\n          *ngIf=\"searchResult && searchResult.length === 0\"\n        >\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Reset search' | translate }}\"\n            type=\"button\"\n            (click)=\"resetSearch()\"\n          >\n            {{ 'Reset search' | translate }}\n          </button>\n        </c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"p-t-8\"\n      *ngIf=\"selected\"\n    >\n      <p>\n        {{ selected.description | translate }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"d-grid grid__col--560-auto min-height-0 flex-grow\">\n    <div class=\"bg-level-1 inner-scroll\">\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"title\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"selected?.data.title\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-ui-empty-state\n        class=\"p-24\"\n        [icon]=\"'settings'\"\n        [title]=\"'No configuration needed.' | translate\"\n        [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n        [horizontal]=\"true\"\n        *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n      ></c8y-ui-empty-state>\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n            <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            </ng-container>\n          </ng-container>\n        </form>\n      </div>\n    </div>\n    <div class=\"inner-scroll p-32 p-t-0\">\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n      <c8y-appearance-settings\n        [(themeClass)]=\"styling.contentClass\"\n        [(headerClass)]=\"styling.headerClass\"\n        [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n        [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n        [defaultThemeClass]=\"defaultStyling.contentClass\"\n        [defaultHeaderClass]=\"defaultStyling.headerClass\"\n        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </div>\n\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: WidgetService }, { type: i2.BottomDrawerRef }, { type: ContextDashboardService }, { type: WidgetConfigService }], propDecorators: { configForm: [{
                 type: ViewChild,
                 args: ['configForm', { static: false }]
@@ -2759,6 +2799,10 @@ class ContextDashboardComponent {
         }
         this.actionBarService.refresh();
     }
+    editDashboard() {
+        const isEdit = !!this.mo.id;
+        this.dashboardDetails.show(isEdit);
+    }
     /**
      * Remove the complete dashboard and navigate away.
      */
@@ -2833,7 +2877,12 @@ class ContextDashboardComponent {
     }
     async saveWidgetsToDashboard() {
         const currentState = this.editModeService.getCurrentState();
-        this.mo.c8y_Dashboard.children = currentState.children;
+        const editedChildren = currentState.children;
+        // first-time save (no `id` yet): create the dashboard, then immediately update it with the edited widgets
+        if (!this.mo.id) {
+            this.mo = await this.contextDashboardService.create(this.mo.c8y_Dashboard, this.context, this.name);
+        }
+        this.mo.c8y_Dashboard.children = editedChildren;
         this.mo.c8y_Dashboard.historyDescription = {
             changeType: 'update',
             widgetChanges: this.mapStateToHistoryDescription(currentState.changeHistory)
@@ -2842,7 +2891,7 @@ class ContextDashboardComponent {
         this.editModeService.reset();
         this.editModeService.init({
             name: DASHBOARD_CHILDREN_STATE_NAME.initial,
-            children: this.mo.c8y_Dashboard.children,
+            children: editedChildren,
             changeHistory: {}
         });
         this.isCopyDisabled = this.getDashboardCopyPermissionState();
@@ -2919,13 +2968,11 @@ class ContextDashboardComponent {
     }
     async onLoad(trackExperience) {
         this.isNamedDashboard = this.contextDashboardService.isNamed(this.mo);
-        this.hasPermissionToEditDashboard =
-            this.dashboard && !this.dashboard.isTransient
-                ? await this.contextDashboardService.canEditDashboard(this.mo)
-                : false;
+        this.hasPermissionToEditDashboard = this.dashboard
+            ? await this.contextDashboardService.canEditDashboard(this.mo)
+            : false;
         this.canCopy =
             this._canCopy &&
-                !this.dashboard?.isTransient &&
                 (this.contextDashboardService.isDeviceDashboard(this.mo) ||
                     this.contextDashboardService.isDeviceType(this.mo) ||
                     this.contextDashboardService.isGroupDashboard(this.mo));
@@ -3020,7 +3067,7 @@ class ContextDashboardComponent {
     }
     loadNamedDashboard() {
         this.dataSub = this.contextDashboardService
-            .getNamedDashboardOrCreate(this.name, this.defaultWidgets, this.context)
+            .getDashboard(this.name, this.defaultWidgets)
             .subscribe(mo => {
             this.context = this.context || {};
             this.mo = mo;
@@ -3184,7 +3231,7 @@ class ContextDashboardComponent {
             : this.gainsightService.hashGroupName(str);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ContextDashboardComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: ContextDashboardService }, { token: i2.AlertService }, { token: i0.Renderer2 }, { token: CONTEXT_DASHBOARD_CONFIG }, { token: WidgetService }, { token: i2.BottomDrawerService }, { token: i2.GainsightService }, { token: i2.ActionBarService }, { token: i2$1.TranslateService }, { token: i2.ModalService }, { token: DashboardEditModeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ContextDashboardComponent, isStandalone: false, selector: "c8y-context-dashboard", inputs: { name: "name", childrenClasses: "childrenClasses", context: "context", setTitle: "setTitle", defaultWidgets: "defaultWidgets", _canCopy: ["canCopy", "_canCopy"], canDelete: "canDelete", isLoading: "isLoading", breadcrumbSettings: "breadcrumbSettings", showContextHelpButton: "showContextHelpButton", translateWidgetTitle: "translateWidgetTitle", hideAvailability: "hideAvailability" }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)" }, properties: { "class": "this.class" }, styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, viewQueries: [{ propertyName: "dashboardDetails", first: true, predicate: DashboardDetailComponent, descendants: true, static: true }, { propertyName: "widgetsDashboard", first: true, predicate: WidgetsDashboardComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title *ngIf=\"title\">\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"10000\"\n  *ngIf=\"dashboard?.deviceType && dashboard.deviceTypeValue\"\n>\n  <button\n    class=\"btn-clean btn-link\"\n    popoverTitle=\"{{ 'Dashboard template' | translate }}\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"dashboardTypePopoverRef\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n  >\n    <span class=\"tag tag--info text-12\">\n      <span class=\"dashboard-template-marker\"></span>\n      {{ dashboardTypeLabel | translate: { dashboardType: dashboard.deviceTypeValue } }}\n    </span>\n  </button>\n  <ng-template #dashboardTypePopoverRef>\n    <div\n      [innerHTML]=\"dashboardTypePopover | translate: { dashboardType: dashboard.deviceTypeValue }\"\n    ></div>\n  </ng-template>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-1\"\n  *ngIf=\"defaultWidgets.length > 0\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reset widgets' | translate }}\"\n    type=\"button\"\n    px-event=\"Reset dashboard\"\n    (click)=\"restore()\"\n    [disabled]=\"disabled || (widgetsDashboard?.editMode$ | async)\"\n    data-cy=\"context-dashboard--button-reset-dashboard\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"reset\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Reset widgets' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/cockpit/working-with-dashboards/#working-with-dashboards\"\n  *ngIf=\"showContextHelpButton\"\n></c8y-help>\n\n<c8y-dashboard-detail\n  class=\"d-contents\"\n  [isReport]=\"isReport\"\n  [dashboard]=\"dashboard\"\n  [mo]=\"mo\"\n  [context]=\"context\"\n  [deviceType]=\"context?.type\"\n  [hideAvailability]=\"hideAvailability\"\n  [isNamedDashboard]=\"isNamedDashboard\"\n  (dashboardSaved)=\"reloadDashboard($event)\"\n  (previewChanged)=\"dashboardPreview($event)\"\n></c8y-dashboard-detail>\n\n<c8y-widgets-dashboard\n  [context]=\"context\"\n  [contextDashboard]=\"dashboard\"\n  [widgets]=\"widgets\"\n  [isCopyDisabled]=\"isCopyDisabled\"\n  [settings]=\"{\n    isLoading: isLoading,\n    isDisabled: disabled,\n    canDelete: canDelete && !!dashboard,\n    translateWidgetTitle: dashboard?.translateWidgetTitle ?? translateWidgetTitle,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard?.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy && !!dashboard,\n    defaultWidth: dashboard?.columns >= 24 ? 8 : 4,\n    columns: dashboard?.columns || 12\n  }\"\n  [breadcrumb]=\"breadcrumbSettings\"\n  [editModeButtons]=\"{\n    undoButtonDisabled: editModeService.undoButtonDisabled,\n    changeToUndoName: editModeService.changeToUndoName,\n    redoButtonDisabled: !editModeService.redoStackLastItem,\n    changeToRedoName: editModeService.redoStackLastItem?.name\n  }\"\n  (onChangeDashboard)=\"positionOrWidgetDimensionChange($event)\"\n  (onAddWidget)=\"addWidget()\"\n  (onEditWidget)=\"editWidget($event)\"\n  (onDeleteWidget)=\"deleteWidget($event)\"\n  (onSaveDashboard)=\"saveWidgetsToDashboard()\"\n  (onCancelDashboard)=\"cancelEditMode()\"\n  (revertChange)=\"revertChange($event)\"\n  (onChangeStart)=\"addDashboardClassToBody()\"\n  (onChangeEnd)=\"removeDashboardClassFromBody()\"\n  (onEditDashboard)=\"dashboardDetails.show(true)\"\n  (onCopyDashboard)=\"copyDashboard()\"\n  (onDeleteDashboard)=\"deleteDashboard()\"\n></c8y-widgets-dashboard>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i2.WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: ["widgets", "context", "contextDashboard", "settings", "isCopyDisabled", "breadcrumb", "editModeButtons"], outputs: ["onAddWidget", "onEditWidget", "onDeleteWidget", "onChangeDashboard", "onResize", "onEditDashboard", "onCopyDashboard", "onDeleteDashboard", "onChangeStart", "onChangeEnd", "onSaveDashboard", "onCancelDashboard", "revertChange"] }, { kind: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: DashboardDetailComponent, selector: "c8y-dashboard-detail", inputs: ["isReport", "deviceType", "context", "mo", "dashboard", "isNamedDashboard", "hideAvailability"], outputs: ["dashboardSaved", "previewChanged"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ContextDashboardComponent, isStandalone: true, selector: "c8y-context-dashboard", inputs: { name: "name", childrenClasses: "childrenClasses", context: "context", setTitle: "setTitle", defaultWidgets: "defaultWidgets", _canCopy: ["canCopy", "_canCopy"], canDelete: "canDelete", isLoading: "isLoading", breadcrumbSettings: "breadcrumbSettings", showContextHelpButton: "showContextHelpButton", translateWidgetTitle: "translateWidgetTitle", hideAvailability: "hideAvailability" }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)" }, properties: { "class": "this.class" }, styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, viewQueries: [{ propertyName: "dashboardDetails", first: true, predicate: DashboardDetailComponent, descendants: true, static: true }, { propertyName: "widgetsDashboard", first: true, predicate: WidgetsDashboardComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title *ngIf=\"title\">\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"10000\"\n  *ngIf=\"dashboard?.deviceType && dashboard.deviceTypeValue\"\n>\n  <button\n    class=\"btn-clean btn-link\"\n    popoverTitle=\"{{ 'Dashboard template' | translate }}\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"dashboardTypePopoverRef\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n  >\n    <span class=\"tag tag--info text-12\">\n      <span class=\"dashboard-template-marker\"></span>\n      {{ dashboardTypeLabel | translate: { dashboardType: dashboard.deviceTypeValue } }}\n    </span>\n  </button>\n  <ng-template #dashboardTypePopoverRef>\n    <div\n      [innerHTML]=\"dashboardTypePopover | translate: { dashboardType: dashboard.deviceTypeValue }\"\n    ></div>\n  </ng-template>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-1\"\n  *ngIf=\"defaultWidgets.length > 0\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reset widgets' | translate }}\"\n    type=\"button\"\n    px-event=\"Reset dashboard\"\n    (click)=\"restore()\"\n    [disabled]=\"disabled || !mo?.id || (widgetsDashboard?.editMode$ | async)\"\n    data-cy=\"context-dashboard--button-reset-dashboard\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"reset\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Reset widgets' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/cockpit/working-with-dashboards/#working-with-dashboards\"\n  *ngIf=\"showContextHelpButton\"\n></c8y-help>\n\n<c8y-dashboard-detail\n  class=\"d-contents\"\n  [isReport]=\"isReport\"\n  [dashboard]=\"dashboard\"\n  [mo]=\"mo\"\n  [context]=\"context\"\n  [deviceType]=\"context?.type\"\n  [hideAvailability]=\"hideAvailability\"\n  [isNamedDashboard]=\"isNamedDashboard\"\n  (dashboardSaved)=\"reloadDashboard($event)\"\n  (previewChanged)=\"dashboardPreview($event)\"\n></c8y-dashboard-detail>\n\n<c8y-widgets-dashboard\n  [context]=\"context\"\n  [contextDashboard]=\"dashboard\"\n  [widgets]=\"widgets\"\n  [isCopyDisabled]=\"isCopyDisabled\"\n  [settings]=\"{\n    isLoading: isLoading,\n    isDisabled: disabled,\n    canDelete: canDelete && !!dashboard,\n    translateWidgetTitle: dashboard?.translateWidgetTitle ?? translateWidgetTitle,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard?.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy && !!dashboard,\n    defaultWidth: dashboard?.columns >= 24 ? 8 : 4,\n    columns: dashboard?.columns || 12\n  }\"\n  [breadcrumb]=\"breadcrumbSettings\"\n  [editModeButtons]=\"{\n    undoButtonDisabled: editModeService.undoButtonDisabled,\n    changeToUndoName: editModeService.changeToUndoName,\n    redoButtonDisabled: !editModeService.redoStackLastItem,\n    changeToRedoName: editModeService.redoStackLastItem?.name\n  }\"\n  (onChangeDashboard)=\"positionOrWidgetDimensionChange($event)\"\n  (onAddWidget)=\"addWidget()\"\n  (onEditWidget)=\"editWidget($event)\"\n  (onDeleteWidget)=\"deleteWidget($event)\"\n  (onSaveDashboard)=\"saveWidgetsToDashboard()\"\n  (onCancelDashboard)=\"cancelEditMode()\"\n  (revertChange)=\"revertChange($event)\"\n  (onChangeStart)=\"addDashboardClassToBody()\"\n  (onChangeEnd)=\"removeDashboardClassFromBody()\"\n  (onEditDashboard)=\"editDashboard()\"\n  (onCopyDashboard)=\"copyDashboard()\"\n  (onDeleteDashboard)=\"deleteDashboard()\"\n></c8y-widgets-dashboard>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: DashboardDetailComponent, selector: "c8y-dashboard-detail", inputs: ["isReport", "deviceType", "context", "mo", "dashboard", "isNamedDashboard", "hideAvailability"], outputs: ["dashboardSaved", "previewChanged"] }, { kind: "component", type: WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: ["widgets", "context", "contextDashboard", "settings", "isCopyDisabled", "breadcrumb", "editModeButtons"], outputs: ["onAddWidget", "onEditWidget", "onDeleteWidget", "onChangeDashboard", "onResize", "onEditDashboard", "onCopyDashboard", "onDeleteDashboard", "onChangeStart", "onChangeEnd", "onSaveDashboard", "onCancelDashboard", "revertChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 __decorate([
     memoize(),
@@ -3199,7 +3246,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
       display: block;
     `,
                         class: 'dashboard c8y-grid-dashboard'
-                    }, standalone: false, template: "<c8y-title *ngIf=\"title\">\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"10000\"\n  *ngIf=\"dashboard?.deviceType && dashboard.deviceTypeValue\"\n>\n  <button\n    class=\"btn-clean btn-link\"\n    popoverTitle=\"{{ 'Dashboard template' | translate }}\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"dashboardTypePopoverRef\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n  >\n    <span class=\"tag tag--info text-12\">\n      <span class=\"dashboard-template-marker\"></span>\n      {{ dashboardTypeLabel | translate: { dashboardType: dashboard.deviceTypeValue } }}\n    </span>\n  </button>\n  <ng-template #dashboardTypePopoverRef>\n    <div\n      [innerHTML]=\"dashboardTypePopover | translate: { dashboardType: dashboard.deviceTypeValue }\"\n    ></div>\n  </ng-template>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-1\"\n  *ngIf=\"defaultWidgets.length > 0\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reset widgets' | translate }}\"\n    type=\"button\"\n    px-event=\"Reset dashboard\"\n    (click)=\"restore()\"\n    [disabled]=\"disabled || (widgetsDashboard?.editMode$ | async)\"\n    data-cy=\"context-dashboard--button-reset-dashboard\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"reset\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Reset widgets' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/cockpit/working-with-dashboards/#working-with-dashboards\"\n  *ngIf=\"showContextHelpButton\"\n></c8y-help>\n\n<c8y-dashboard-detail\n  class=\"d-contents\"\n  [isReport]=\"isReport\"\n  [dashboard]=\"dashboard\"\n  [mo]=\"mo\"\n  [context]=\"context\"\n  [deviceType]=\"context?.type\"\n  [hideAvailability]=\"hideAvailability\"\n  [isNamedDashboard]=\"isNamedDashboard\"\n  (dashboardSaved)=\"reloadDashboard($event)\"\n  (previewChanged)=\"dashboardPreview($event)\"\n></c8y-dashboard-detail>\n\n<c8y-widgets-dashboard\n  [context]=\"context\"\n  [contextDashboard]=\"dashboard\"\n  [widgets]=\"widgets\"\n  [isCopyDisabled]=\"isCopyDisabled\"\n  [settings]=\"{\n    isLoading: isLoading,\n    isDisabled: disabled,\n    canDelete: canDelete && !!dashboard,\n    translateWidgetTitle: dashboard?.translateWidgetTitle ?? translateWidgetTitle,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard?.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy && !!dashboard,\n    defaultWidth: dashboard?.columns >= 24 ? 8 : 4,\n    columns: dashboard?.columns || 12\n  }\"\n  [breadcrumb]=\"breadcrumbSettings\"\n  [editModeButtons]=\"{\n    undoButtonDisabled: editModeService.undoButtonDisabled,\n    changeToUndoName: editModeService.changeToUndoName,\n    redoButtonDisabled: !editModeService.redoStackLastItem,\n    changeToRedoName: editModeService.redoStackLastItem?.name\n  }\"\n  (onChangeDashboard)=\"positionOrWidgetDimensionChange($event)\"\n  (onAddWidget)=\"addWidget()\"\n  (onEditWidget)=\"editWidget($event)\"\n  (onDeleteWidget)=\"deleteWidget($event)\"\n  (onSaveDashboard)=\"saveWidgetsToDashboard()\"\n  (onCancelDashboard)=\"cancelEditMode()\"\n  (revertChange)=\"revertChange($event)\"\n  (onChangeStart)=\"addDashboardClassToBody()\"\n  (onChangeEnd)=\"removeDashboardClassFromBody()\"\n  (onEditDashboard)=\"dashboardDetails.show(true)\"\n  (onCopyDashboard)=\"copyDashboard()\"\n  (onDeleteDashboard)=\"deleteDashboard()\"\n></c8y-widgets-dashboard>\n" }]
+                    }, imports: [
+                        NgIf,
+                        TitleComponent,
+                        ActionBarItemComponent,
+                        PopoverDirective,
+                        IconDirective,
+                        HelpComponent,
+                        DashboardDetailComponent,
+                        WidgetsDashboardComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], template: "<c8y-title *ngIf=\"title\">\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"10000\"\n  *ngIf=\"dashboard?.deviceType && dashboard.deviceTypeValue\"\n>\n  <button\n    class=\"btn-clean btn-link\"\n    popoverTitle=\"{{ 'Dashboard template' | translate }}\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"dashboardTypePopoverRef\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n  >\n    <span class=\"tag tag--info text-12\">\n      <span class=\"dashboard-template-marker\"></span>\n      {{ dashboardTypeLabel | translate: { dashboardType: dashboard.deviceTypeValue } }}\n    </span>\n  </button>\n  <ng-template #dashboardTypePopoverRef>\n    <div\n      [innerHTML]=\"dashboardTypePopover | translate: { dashboardType: dashboard.deviceTypeValue }\"\n    ></div>\n  </ng-template>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-1\"\n  *ngIf=\"defaultWidgets.length > 0\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reset widgets' | translate }}\"\n    type=\"button\"\n    px-event=\"Reset dashboard\"\n    (click)=\"restore()\"\n    [disabled]=\"disabled || !mo?.id || (widgetsDashboard?.editMode$ | async)\"\n    data-cy=\"context-dashboard--button-reset-dashboard\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"reset\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Reset widgets' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/cockpit/working-with-dashboards/#working-with-dashboards\"\n  *ngIf=\"showContextHelpButton\"\n></c8y-help>\n\n<c8y-dashboard-detail\n  class=\"d-contents\"\n  [isReport]=\"isReport\"\n  [dashboard]=\"dashboard\"\n  [mo]=\"mo\"\n  [context]=\"context\"\n  [deviceType]=\"context?.type\"\n  [hideAvailability]=\"hideAvailability\"\n  [isNamedDashboard]=\"isNamedDashboard\"\n  (dashboardSaved)=\"reloadDashboard($event)\"\n  (previewChanged)=\"dashboardPreview($event)\"\n></c8y-dashboard-detail>\n\n<c8y-widgets-dashboard\n  [context]=\"context\"\n  [contextDashboard]=\"dashboard\"\n  [widgets]=\"widgets\"\n  [isCopyDisabled]=\"isCopyDisabled\"\n  [settings]=\"{\n    isLoading: isLoading,\n    isDisabled: disabled,\n    canDelete: canDelete && !!dashboard,\n    translateWidgetTitle: dashboard?.translateWidgetTitle ?? translateWidgetTitle,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard?.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy && !!dashboard,\n    defaultWidth: dashboard?.columns >= 24 ? 8 : 4,\n    columns: dashboard?.columns || 12\n  }\"\n  [breadcrumb]=\"breadcrumbSettings\"\n  [editModeButtons]=\"{\n    undoButtonDisabled: editModeService.undoButtonDisabled,\n    changeToUndoName: editModeService.changeToUndoName,\n    redoButtonDisabled: !editModeService.redoStackLastItem,\n    changeToRedoName: editModeService.redoStackLastItem?.name\n  }\"\n  (onChangeDashboard)=\"positionOrWidgetDimensionChange($event)\"\n  (onAddWidget)=\"addWidget()\"\n  (onEditWidget)=\"editWidget($event)\"\n  (onDeleteWidget)=\"deleteWidget($event)\"\n  (onSaveDashboard)=\"saveWidgetsToDashboard()\"\n  (onCancelDashboard)=\"cancelEditMode()\"\n  (revertChange)=\"revertChange($event)\"\n  (onChangeStart)=\"addDashboardClassToBody()\"\n  (onChangeEnd)=\"removeDashboardClassFromBody()\"\n  (onEditDashboard)=\"editDashboard()\"\n  (onCopyDashboard)=\"copyDashboard()\"\n  (onDeleteDashboard)=\"deleteDashboard()\"\n></c8y-widgets-dashboard>\n" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: ContextDashboardService }, { type: i2.AlertService }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CONTEXT_DASHBOARD_CONFIG]
@@ -3364,7 +3422,7 @@ class PasteDashboardActionComponent {
         this.pasteDisabled = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasteDashboardActionComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.Router }, { token: ContextDashboardService }, { token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PasteDashboardActionComponent, isStandalone: false, selector: "c8y-paste-dashboard-action", viewQueries: [{ propertyName: "templatePaste", first: true, predicate: ["templatePaste"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PasteDashboardActionComponent, isStandalone: true, selector: "c8y-paste-dashboard-action", viewQueries: [{ propertyName: "templatePaste", first: true, predicate: ["templatePaste"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
     <ng-template #templatePaste>
       <li>
         <button
@@ -3381,7 +3439,7 @@ class PasteDashboardActionComponent {
         </button>
       </li>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasteDashboardActionComponent, decorators: [{
             type: Component,
@@ -3405,7 +3463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
       </li>
     </ng-template>
   `,
-                    standalone: false
+                    imports: [IconDirective, C8yTranslateDirective, C8yTranslatePipe]
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1.Router }, { type: ContextDashboardService }, { type: i1$1.InventoryService }], propDecorators: { templatePaste: [{
                 type: ViewChild,
@@ -3481,6 +3539,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 const defaultConfig = {
     allowFullscreen: true
 };
+/**
+ * Module for the Context Dashboard feature.
+ * This module provides components and configurations for managing dashboards,
+ * {@link ContextDashboardComponent} is the main component for displaying the dashboard context.
+ * {@link WidgetConfigComponent} allows for configuring widgets within the dashboard.
+ * {@link DashboardDetailComponent} provides detailed views of individual dashboards.
+ */
 class ContextDashboardModule {
     static config(config = {}) {
         return {
@@ -3495,20 +3560,21 @@ class ContextDashboardModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ContextDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ContextDashboardModule, declarations: [ContextDashboardComponent,
-            WidgetConfigComponent,
-            DashboardDetailComponent,
-            AddDashboardComponent,
-            PasteDashboardActionComponent], imports: [CoreModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ContextDashboardModule, imports: [CoreModule,
             TooltipModule,
             PopoverModule,
             AssetSelectorModule,
-            IconSelectorModule, i1$3.BsDropdownModule, i8.CollapseModule, RouterModule,
+            IconSelectorModule, i1$3.BsDropdownModule, i2$3.CollapseModule, RouterModule,
             AppearanceSettingsComponent,
             TypeDashboardInfoComponent,
             WidgetPreviewComponent,
             WidgetConfigSectionComponent,
-            WidgetPreviewWrapperComponent], exports: [ContextDashboardComponent,
+            WidgetPreviewWrapperComponent,
+            ContextDashboardComponent,
+            WidgetConfigComponent,
+            DashboardDetailComponent,
+            AddDashboardComponent,
+            PasteDashboardActionComponent], exports: [ContextDashboardComponent,
             WidgetConfigComponent,
             DashboardDetailComponent,
             TypeDashboardInfoComponent,
@@ -3524,19 +3590,19 @@ class ContextDashboardModule {
             hookRoute([
                 {
                     path: DashboardDetailsTabId.GENERAL,
-                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-BCG_pjJz.mjs').then(m => m.DashboardGeneralSettingsComponent),
+                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-RXvOcs04.mjs').then(m => m.DashboardGeneralSettingsComponent),
                     outlet: DASHBOARD_DETAILS_OUTLET,
                     context: ViewContext.Dashboard
                 },
                 {
                     path: DashboardDetailsTabId.APPEARANCE,
-                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-B7m2lsIe.mjs').then(m => m.DashboardAppearanceSettingsComponent),
+                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-C-JLbcn5.mjs').then(m => m.DashboardAppearanceSettingsComponent),
                     outlet: DASHBOARD_DETAILS_OUTLET,
                     context: ViewContext.Dashboard
                 },
                 {
                     path: DashboardDetailsTabId.VERSIONHISTORY,
-                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-version-history.component-DjCdFkJw.mjs').then(m => m.DashboardVersionHistoryComponent),
+                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-version-history.component-DmPIJGXO.mjs').then(m => m.DashboardVersionHistoryComponent),
                     outlet: DASHBOARD_DETAILS_OUTLET,
                     context: ViewContext.Dashboard
                 }
@@ -3551,18 +3617,14 @@ class ContextDashboardModule {
             RouterModule,
             AppearanceSettingsComponent,
             WidgetPreviewComponent,
-            WidgetConfigSectionComponent] }); }
+            WidgetConfigSectionComponent,
+            ContextDashboardComponent,
+            WidgetConfigComponent,
+            DashboardDetailComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ContextDashboardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        ContextDashboardComponent,
-                        WidgetConfigComponent,
-                        DashboardDetailComponent,
-                        AddDashboardComponent,
-                        PasteDashboardActionComponent
-                    ],
                     imports: [
                         CoreModule,
                         TooltipModule,
@@ -3576,7 +3638,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         TypeDashboardInfoComponent,
                         WidgetPreviewComponent,
                         WidgetConfigSectionComponent,
-                        WidgetPreviewWrapperComponent
+                        WidgetPreviewWrapperComponent,
+                        ContextDashboardComponent,
+                        WidgetConfigComponent,
+                        DashboardDetailComponent,
+                        AddDashboardComponent,
+                        PasteDashboardActionComponent
                     ],
                     exports: [
                         ContextDashboardComponent,
@@ -3596,19 +3663,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         hookRoute([
                             {
                                 path: DashboardDetailsTabId.GENERAL,
-                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-BCG_pjJz.mjs').then(m => m.DashboardGeneralSettingsComponent),
+                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-RXvOcs04.mjs').then(m => m.DashboardGeneralSettingsComponent),
                                 outlet: DASHBOARD_DETAILS_OUTLET,
                                 context: ViewContext.Dashboard
                             },
                             {
                                 path: DashboardDetailsTabId.APPEARANCE,
-                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-B7m2lsIe.mjs').then(m => m.DashboardAppearanceSettingsComponent),
+                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-C-JLbcn5.mjs').then(m => m.DashboardAppearanceSettingsComponent),
                                 outlet: DASHBOARD_DETAILS_OUTLET,
                                 context: ViewContext.Dashboard
                             },
                             {
                                 path: DashboardDetailsTabId.VERSIONHISTORY,
-                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-version-history.component-DjCdFkJw.mjs').then(m => m.DashboardVersionHistoryComponent),
+                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-version-history.component-DmPIJGXO.mjs').then(m => m.DashboardVersionHistoryComponent),
                                 outlet: DASHBOARD_DETAILS_OUTLET,
                                 context: ViewContext.Dashboard
                             }
@@ -3963,11 +4030,11 @@ class DeviceInfoDashboardComponent {
         return this.contextDashboard?.canDeactivate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceInfoDashboardComponent, deps: [{ token: i1.ActivatedRoute }, { token: WidgetService }, { token: i2$1.TranslateService }, { token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DeviceInfoDashboardComponent, isStandalone: false, selector: "c8y-device-info-dashboard-dashboard", viewQueries: [{ propertyName: "contextDashboard", first: true, predicate: ContextDashboardComponent, descendants: true }], ngImport: i0, template: "<div *ngIf=\"!isLoading\">\n  <c8y-title>\n    {{ title }}\n  </c8y-title>\n  <c8y-context-dashboard\n    [translateWidgetTitle]=\"true\"\n    [name]=\"dashboardName\"\n    [context]=\"currentContext\"\n    [defaultWidgets]=\"widgetsList\"\n    [canDelete]=\"false\"\n    [hideAvailability]=\"true\"\n    [canCopy]=\"false\"\n  ></c8y-context-dashboard>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "hideAvailability"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DeviceInfoDashboardComponent, isStandalone: true, selector: "c8y-device-info-dashboard-dashboard", viewQueries: [{ propertyName: "contextDashboard", first: true, predicate: ContextDashboardComponent, descendants: true }], ngImport: i0, template: "<div *ngIf=\"!isLoading\">\n  <c8y-title>\n    {{ title }}\n  </c8y-title>\n  <c8y-context-dashboard\n    [translateWidgetTitle]=\"true\"\n    [name]=\"dashboardName\"\n    [context]=\"currentContext\"\n    [defaultWidgets]=\"widgetsList\"\n    [canDelete]=\"false\"\n    [hideAvailability]=\"true\"\n    [canCopy]=\"false\"\n  ></c8y-context-dashboard>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "hideAvailability"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceInfoDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-device-info-dashboard-dashboard', standalone: false, template: "<div *ngIf=\"!isLoading\">\n  <c8y-title>\n    {{ title }}\n  </c8y-title>\n  <c8y-context-dashboard\n    [translateWidgetTitle]=\"true\"\n    [name]=\"dashboardName\"\n    [context]=\"currentContext\"\n    [defaultWidgets]=\"widgetsList\"\n    [canDelete]=\"false\"\n    [hideAvailability]=\"true\"\n    [canCopy]=\"false\"\n  ></c8y-context-dashboard>\n</div>\n" }]
+            args: [{ selector: 'c8y-device-info-dashboard-dashboard', imports: [NgIf, TitleComponent, ContextDashboardComponent], template: "<div *ngIf=\"!isLoading\">\n  <c8y-title>\n    {{ title }}\n  </c8y-title>\n  <c8y-context-dashboard\n    [translateWidgetTitle]=\"true\"\n    [name]=\"dashboardName\"\n    [context]=\"currentContext\"\n    [defaultWidgets]=\"widgetsList\"\n    [canDelete]=\"false\"\n    [hideAvailability]=\"true\"\n    [canCopy]=\"false\"\n  ></c8y-context-dashboard>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: WidgetService }, { type: i2$1.TranslateService }, { type: i1$1.InventoryService }], propDecorators: { contextDashboard: [{
                 type: ViewChild,
                 args: [ContextDashboardComponent, { static: false }]
@@ -3975,7 +4042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class DeviceInfoDashboardModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceInfoDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: DeviceInfoDashboardModule, declarations: [DeviceInfoDashboardComponent], imports: [CommonModule, CoreModule, ContextDashboardModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: DeviceInfoDashboardModule, imports: [CommonModule, CoreModule, ContextDashboardModule, DeviceInfoDashboardComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceInfoDashboardModule, providers: [
             hookRoute({
                 context: ViewContext.Device,
@@ -3987,13 +4054,12 @@ class DeviceInfoDashboardModule {
                 canDeactivate: [(component) => component.canDeactivate()],
                 rootContext: ViewContext.Dashboard
             })
-        ], imports: [CommonModule, CoreModule, ContextDashboardModule] }); }
+        ], imports: [CommonModule, CoreModule, ContextDashboardModule, DeviceInfoDashboardComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceInfoDashboardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [DeviceInfoDashboardComponent],
-                    imports: [CommonModule, CoreModule, ContextDashboardModule],
+                    imports: [CommonModule, CoreModule, ContextDashboardModule, DeviceInfoDashboardComponent],
                     exports: [],
                     providers: [
                         hookRoute({
@@ -4045,11 +4111,11 @@ class DeviceManagementHomeDashboardComponent {
         return this.contextDashboard?.canDeactivate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceManagementHomeDashboardComponent, deps: [{ token: WidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DeviceManagementHomeDashboardComponent, isStandalone: false, selector: "c8y-device-management-home-dashboard", viewQueries: [{ propertyName: "contextDashboard", first: true, predicate: ContextDashboardComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n", dependencies: [{ kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "hideAvailability"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DeviceManagementHomeDashboardComponent, isStandalone: true, selector: "c8y-device-management-home-dashboard", viewQueries: [{ propertyName: "contextDashboard", first: true, predicate: ContextDashboardComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "hideAvailability"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceManagementHomeDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-device-management-home-dashboard', standalone: false, template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n" }]
+            args: [{ selector: 'c8y-device-management-home-dashboard', imports: [TitleComponent, ContextDashboardComponent, C8yTranslatePipe], template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n" }]
         }], ctorParameters: () => [{ type: WidgetService }], propDecorators: { contextDashboard: [{
                 type: ViewChild,
                 args: [ContextDashboardComponent, { static: true }]
@@ -4057,7 +4123,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class DeviceManagementHomeDashboardModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceManagementHomeDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: DeviceManagementHomeDashboardModule, declarations: [DeviceManagementHomeDashboardComponent], imports: [CommonModule, CoreModule, ContextDashboardModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: DeviceManagementHomeDashboardModule, imports: [CommonModule,
+            CoreModule,
+            ContextDashboardModule,
+            DeviceManagementHomeDashboardComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceManagementHomeDashboardModule, providers: [
             hookRoute({
                 path: 'home',
@@ -4066,13 +4135,20 @@ class DeviceManagementHomeDashboardModule {
                 rootContext: ViewContext.Dashboard
             }),
             hookNavigator({ label: gettext('Home'), icon: 'home', priority: 10000, path: '/home' })
-        ], imports: [CommonModule, CoreModule, ContextDashboardModule] }); }
+        ], imports: [CommonModule,
+            CoreModule,
+            ContextDashboardModule,
+            DeviceManagementHomeDashboardComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceManagementHomeDashboardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [DeviceManagementHomeDashboardComponent],
-                    imports: [CommonModule, CoreModule, ContextDashboardModule],
+                    imports: [
+                        CommonModule,
+                        CoreModule,
+                        ContextDashboardModule,
+                        DeviceManagementHomeDashboardComponent
+                    ],
                     exports: [],
                     providers: [
                         hookRoute({